关于node.js:Threejs教程3D场景中插入新的几何体

举荐：将 NSDT 场景编辑器退出你 3D 工具链
其余工具系列：NSDT 简石数字孪生

3D 场景中插入新的几何体

后面课程绘制了一个立方体成果，上面通过 three.js 的球体构造函数 SphereGeometry()在三维场景中增加一个球几何体。

SphereGeometry 构造函数

SphereGeometry(radius, widthSegments, heightSegments)

第一个参数 radius 束缚的是球的大小，参数 widthSegments、heightSegments 束缚的是球面的精度，球体你能够了解为正多面体，就像圆一样是正多边形，当宰割的边足够多的时候，正多边形就会有限靠近于圆，球体同样的的情理，有趣味能够钻研利用 WebGL 实现它的算法，对于 three.js 就是查找文档看应用阐明。

绘制球体网格模型

应用 THREE.SphereGeometry(60,40,40); 替换立方体几何体代码 new THREE.BoxGeometry(100, 100, 100);。

var box=new THREE.SphereGeometry(60,40,40);// 创立一个球体几何对象

更多几何体

、threejs 除了立方体、球体还提供了很多的常见几何体的 API，这里不再过多解说，具体能够查看 threejs 文档，你能够在案例源码中测试上面的几何体代码。// 长方体 参数：长，宽，高

var geometry = new THREE.BoxGeometry(100, 100, 100);
// 球体 参数：半径 60  经纬度细分数 40,40
var geometry = new THREE.SphereGeometry(60, 40, 40);
// 圆柱  参数：圆柱面顶部、底部直径 50,50   高度 100  圆周分段数
var geometry = new THREE.CylinderGeometry(50, 50, 100, 25);
// 正八面体
var geometry = new THREE.OctahedronGeometry(50);
// 正十二面体
var geometry = new THREE.DodecahedronGeometry(50);
// 正二十面体
var geometry = new THREE.IcosahedronGeometry(50);

同时绘制多个几何体

<embed width=”770″ height=”500″ src=”1. 插入多个几何体并偏移.html”/> 这也比较简单，间接模拟立方体的代码就能够，须要创立一个几何体对象作和一个材质对象，而后把两个参数作为网格模型构造函数 Mesh()的参数创立一个网格模型，而后再应用场景对象 scene 的办法.add()把网格模型 mesh 退出场景中。threejs 的几何体默认位于场景世界坐标的原点(0,0,0), 所以绘制多个几何体的时候，次要它们的地位设置。上面代码同时绘制了立方体、球体和圆柱三个几何体对应的网格模型。

// 立方体网格模型
var geometry1 = new THREE.BoxGeometry(100, 100, 100);
var material1 = new THREE.MeshLambertMaterial({color: 0x0000ff}); // 材质对象 Material
var mesh1 = new THREE.Mesh(geometry1, material1); // 网格模型对象 Mesh
scene.add(mesh1); // 网格模型增加到场景中

// 球体网格模型
var geometry2 = new THREE.SphereGeometry(60, 40, 40);
var material2 = new THREE.MeshLambertMaterial({color: 0xff00ff});
var mesh2 = new THREE.Mesh(geometry2, material2); // 网格模型对象 Mesh
mesh2.translateY(120); // 球体网格模型沿 Y 轴正方向平移 120
scene.add(mesh2);

// 圆柱网格模型
var geometry3 = new THREE.CylinderGeometry(50, 50, 100, 25);
var material3 = new THREE.MeshLambertMaterial({color: 0xffff00});
var mesh3 = new THREE.Mesh(geometry3, material3); // 网格模型对象 Mesh
// mesh3.translateX(120); // 球体网格模型沿 Y 轴正方向平移 120
mesh3.position.set(120,0,0);// 设置 mesh3 模型对象的 xyz 坐标为 120,0,0
scene.add(mesh3); //

辅助三维坐标系 AxisHelper

为了不便调试预览 threejs 提供了一个辅助三维坐标系 AxisHelper，能够间接调用 THREE.AxisHelper 创立一个三维坐标系，而后通过.add()办法插入到场景中即可。// 辅助坐标系 参数 250 示意坐标系大小，能够依据场景大小去设置

var axisHelper = new THREE.AxisHelper(250);
scene.add(axisHelper);

threejs 三维坐标系老版本名称是 AxisHelper，新版本名称 AxesHelper。
3D 建模学习工作室