ThreeJS入门知识

浏览数：15 / 时间：2015年06月09日

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>