Webgl学习日志（二）——利用Three.js库、stats.js库、Tween.js库建各种常规模型

开源加速了技术的发展，也让我们这些搞技术的人牺牲了大量的时间来更新新的技能。

Webgl算是比较新的东西了，他本身的库相当繁琐，你写一个三角形的面，或者一个立方体，都能把人搞疯。好在很多大牛写了很多方便实用的库。

Three.js库用的比较多，里面有几何，有渲染等等很多实用的库，下载地址：https://github.com/mrdoob/three.js

stats.js库用来监测程序性能，下载地址：https://github.com/mrdoob/stats.js

Tween.js库用来制作动画，下载地址：https://github.com/sole

下面的例子刚好用上了这三个库。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Three框架</title>
    <script src="js/three.js"></script>
    <script src="js/stats.js"></script>
    <script src="js/Tween.js"></script>
    <style type="text/css">
        div#canvas-frame {
            border: none;
            cursor: pointer;
            width: 100%;
            height: 600px;
            background-color: #EEEEEE;
        }
    </style>
    <script>
        function initTween() {
            new TWEEN.Tween(mesh.position)
                    .to({ x: -400 }, 3000).repeat(Infinity).start();
        }

        var renderer;
        var stats;
        function initThree() {
            width = document.getElementById('canvas-frame').clientWidth;
            height = document.getElementById('canvas-frame').clientHeight;
            renderer = new THREE.WebGLRenderer({
                antialias: true
            });
            renderer.setSize(width, height);
            document.getElementById('canvas-frame').appendChild(renderer.domElement);
            renderer.setClearColor(0xFFFFFF, 1.0);

            stats = new Stats();
            stats.domElement.style.position = 'absolute';
            stats.domElement.style.left = '0px';
            stats.domElement.style.top = '0px';
            document.getElementById('canvas-frame').appendChild(stats.domElement);
        }

        var camera;
        function initCamera() {
            camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
            camera.position.x = 0;
            camera.position.y = 0;
            camera.position.z = 600;
            camera.up.x = 0;
            camera.up.y = 1;
            camera.up.z = 0;
            camera.lookAt(0,0,0);
        }

        var scene;
        function initScene() {
            scene = new THREE.Scene();
        }

        var light;
        function initLight() {
            light = new THREE.AmbientLight(0xFF0000);
            light.position.set(100, 100, 200);
            scene.add(light);
            light = new THREE.PointLight(0x00FF00);
            light.position.set(0, 0, 300);
            scene.add(light);
        }

        var cube;
        var mesh;
        function initObject() {
            var geometry = new THREE.CylinderGeometry(100, 150, 400);
            var material = new THREE.MeshLambertMaterial({ color: 0xFFFFFF });
            mesh = new THREE.Mesh(geometry, material);
            mesh.position = new THREE.Vector3(0, 0, 0);
            scene.add(mesh);
        }

        function threeStart() {
            initThree();
            initCamera();
            initScene();
            initLight();
            initObject();
            animation();
            initTween();

        }
        function animation() {
            renderer.render(scene, camera);
            requestAnimationFrame(animation);
            stats.update();
            TWEEN.update();
        }

    </script>
</head>

<body onload="threeStart();">
    <div id="canvas-frame"></div>
</body>
</html>

对于专业建模的人来说，几何部分最重要，所以下面重点补充几何部分。

对于这部分，如果单纯的只是看源码或者官网的英文，也要崩溃，对于我这种英语渣的，而且还偏偏在外企工作的人，那种糟糕的心情，想想也觉得恐怖。好在网络是一个很好的东西，这个Three.js的api中文版的帮助文档，你可以在这个链接查看：

http://techbrood.com/threejs/docs/

这里举几个例子

画一条直线：

function initObject() {
            var material = new THREE.LineBasicMaterial({
                color: 0x0000ff
            });

            var geometry = new THREE.Geometry();
            geometry.vertices.push(
                new THREE.Vector3(-100, 0, 0),                
                new THREE.Vector3(100, 0, 0)
            );

            var line = new THREE.Line(geometry, material);
            scene.add(line);
        }

画一条椭圆线：

function initObject() {
            var curve = new THREE.EllipseCurve(
                0, 0,            // ax, aY
                100, 20,           // xRadius, yRadius
                0, 2 * Math.PI,  // aStartAngle, aEndAngle
                false,            // aClockwise
                0                 // aRotation 
            );

            var path = new THREE.Path(curve.getPoints(50));
            var geometry = path.createPointsGeometry(50);
            var material = new THREE.LineBasicMaterial({ color: 0xff0000 });

            // Create the final Object3d to add to the scene
            var ellipse = new THREE.Line(geometry, material);
            scene.add(ellipse);
        }

圆曲线就比较简单了，只需要在上述代码的基础上，把x，y方向的半径修改成相等的值即可。

矩形就更简单了，实际上就是四条线组成的，都不用举例了。

接下来开始画简单的面：

1、矩形平面

function initObject() {
            var geometry = new THREE.PlaneGeometry(200, 200, 1,1);
            var material = new THREE.MeshBasicMaterial({ color: 0xffff00, side: THREE.DoubleSide });
            var plane = new THREE.Mesh(geometry, material);
            scene.add(plane);
        }

2、圆形曲面

function initObject() {
            var geometry = new THREE.CircleGeometry(50,32);
            var material = new THREE.MeshLambertMaterial({ color: 0xFFFFFF });
            mesh = new THREE.Mesh(geometry, material);
            mesh.position = new THREE.Vector3(0, 0, 0);
            scene.add(mesh);
        }

3、三角平面简单点可以通过圆来，即把三角形面改为1个，不过这个三角形是等腰三角形。

function initObject() {
            var geometry = new THREE.CircleGeometry(50,1);
            var material = new THREE.MeshLambertMaterial({ color: 0xFFFFFF });
            mesh = new THREE.Mesh(geometry, material);
            mesh.position = new THREE.Vector3(0, 0, 0);
            scene.add(mesh);
        }

4、如果想画任意的形状的三角平面，即通过THREE.Shape（）.lineTo()添加点即可，同理，想画不同形状的平面，添加点即可：

function initObject() {           

            var rectShape = new THREE.Shape();
            rectShape.moveTo(0, 0);
            rectShape.lineTo(0, 100);
            rectShape.lineTo(150, 100);            
            rectShape.lineTo(0, 0);

            var rectGeom = new THREE.ShapeGeometry(rectShape);
            var rectMesh = new THREE.Mesh(rectGeom, new THREE.MeshBasicMaterial({ color: 0xff0000 }));

            scene.add(rectMesh);
        }

线和面的问题解决了，接下来是体，体的话，也用现成的api来建：

1、首先是立方体：

function initObject() {           

            var geometry = new THREE.BoxGeometry(100, 100, 100);
            var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
            var cube = new THREE.Mesh(geometry, material);
            scene.add(cube);
        }

2、接下来是锥体：

var geometry = new THREE.ConeGeometry(50, 200, 320);
            var material = new THREE.MeshBasicMaterial({ color: 0xffff00 });
            var cone = new THREE.Mesh(geometry, material);
            scene.add(cone);

3、圆柱体：

function initObject() {           

            var geometry = new THREE.CylinderGeometry(50, 50, 200, 32);
            var material = new THREE.MeshBasicMaterial({ color: 0xffff00 });
            var cylinder = new THREE.Mesh(geometry, material);
            scene.add(cylinder);
        }

4、球体：

 function initObject() {           

            var geometry = new THREE.IcosahedronGeometry(100, 2);
            var material = new THREE.MeshBasicMaterial({ color: 0xffff00 });
            var sphere = new THREE.Mesh(geometry, material);
            scene.add(sphere);
        }

就先举这些常规模型的例子，如果想实现更复杂的图形，可以查看Three.js的中文api说明。

其他的比如光照、贴图等基础知识，建议去看看webgl中文网的Three.js基础教程，其他一些api的应用，买买书看看就可以了，看看api的帮助也都可以，更高级的应用就需要自己实践和摸索了。

Webgl学习日志（二）——利用Three.js库、stats.js库、Tween.js库建各种常规模型

猜你喜欢