threejs 绘制球体_ThreeJs 绘制点 线 面

所有的三位物体都是由点构成，两点构成线，三点构成面，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即可创建

等等....