所有的三位物体都是由点构成,两点构成线,三点构成面,ThreeJs又如何绘制出点、线、面呢 ?
在ThreeJs中:
模型由几何体和材质构成
模型以何种形式(点、线、面)展示取决于渲染方式
1. 几何体
首先我们来创建一个自定义的几何体
var geometry = new THREE.Geometry(); //声明一个几何体对象Geometry
THREE.Geometry是所有几何体的基类,它有几个重要的属性:
vertices : 数组,保存该几何体下所有顶点(Vector3对象)
colors : 数组,保存该几何体下所有顶点的颜色信息(Color对象)
faces : 数组,保存该几何体下所有面信息(Face3对象)
此时该几何体为空,我们需要创建一些点,然后绑定到该几何体
var p1 = new THREE.Vector3( 0, 0, 0);var p2 = new THREE.Vector3( 50, 0, 50);var p3 = new THREE.Vector3( 50, 50, 50);var p4 = new THREE.Vector3( 0, 50, 0);//绑定顶点到几何体
geometry.vertices.push(p1, p2, p3, p4);//如果需要每个点展示不同颜色,需要给每个顶点添加颜色,也可以通过材质设置统一颜色
geometry.colors =[new THREE.Color( 0xFF0000),new THREE.Color( 0x00FF00),new THREE.Color( 0x0000FF),new THREE.Color( 0xFFFF00)
];
这里创建了一个几何体,接下来我们把他以点的形式渲染到页面上
//如果以点的形式渲染,需要设置点对应材质
var pointMaterial = newTHREE.PointsMaterial({
color:0xFFFFFF, //设置颜色,默认 0xFFFFFF
vertexColors: true, //定义材料是否使用顶点颜色,默认false ---如果该选项设置为true,则color属性失效
size: 5 //定义粒子的大小。默认为1.0
});//生成点模型
var points = newTHREE.Points(geometry, pointMaterial);//将模型添加到场景
scene.add(points);
接下来我们创建一个线模型
//如果以线的形式渲染,需要设置线材质
var lineMaterial = newTHREE.LineBasicMaterial({
color:0xFFFFFF, //设置颜色,默认 0xFFFFFF
vertexColors: true, //设置为true线条会以两点颜色渐变 ---如果该选项设置为true,则color属性失效
linewidth: 5, //线宽,window下不生效
});var line = newTHREE.Line(geometry, lineMaterial);
scene.add(line);
再来创建一个网格(面)模型
//创建一个面,参数为几何体顶点的索引
var face1 = new THREE.Face3( 0, 1, 2);//设置这个面的法向量
face1.normal = new THREE.Vector3( 0, 0, -1);//设置各个顶点对应颜色
face1.vertexColors =[new THREE.Color(0xFF0000),new THREE.Color(0x00FF00),new THREE.Color(0x0000FF),
];
geometry.faces.push(face1);//设置网格材质,这里设置为Lambert材质为一种不发光材质
var meshMaterial = newTHREE.MeshLambertMaterial({
vertexColors : THREE.VertexColors,
side: THREE.DoubleSide
});var mesh = newTHREE.Mesh(geometry, meshMaterial);
scene.add(mesh);
可以看出以网格形式渲染需要先创建Face3对象,这是因为我们几何体的每个面都有其对应的法向量,即设置以哪个角度反射光线
Face3对象对应的属性
a,b,c : 对应三角面的三个点(Vector3对象)
color :颜色
normal :该三角面的法向量(Vector3对象)
vertexColors : 设置三角面三个点对应的法向量(Vector3对象数组),通常一个面都有一个统一的法向量,即设置 normal 即可
以上是我们创建自定义模型的基本操作,ThreeJs为我们提供了很多自带的模型,我们只需要调用API即可创建
等等....