Geometry
简单来说 Geometry 是一个3D空间的点集, 把这些点按照正确的顺序连接起来,就形成了3D模型.比如一个三棱锥,有4个面,一共4个顶点. 每个顶点都有一个3维坐标,(x,y,z). 但是光有这些点还不够,threejs还需要知道如何连接这些点, 所以还需要传递更多的信息.
Geometry 的 vertices 属性包含了该几何体中所有的点(Vector3). faces属性包含了所有的面,注意 Face类的构造参数是 vertices的index. 这和WebGl 的drawElement 类似
我们来自定义一个几何体对象.
var geom = new THREE.Geometry();
var v1 = new THREE.Vector3(0,0,0);
var v2 = new THREE.Vector3(0,500,0);
var v3 = new THREE.Vector3(0,500,500);
//geometry 中的 vertices 用来存放该几何体的所有顶点.
geom.vertices.push(v1);
geom.vertices.push(v2);
geom.vertices.push(v3);
// 0 1 2 是geom.vertices中 Vector的索引值
geom.faces.push( new THREE.Face3( 0, 1, 2 ) );
//兰伯特材质
var object = new THREE.MeshLambertMaterial({ "color": "#fff" });
scene.addObject(object);
上面代码 我们定义了一个三角形.
threejs 还帮我们定义了很多种常见的几何体,如我们使用 new THREE.BoxGeometry(200,200,200); 可以方便的定义一个盒装物体.
Material
Material是材质,我们定义一个物体的材质主要用于光照, threejs 包含的材质有很多,常用有3种.
-
MeshBasicMaterial:基本材质,对光照不敏感,即无论采用什么光照,物体颜色都不会改变
-
MeshLambertMaterial:兰伯特材质,对光照敏感,会有较暗的反射.适用于大多数场景.
-
MeshPhongMaterial:旁氏材质,对光照敏感,会有较强的反射.适用于模拟外表光亮的金属材质.
- PointsMaterial:点材质,用于绘制单独的点.
我们可以这样创建一个材质:
//白色基础材质
var material = new THREE.MeshBasicMaterial({ "color": "#fff" });
//白色兰伯特材质
var material = new THREE.MeshLambertMaterial({ "color": "#fff" });
//白色旁氏材质
var material = new THREE.MeshPhongMaterial({ "color": "#fff" });
//白色点状材质
var material = new THREE.PointsMaterial({size:5, color: "#fff" });
不同的材质有不同的构造参数.这里就不再啰嗦了. 详细的可以看一下文档
https://threejs.org/docs/index.html?q=Material#Manual/Introduction/Creating_a_scene
Mesh
Mesh 是由 Geometry + Material 组成的网格体, 可以基本理解为一个mesh就是一个3D模型. Mesh提供了一些对整个3D模型的基本控制函数.如 旋转 位移等等.
Mesh 必须有 Geometry 和 Material 共同组成. 我们可以使用 new THREE.Mesh(geometry, material); 来创建一个Mesh对象.
var geometry = new THREE.BoxGeometry(400, 400, 400);
var material = new THREE.MeshLambertMaterial({ "color": "#fff" });
var mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0, 0, 0);
scene.add(mesh);
mesh.rotation.y+=1;//沿Y轴旋转1弧度.
总结: Camera + Scene + Renderer + Mesh = 基本场景
Camera 决定眼睛在哪里?从哪个方向看世界.
Scene 我就是世界,所有的物体都要放在这里.
Renderer 决定随后的图像如何输出到网页上.
Mesh 我是3D模型,我被放在 Scene 里,然后 Scene 被 Camera 以某个角度拍下照片,显示在 Renderer 上.