three.js 学习系列02_children mesh

这一节我们学习几何和网格对象

我们要在场景中添加一个球体我们是这样的

var spg = new THREE.sphereGeometry(4,20,20);
va spm = new THREE.MeshBasicMaterial({ color:' #000'})
var sphere = new THREE.Mesh(spg, spm)
1
2
3

我们定义了 该对象的形状 几何结构 外观 材质,并把所有这些跟一个可以添加到场景中 的网格对象结合在一起

几何对象属性和函数

three.js 库附带了很多现成的几何体，你可以在三维场景中使用它们，只要加上材质并且创建一个mesh 变量，基本上就算完成了

geometry 变量 和其他大多数三维库中的一样，基本上是三维空间中的点集，以及将这些点连接起来的面

• 一个方块有8个角，每个角 都有个三维坐标 x,y,z 所以每个方块就是三维空间中的8个点，我们称为定点 vertice
• 一个方块有6个侧面，每个角有一个定点，我们称为侧面

所以我们可以通过点和面来手动创建几何体

var vertices = [
     new THREE.Vector3(1, 3, 1),
     new THREE.Vector3(1, 3, -1),
     new THREE.Vector3(1, -1, 1),
     new THREE.Vector3(1, -1, -1),
     new THREE.Vector3(-1, 3, -1),
     new THREE.Vector3(-1, 3, 1),
     new THREE.Vector3(-1, -1, -1),
     new THREE.Vector3(-1, -1, 1)
 ];

 var faces = [
     new THREE.Face3(0, 2, 1),
     new THREE.Face3(2, 3, 1),
     new THREE.Face3(4, 6, 5),
     new THREE.Face3(6, 7, 5),
     new THREE.Face3(4, 5, 1),
     new THREE.Face3(5, 0, 1),
     new THREE.Face3(7, 6, 2),
     new THREE.Face3(6, 3, 2),
     new THREE.Face3(5, 7, 0),
     new THREE.Face3(7, 2, 0),
     new THREE.Face3(1, 3, 4),
     new THREE.Face3(3, 6, 4),
 ];

 var geom = new THREE.Geometry();
 geom.vertices = vertices;
 geom.faces = faces;
 geom.computeFaceNormals();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

我们在一个 vertices 数组里定义了构成这个 几何体的点 将这些点连接起来创建三角形片面，并保存在 faces数组里面 例如元素 new THREE.Face3(0,2,1) 就是用 vertices 数组里的 点0，2，1 创建的三角形片面， 在计算机中任何形状 都可以 由三角形拼装而成 这个立方体 有6个面 每个面两个三角形 也就是12个三角形。

如果我们修改了 顶点 则可以通过下面的代码 对模型进行更新

mesh.children.forEach(function (e) {
    e.geometry.vertices = vertices;
     e.geometry.verticesNeedUpdate = true;
     e.geometry.computeFaceNormals();
 });
1
2
3
4
5

模型的 克隆

this.clone = function () {
				//克隆第一个模型
                var clonedGeometry = mesh.children[0].geometry.clone();
                //材质
                var materials = [
                    new THREE.MeshLambertMaterial({opacity: 0.6, color: 0xff44ff, transparent: true}),
                    new THREE.MeshBasicMaterial({color: 0x000000, wireframe: true})
                ];
				
                var mesh2 = THREE.SceneUtils.createMultiMaterialObject(clonedGeometry, materials);
                mesh2.children.forEach(function (e) {
                    e.castShadow = true
                });

                mesh2.translateX(5);
                mesh2.translateZ(5);
                mesh2.name = "clone";
                scene.remove(scene.getChildByName("clone"));
                scene.add(mesh2);
            }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

网格对象的函数和属性

创建一个网格需要一个几何体，以及一个或者多个材质，网格创建好之后，我们就可以把它添加到场景中，它就可以被渲染

• position 决定该对象相对其副对象的位置，多数情况下，一个对象的父对象是 THREE.Scene()对象
• rotation 通过这个属性你可以设置对象绕任何一个轴旋转的弧度
• scale 通过这个属性你可以沿着 x,y,z 轴缩放对象
• translateX 沿x 轴将对象平移指定距离
• translateY 沿y 轴将对象平移到指定的距离
• transleteZ 沿Y轴将对象平移到指定的距离

正投影相机和透视相机

使用正投影相机，所有方块渲染出来的尺寸都一样，对象和相机之间的距离不会 影响渲染的结果，最简单的理解就是 老师平常黑板上画的立方体 就是正投影相机

透视相机 简单的理解就是人眼 看到的 就是透视相机

我们先来看看 THREE.PerspectiveCamera

• fov 视场
• aspect 长宽比
• near 近面
• far 远面

我们再来看看正投影相机 THREE.OrthographicCamera


让相机在指定焦点上 聚焦

camera.lookAt(new THREE.Vector3(x,y,))；
1