webgl介绍

时间 2019-11-10

标签 webgl 介绍繁體版

原文原文链接

1、webgl与three.js　

　咱们知道canvas、svg等是2D绘图的，那么若是想要使用js进行3D绘图，能够吗？答案是确定的！实际上主流的3D开发使用的是c++，可是随着技术的发展，JavaScript目前已是无孔不入了，包括web（vue/react）、移动端（RN/weex）、客户端（electron/nw）、后端（nw）、人工智能（tensorflow.js），而three.js就是使用JavaScript进行3d绘图的框架了，而three.js是对webgl进行封装的，因此，实际上webgl是3D绘图的基础，但咱们使用three.js开发会更加高效。遗憾的是，目前仅有部分主流浏览器支持webgl，但仍是值得咱们探索和在合适的场景下使用的。而three.js也是很是容易从字面理解的，three就是3d，js就是JavaScript，因此three.js就是使用JavaScript进行3d开发。html

　在github上能够找到three.js，能够看到，three.js目前star数已经达到了4万之多，足以说明其流行程度。下面是three.js的github目录：vue

　　能够看到，three.js更新很是频繁，这里主要介绍一下各个目录。 build目录是生成的咱们直接引用的three.js和three.min.js文件；docs目录中罗列了three.js相关文档；editor目录是一些简单编辑程序；example目录是three.js实现的一些例子； src目录是该项目的源代码；test目录是项目的测试代码；utils目录存放一些脚本。react

2、如何使用

　　使用很是简单，首先咱们进入build目录中的three.min.js，而后点击raw按钮，就能够获得一个url（https://raw.githubusercontent.com/mrdoob/three.js/dev/build/three.min.js），最后咱们在html文件中引入这个js文件便可，注意：github连接较慢，咱们能够复制js代码到本地，而后引入，以下所示：c++

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>three.js</title>
    <script src="./three.js"></script>
</head>
<body>
</body>
</html>

　　接着，咱们在chrome浏览器中打开F12，在console控制台中输入THREE，而后回车，能够获得下面的结果：git

　　即THREE是three.js暴露出来的一个对象，其中有不少属性和方法能够调用。github

3、核心概念

　　在three.js中，核心的即是场景（scene）、相机（camera）、渲染器（renderer），有了这三者，才能使用相机将场景渲染到网页上去。web

（1）场景

　　描述3D使用的就是场景，使用THREE.Scene()构造，注意，THREE是对象，而Scene是构造函数，因此首字母都是大写的。chrome

（2）相机

　　相机就像咱们的眼睛，从不一样的角度看，那么看到的场景也就不同。另外，场景是同样的，而相机有多种拍照方式，因此，须要咱们根据须要调整。而最经常使用的就是透视相机，即THREE.PerspectiveCamera()，一样的，THREE是对象，PerspectiveCamera是构造函数，首字母大写，且是驼峰式命名方法。canvas

（3）渲染器

　　即在网页上显示什么元素，都是须要渲染出来的，使用THREE.WebGLRenderer，且在使用过程当中，须要使用domElement挂载到页面上，后面的例子会讲解。　　后端

而对于这三者，咱们能够认为场景是一个容器，能够将一些物体如cube放在这个容器中；而相机的做用就是对这个选择合适的角度容器拍摄获得一张照片；渲染器的做用是把相机拍到的照片放到浏览器中显示，以下所示：

4、实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>three.js</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
    <script src="./three.js"></script>
</head>
<body>
    <script>
        var scene = new THREE.Scene();

        var axes = new THREE.AxesHelper(100);        
        scene.add(axes);

        var camera = new THREE.PerspectiveCamera(50, window.innerWidth/window.innerHeight, 1, 1000);    
        camera.position.x = 100;
        camera.position.y = 100;
        camera.position.z = 100;
        camera.lookAt(scene.position);
        
        var renderer = new THREE.WebGLRenderer();
        renderer.setClearColor(0x111111);
        renderer.setSize(window.innerWidth, window.innerHeight);

        var geometry = new THREE.CubeGeometry(10, 10, 10);
        var material = new THREE.MeshBasicMaterial({color: 0xff0000});
        var cube = new THREE.Mesh(geometry, material);
        cube.position.x = 0;
        cube.position.y = 0;
        cube.position.z = 0;
        scene.add(cube);

        document.body.append(renderer.domElement);
        renderer.render(scene, camera);
    </script>
</body>
</html>

创立一个Scene（场景），这个场景是three.js所依赖的基础，是须要首先创立。
有了场景，咱们就能够建立一个AxesHelper（坐标轴），而后add到场景中。
接着建立一个PerspectiveCamera（相机），而且指定相机的位置。
有了场景、坐标轴、相机以后，就能够建立3D物体了，而3D物体的是由Geometry（几何图形）和Material（材料）组成，而后添加物体到指定的位置，最后添加到场景中。
最后，咱们须要将DOM与3D结合起来，而后进行渲染便可。

　　因而，咱们能够看到，使用three.js仍是很简单的，就是场景、坐标轴、相机、渲染引擎、事物、挂载。最后结果以下：

　　如上所示是静态的，若是须要时动态的，就须要用到渲染循环了，主要用到的函数是requestAnimationFrame，以下，仅仅替换了极少的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>three.js</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
    <script src="./three.js"></script>
</head>
<body>
    <script>
        var scene = new THREE.Scene();

        var axes = new THREE.AxesHelper(100);        
        scene.add(axes);

        var camera = new THREE.PerspectiveCamera(50, window.innerWidth/window.innerHeight, 1, 1000);    
        camera.position.x = 100;
        camera.position.y = 100;
        camera.position.z = 100;
        camera.lookAt(scene.position);
        
        var renderer = new THREE.WebGLRenderer();
        renderer.setClearColor(0x111111);
        renderer.setSize(window.innerWidth, window.innerHeight);

        var geometry = new THREE.CubeGeometry(10, 10, 10);
        var material = new THREE.MeshBasicMaterial({color: 0xff0000});
        var cube = new THREE.Mesh(geometry, material);
        cube.position.x = 0;
        cube.position.y = 0;
        cube.position.z = 0;
        requestAnimationFrame(function () {
            cube.position.x++;
        });
        scene.add(cube);

        document.body.append(renderer.domElement);

        function render() {
            cube.rotation.x += 0.1;
            cube.rotation.y += 0.1;
            renderer.render(scene, camera);
            requestAnimationFrame(render);
        }
        render();
    </script>
</body>
</html>

View Code

　　以下所示，经过requestAnimationFrame在配合cude的rotation属性使用，就可让这个cube旋转起来了。

　　另外，对于相机的设置，咱们还能够设置up属性，即camera.up.x = 0; camera.up.y = 0; camera.up.z = 0;即camera的position属性能够肯定相机位置，lookAt能够肯定看的方向，可是相机拍摄是咱们这样竖着拍摄仍是横着拍摄呢，这就取决于你设置camera的上方了，使用camera.up属性来设置。