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汽车建模
2、blender:绘制山脉
博文链接:blender绘制山脉_看见搅拌机的博客-CSDN博客
一般情况下web开发工程师不需要自己建模,模型有建模师建模导出web需要的3维格式后,交付开发进行模型交互和数据绑定操作。
对于模型的操作,需要对模型数据和数据结构比较熟悉,说白了,操作模型就是操作三维模型的结构化json数据。