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>
时间： 2024-11-07 04:55:48