three.js 学习总结

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

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

  1     var renderer;
  2         function initThree() {
  3             width = document.getElementById('canvas-frame').clientWidth;
  4             height = document.getElementById('canvas-frame').clientHeight;
  5             renderer = new THREE.WebGLRenderer({
  6                 antialias : true
  7             });
  8             renderer.setSize(width, height);
  9             document.getElementById('canvas-frame').appendChild(renderer.domElement);
 10             renderer.setClearColor(0xFFFFFF, 1.0);
 11         }
 12 
 13         var camera;
 14         function initCamera() {
 15             camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
 16             camera.position.x = 100;
 17             camera.position.y = 300;
 18             camera.position.z = 600;
 19             camera.up.x = 0;
 20             camera.up.y = 10;
 21             camera.up.z = 0;
 22             camera.lookAt(0,0,0);
 23             // lookAt ( 镜头左移量, 镜头右移量 )
 24         }
 25 
 26         var scene;
 27         function initScene() {
 28             scene = new THREE.Scene();
 29         }
 30 
 31         var light;
 32         function initLight() {
 33             light = new THREE.AmbientLight(0x000000);
 34             light.position.set(0, 0, 0);
 35             scene.add(light);
 36             light = new THREE.PointLight(0xffffff);
 37             light.position.set(0, 0,300);
 38             scene.add(light);
 39         }
 40 
 41         var cube;
 42         var mesh;
 43         function initObject() {
 44             var geometry = new THREE.CylinderGeometry( 150,100,100,5);
 45             for ( var i = 0; i < geometry.faces.length; i += 2 ) {
 46 
 47                 var hex = Math.random() * 0xffffff;
 48                 geometry.faces[ i ].color.setHex( hex );
 49                 geometry.faces[ i + 1 ].color.setHex( hex );
 50 
 51             }
 52 
 53             var material = new THREE.MeshBasicMaterial( { vertexColors:THREE.FaceColors} ); // 材质
 54             mesh = new THREE.Mesh( geometry,material);
 55             mesh.position = new THREE.Vector3(0,0,0);
 56             scene.add(mesh);
 57         }
 58 
 59         function initGrid(){
 60             var helper = new THREE.GridHelper( 1000, 50 ,0x0000ff, 0x808080);
 61             // helper.setColors( 0x0000ff, 0x808080 );
 62             scene.add( helper );
 63         }
 64 
 65         function threeStart() {
 66             initThree();
 67             initCamera();
 68             initScene();
 69             initLight();
 70             initObject();
 71             initGrid();
 72             animation();
 73 
 74         }
 75         function animation(x,y)
 76         {
 77             renderer.clear();
 78             if(x && y){
 79               mesh.rotation.x = x*0.01;
 80               mesh.rotation.y = y*0.01;
 81             }
 82             renderer.render(scene, camera);
 83             // requestAnimationFrame(animation);
 84         }
 85 
 86         window.onload = function(){
 87           threeStart();
 88           var start_obj = {};
 89           var dis_obj = {};
 90           document.onmousedown = function(event){
 91             start_obj.x = event.clientX;
 92             start_obj.y = event.clientY;
 93             var move_obj = {};
 94             document.onmousemove = function(event){
 95               move_obj.x = event.clientX - start_obj.x;
 96               move_obj.y = event.clientY - start_obj.y;
 97               move_obj.x = dis_obj.x ? move_obj.x + dis_obj.x : move_obj.x;
 98               move_obj.y = dis_obj.y ? move_obj.y + dis_obj.y : move_obj.y;
 99               animation(move_obj.y, move_obj.x)
100             }
101             document.onmouseup = function(){
102               dis_obj = move_obj;
103               document.onmousemove = null;
104             }
105           }
106         }

　　其中由于版本差异出现的问题是
　　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);百度了好久也没百度出来，还是源码靠谱。