ThreeJS入门知识
ThreeJS中几个重要对象：
场景：三维世界的容器，所有的元素均必须放在场景中才可以被看到，比如：模型、灯光等等；
1 var scene = new THREE.Scene();
摄相机：可以理解为场景中的人眼，人必须通过摄相机来观察三维场景中的物体；
var camera = new THREE.PerspectiveCamera(50,window.innerWidth/window.innerHeight,0.1,1000);
函数原型：
THREE.PerspectiveCamera = function ( fov, aspect, near, far )
参数定义：
fov：眼角大小，表示眼睁开的角度，该值越在，则场景中的物体越小，反之亦然；
aspect：摄相机纵横比；
near：摄相机近裁切面距离；当物体距摄相机距离小于该值时，物体无法显示；
far ：摄相机远裁切面距离；当物体距摄相机距离大于该值时，物体无法显示；、
还有其它类型的摄相机，参数大同小异，不一一赘述；
渲染器：这个概念我也不是很清楚，大概相当于一个滤镜吧，如果场景中没有渲染器，则场景无法显示；
1 var renderer = new THREE.WebGLRenderer();
下面一段简单的示例代码：
1 <--!DOCTYPE html> 2 <html> 3 <head> 4 <title>ThreeJSTest_Author_ff</title> 5 <style>canvas { width: 100%; height: 100% }</style> 6 <script src="threejs\\build\\three.js"></script> 7 </head> 8 <body> 9 <script> 10 //场景初始化 11 var scene = new THREE.Scene(); 12 //相机初始化 13 var camera = new THREE.PerspectiveCamera(50,window.innerWidth/window.innerHeight,0.1,1000); 14 //渲染器初始化 15 var renderer = new THREE.WebGLRenderer(); 16 17 //设置渲染器大小 18 //大家可以设置不同的数值试一下具体效果 19 renderer.setSize(window.innerWidth,window.innerHeight); 20 //将渲染器画面与网页关联 21 //没有该句则场景无法正常显示 22 document.body.appendChild(renderer.domElement); 23 24 //生成一个BOX几何体 25 //在ThreeJS中，单独的几何体是无法渲染的 26 var geometry = new THREE.CubeGeometry(1,1,1); 27 //设置材质 28 var material = new THREE.MeshBasicMaterial({color : 0x00ff00}); 29 //生成网格模型，Mesh在ThreeJS中可以渲染的 30 var cube = new THREE.Mesh(geometry,material); 31 //将模型添加到场景中 32 scene.add(cube); 33 34 //设置摄相机位置 35 //坐标的相关知识大家可以去网上搜一下OpenGl的坐标系 36 //ThreeJS的坐标系跟OpenGl的坐标系是一致的 37 camera.position.z = 5; 38 //camera.position.z = 5; 39 40 //渲染函数 41 function render() 42 { 43 //设置重复渲染回调 44 requestAnimationFrame(render); 45 //设置模型放置角度，实现动画效果 46 cube.rotation.x += 0.1; 47 cube.rotation.y += 0.1; 48 //渲染 49 renderer.render(scene,camera); 50 } 51 52 //调用渲染函数 53 render(); 54 55 </script> 56 </body> 57 </html>
