挑选演员

Three.js 里有各种各样不同功能的“演员”:从最简单的线段开始

1. 线段

上面三种分别是 Line 连续线段、LineLoop 封闭线段 和 LineSegments 分隔线段, 点的取法都一致, 不同的是 scene.add() 里面的对象所属的类. 除此以外, 设置点集还可使用 LineCurve. 这些都是2D直线, 3D的可转到 LineCurve3 var pointArr = [], radius = 3 angle = 0, step = Math.PI / 3; for(var i = 0; i < 6; i++){ var x = radius * Math.cos(angle), y = radius * Math.sin(angle), z = 0; pointArr.push(new THREE.Vector3(x, y, z)); angle += step; } var geometry = new THREE.Geometry(); geometry.vertices = pointArr; var material = new THREE.LineBasicMaterial({ color: 0xff3399 }); var line = new THREE.Line(geometry, material); // 替换 LineLoop, LineSegments scene.add(LineSegments);

2. 曲线

Three.js 中内定好了几种曲线类给我们直接调用, 上图的三种分别是ArcCurve 圆弧曲线、 EllipseCurve 椭圆曲线和 CubicBezierCurve 三次贝塞尔曲线, scene.add() 里使用的类一般是 Line. 要查看更多的曲线类型, 请转到Curve. var arcCurve = new THREE.ArcCurve(0, 0, 4, 0, Math.PI * 2, false), points = arcCurve.getPoints(60); var geometry = new THREE.Geometry().setFromPoints(points), material = new THREE.LineBasicMaterial({ color: '#00ff99'}), line = new THREE.Line(geometry, material); scene.add(line);

3. 面和几何体网格

在 Three.js 中, 面和几何体都是由一个个三角形拼接成的. Geometry 里展示了所有课直接 使用的几何模型, 可以把几个简单的模型组装拼接成一个较复杂的模型. geometry 作为 Mesh 的第一个参数, 第二个参数是材质 Material, 上图是对它设置了 wireframe = true, 才会 看到一个个的网格, 如设为false便看不到网格是怎么由三角形拼接而成的了. var geometry = new THREE.SphereGeometry(4, 40, 40, 0, Math.PI*2, 0, Math.PI*2), material = new THREE.MeshBasicMaterial({color: 0x663399, wireframe: true}), sphere = new THREE.Mesh( geometry, material ); scene.add( sphere );

4. 模型

现实社会中的各种物体的结构都是很复杂的, 难以只用简单的几何体来拼接. 那么可用 Loader 来加载模型, 它们一般是 3D Max, Maya, Blender, C4D 等各种建模软件导出的3D格式文件.