携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第7天，点击查看活动详情 >>
管道缓冲几何体（沿路径形成的几何体）TubeGeometry
class CustomSinCurve extends THREE.Curve {
constructor( scale = 1 ) {
super();
this.scale = scale;
}
getPoint( t, optionalTarget = new THREE.Vector3() ) {
const tx = t * 3 - 1.5;
const ty = Math.sin( 2 * Math.PI * t );
const tz = 0;
return optionalTarget.set( tx, ty, tz ).multiplyScalar( this.scale );
}
}
const path = new CustomSinCurve( 10 );
const geometry = new THREE.TubeGeometry( path, 20, 2, 8, false );
const material = new THREE.MeshPhongMaterial( { color: 0x3366ff } );
const mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
TubeGeometry(path : [Curve](), tubularSegments : Integer, radius : Float, radialSegments : Integer, closed : Boolean)
参数解析 path 一个由基类继承而来的3D路径。Curve： 曲线，上文代码里，核心是形成 x，y,z三维坐标的getPoint方法，multiplyScalar这个是向量的标量乘法，会把坐标扩大scale倍
tubularSegments 组成这一管道的分段数，默认值为64。这个值决定的是对曲线的还原程度，为1时，成为一个笔直的管道
radius 管道的半径，默认值为1。管道的粗细
radialSegments管道横截面的分段数目，默认值为8。这个值决定了管道的圆滑程度，为1是线，为2是平面，为3是横截面为三角形的管道，以此类推。越大形成的越像圆管
closed 管道的两端是否闭合，默认值为false。指的是横截面是否通透
# 边缘几何体（几何体边缘框架）EdgesGeometry
const geometry1 = new THREE.BoxGeometry( 20, 20, 20 );
const edges = new THREE.EdgesGeometry( geometry1 );
const line = new THREE.LineSegments( edges, new THREE.LineBasicMaterial( { color: 0xffffff } ) );
line.position.x = -40
scene.add( line );
这个就是把立方体拆解成线条形状了，没啥好记录的
WireframeGeometry
框架结构
图元系列重点总结
图元系列接近尾声，接下来对整体做一个梳理和总结
Geometry 和 BufferGeometry的区别和用法
-
基于 BufferGeometry 的图元是面向性能的类型。 几何体的顶点是直接生成为一个高效的类型数组形式，可以被上传到 GPU 进行渲染。 这意味着它们能更快的启动，占用更少的内存。但如果想修改数据，就需要复杂的编程。
-
基于 Geometry 的图元更灵活、更易修改。 它们根据 JavaScript 的类而来，像 Vector3 是 3D 的点，Face3是三角形。 它们需要更多的内存，在能够被渲染前，Three.js 会将它们转换成相应的 BufferGeometry表现形式。
总结 数学牛逼的用BufferGeometry，新手入门用Geometry
side
const material = new THREE.MeshPhongMaterial({
side: THREE.DoubleSide,
});
DoubleSide： 这个是为了解决在反面无法看到我们的立方体的问题提供的属性，材质默认是不渲染背面的，但是平面图形通过旋转是可以转到背面的，不设置这个属性会出现的效果就是 我们的平面旋转过程中时隐时现
字体TextGeometry
字体需要通过fontLoader先把字体文件加载进来，然后再实例化TextGeometry才能显示
基础示例依旧通过代码片段的方式引入
