举荐：将NSDT场景编辑器退出你3D工具链
其余工具系列：NSDT简石数字孪生
3D场景中插入新的几何体
后面课程绘制了一个立方体成果，上面通过three.js的球体构造函数SphereGeometry()在三维场景中增加一个球几何体。
SphereGeometry构造函数
SphereGeometry(radius, widthSegments, heightSegments)第一个参数radius束缚的是球的大小，参数widthSegments、heightSegments束缚的是球面的精度，球体你能够了解为正多面体，就像圆一样是正多边形，当宰割的边足够多的时候，正多边形就会有限靠近于圆，球体同样的的情理， 有趣味能够钻研利用WebGL实现它的算法，对于three.js就是查找文档看应用阐明。
| 参数 | 含意 |
|---|---|
| radius | 球体半径 |
| widthSegments | 管制球面精度，程度细分数 |
| heightSegments | 管制球面精度，程度细分数 |
绘制球体网格模型
应用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,40var 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}); //材质对象Materialvar mesh1 = new THREE.Mesh(geometry1, material1); //网格模型对象Meshscene.add(mesh1); //网格模型增加到场景中// 球体网格模型var geometry2 = new THREE.SphereGeometry(60, 40, 40);var material2 = new THREE.MeshLambertMaterial({ color: 0xff00ff});var mesh2 = new THREE.Mesh(geometry2, material2); //网格模型对象Meshmesh2.translateY(120); //球体网格模型沿Y轴正方向平移120scene.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轴正方向平移120mesh3.position.set(120,0,0);//设置mesh3模型对象的xyz坐标为120,0,0scene.add(mesh3); //辅助三维坐标系AxisHelper
为了不便调试预览threejs提供了一个辅助三维坐标系AxisHelper，能够间接调用THREE.AxisHelper创立一个三维坐标系，而后通过.add()办法插入到场景中即可。// 辅助坐标系 参数250示意坐标系大小，能够依据场景大小去设置
var axisHelper = new THREE.AxisHelper(250);scene.add(axisHelper);threejs三维坐标系老版本名称是AxisHelper，新版本名称AxesHelper。
3D建模学习工作室