three.js 学习总结

看了一个星期的three.js写了一个拖拽的几何体，总结一下，由于three.js 93dev 和 73dev两个版本的差异还是有点坑的，官方教程也没有更新；

这次我用的93dev版本，并且自己写了一个小拖拽

    var renderer;
        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);
        }

        var camera;
        function initCamera() {
            camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
            camera.position.x = 100;
            camera.position.y = 300;
            camera.position.z = 600;
            camera.up.x = 0;
            camera.up.y = 10;
            camera.up.z = 0;
            camera.lookAt(0,0,0);
            // lookAt ( 镜头左移量, 镜头右移量 )
        }

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

        var light;
        function initLight() {
            light = new THREE.AmbientLight(0x000000);
            light.position.set(0, 0, 0);
            scene.add(light);
            light = new THREE.PointLight(0xffffff);
            light.position.set(0, 0,300);
            scene.add(light);
        }

        var cube;
        var mesh;
        function initObject() {
            var geometry = new THREE.CylinderGeometry( 150,100,100,5);
            for ( var i = 0; i < geometry.faces.length; i += 2 ) {

                var hex = Math.random() * 0xffffff;
                geometry.faces[ i ].color.setHex( hex );
                geometry.faces[ i + 1 ].color.setHex( hex );

            }

            var material = new THREE.MeshBasicMaterial( { vertexColors:THREE.FaceColors} ); // 材质
            mesh = new THREE.Mesh( geometry,material);
            mesh.position = new THREE.Vector3(0,0,0);
            scene.add(mesh);
        }

        function initGrid(){
            var helper = new THREE.GridHelper( 1000, 50 ,0x0000ff, 0x808080);
            // helper.setColors( 0x0000ff, 0x808080 );
            scene.add( helper );
        }

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

        }
        function animation(x,y)
        {
            renderer.clear();
            if(x && y){
              mesh.rotation.x = x*0.01;
              mesh.rotation.y = y*0.01;
            }
            renderer.render(scene, camera);
            // requestAnimationFrame(animation);
        }

        window.onload = function(){
          threeStart();
          var start_obj = {};
          var dis_obj = {};
          document.onmousedown = function(event){
            start_obj.x = event.clientX;
            start_obj.y = event.clientY;
            var move_obj = {};
            document.onmousemove = function(event){
              move_obj.x = event.clientX - start_obj.x;
              move_obj.y = event.clientY - start_obj.y;
              move_obj.x = dis_obj.x ? move_obj.x + dis_obj.x : move_obj.x;
              move_obj.y = dis_obj.y ? move_obj.y + dis_obj.y : move_obj.y;
              animation(move_obj.y, move_obj.x)
            }
            document.onmouseup = function(){
              dis_obj = move_obj;
              document.onmousemove = null;
            }
          }
        }

　　其中由于版本差异出现的问题是
　　1. camera.lookAt(0,0,0); 
　　　官方的写法 camera.lookAt({x:0,y:0,z:0});  已经不行了；
　　2. THREE.LinePieces 换成 THREE.LineSegments ，前者已经被弃用了；

　　3. new THREE.GridHelper( 1000, 50) ；setColors(0x0000ff, 0x808080) 网格助手配色的问题，官方给出的setColors已经弃用，在源码中可以看出，颜色已经作为后两个参数传进去了；
　　　　因此正确的写法是 new THREE.GridHelper( 1000, 50 ,0x0000ff, 0x808080);百度了好久也没百度出来，还是源码靠谱。