第七节：学习使用Geometry几何图形【Three.js整理】

Geometry几何，是three.js中3D模型的骨架，在three.js中内置了一些简单的Geometry，红框部分是本节课要讲的。

BoxGeometry

const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );

const geometry = new THREE.BoxGeometry( width, height, depth ,widthSegments ,heightSegments ,depthSegments);

width——宽度；即平行于 X 轴的边的长度。选修的; 默认为 1
height — 高度；即平行于 Y 轴的边的长度。选修的; 默认为 1
depth — 深度；即平行于 Z 轴的边的长度。选修的; 默认为 1
widthSegments — 沿边宽度分段的矩形面数。选修的; 默认为 1
heightSegments — 沿边高度分段的矩形面数。选修的; 默认为 1
depthSegments — 沿边深度分段的矩形面数。选修的; 默认为 1 

在Three.js编辑器里编辑

three.js 在线编辑器 html editorhttps://mrdoob.com/projects/htmleditor/

更多几何请访问：three.js docs

如以下所示：大家做个大概的了解。

BoxGeometry  箱体几何形状	CircleGeometry 圆几何
ConeGeometry 锥体几何	CylinderGeometry 气缸几何
DodecahedronGeometry 十二面体几何	EdgesGeometry 线框几何
ExtrudeGeometry 拉伸几何	IcosahedronGeometry 二十面体几何
LatheGeometry 车床几何	OctahedronGeometry 八面体几何
PlaneGeometry 平面几何	RingGeometry 环形几何

在复杂的场景应用中，我们一般不会使用内置的Geometry，一是因为太简单了，如果实现下面复杂的模型和场景，不现实。

如以下场景：

那么在现实中，有3D软件能让你随心所欲的实现各种复杂模型建模和渲染。如blender，3Dmax等三维建模软件来建模并导出前端所需要的模型瓦片。

 如下图：

1、blender汽车建模

 博文链接：布加迪奇龙Blender雕刻、shading，并导入Three.js ，3DWEB模型【Three.js+Blender建模+web前端+可视化】_看见搅拌机的博客-CSDN博客_blender three.js

 

2、blender：绘制山脉 

博文链接：blender绘制山脉_看见搅拌机的博客-CSDN博客

 

 一般情况下web开发工程师不需要自己建模，模型有建模师建模导出web需要的3维格式后，交付开发进行模型交互和数据绑定操作。

对于模型的操作，需要对模型数据和数据结构比较熟悉，说白了，操作模型就是操作三维模型的结构化json数据。​​​​​​​