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);百度了好久也没百度出来，还是源码靠谱。
