各种各样的几何体
- 学习ThreeJS的捷径
- 常用内置几何体介绍
-
- 立方缓冲几何体BoxGeometry
- 分段数的意义（该部分仅建议了解即可，无需深入）
- 圆形缓冲几何体CircleGeometry
- 圆柱缓冲几何体CylinderGeometry
- 三角面相关（建议了解即可）
- 圆锥缓冲几何体ConeGeometry
- 边缘几何体EdgesGeometry
- 形状缓冲几何体ShapeGeometry
- 挤压几何体ExtrudeGeometry
- 文本缓冲几何体TextGeometry
- 球缓冲几何体SphereGeometry
- 管道缓冲几何体TubeGeometry
- 格几何体WireframeGeometry
- 不常用几何体简介
-
- 多面缓冲几何体PolyhedronGeometry
- 各种多面几何体
- 车削缓冲几何体LatheGeometry
- 二维圆环缓冲几何体RingGeometry
- 圆环缓冲几何体TorusGeometry
- 圆环缓冲纽结几何体TorusKnotGeometry
学习ThreeJS的捷径
本段内容会写在0篇以外所有的，本人所编写的Threejs教程中
对，学习ThreeJS有捷径
当你有哪个函数不懂的时候，第一时间去翻一翻文档
当你有哪个效果不会做的时候，第一时间去翻一翻所有的案例，也许就能找到你想要的效果
最重要的一点，就是，绝对不要怕问问题，越怕找找别人问题，你的问题就会被拖的越久
如果你确定要走WebGL/ThreeJS的开发者路线的话，以下行为可以让你更快的学习ThreeJS
- 没事就把所有的文档翻一遍，哪怕看不懂，也要留个印象，至少要知道Threejs有什么
- 没事多看看案例效果，当你记忆的案例效果足够多时，下次再遇到相似问题时，你就有可能第一时间来找对应的案例，能更快解决你自己的问题
- 上述案例不只是官 的案例，郭隆邦技术博客，跃焱邵隼，暮志未晚等站点均有不少优质案例，记得一并收藏
http://www.yanhuangxueyuan.com/ 郭隆邦技术博客
https://www.wellyyss.cn/ 跃焱邵隼
http://www.wjceo.com/ 暮志未晚
这三个站点是我最常逛的站点，推荐各位有事没事逛一下，看看他们的案例和写法思路，绝对没坏处
常用内置几何体介绍
在ThreeJS中，官方提供了大量的内置几何体，比如说我们前面的教程中使用到的，BoxGeometry，PlaneGeometry
今天就着重对这些几何体做一个基本介绍
所有几何体均在官 中有对应的文档，在官 左上角的搜索框内，搜索geometry即可
立方缓冲几何体文档
这里我们的boxGeometry增加了后三个参数，这三个参数用于决定在 width，height,depth三个面的boxGeometry分段数，分段数越高，构成这个box使用的点线面数量越多
如果和之前一样，不写后面三个参数的话，后面三个参数的默认值均为1的情况下，我们渲染出来的效果是这样的
官方的这段介绍可能比较专业，以下为个人解释：
| 属性名 | 值类型 | 默认值 | 属性说明 |
|---|---|---|---|
| radius | Float | 1 | 半径，这个属性无需解释 |
| segments | Integer | 8 | 构成圆形的三角面数量，这个与上方的boxGeometry的分段数有一定区别，如下图所示，这里的值越高，我们产生的正多边形就越接近于圆形，所以本质上这个函数创建的不是圆形而是正多边形，由segments来控制最终产生的正多边形的边的数量 |
| thetaStart | float | 0 | 一般来说，我们都会有一个画圆的起始位置 |
| thetaLength | float | 2π | 这里是指画笔沿着圆心画了多长的距离 |
比如说想要创建一个倒半圆，我们从180度的位置开始画，然后画到360度（180 + 180）停下，这样就是一个下半圆
构造器：CylinderGeometry(radiusTop : Float, radiusBottom : Float, height : Float, radialSegments : Integer, heightSegments : Integer, openEnded : Boolean, thetaStart : Float, thetaLength : Float)
radiusTop — 圆柱的顶部半径，默认值是1。
radiusBottom — 圆柱的底部半径，默认值是1。
height — 圆柱的高度，默认值是1。
radialSegments — 圆柱侧面周围的分段数，默认为8。
heightSegments — 圆柱侧面沿着其高度的分段数，默认值为1。
openEnded — 一个Boolean值，指明该圆锥的底面是开放的还是封顶的。默认值为false，即其底面默认是封顶的。
thetaStart — 第一个分段的起始角度，默认为0。（three o’clock position）
thetaLength — 圆柱底面圆扇区的中心角，通常被称为“θ”（西塔）。默认值是2*Pi，这使其成为一个完整的圆柱。
圆柱高度就不解释了
openEnded设置为true时，会创建一个圆型管而不是一个圆柱
你可以使用Shape绘制出任何你想要的图形，但是，需要你一个坐标点一个坐标点的去输入你的绘制路径
然后使用创建好的Shape，来创建ShapeGeometry
let x = 0, y = 0; let heartShape = new THREE.Shape(); heartShape.moveTo( x + 5, y + 5 ); heartShape.bezierCurveTo( x + 5, y + 5, x + 4, y, x, y ); heartShape.bezierCurveTo( x - 6, y, x - 6, y + 7,x - 6, y + 7 ); heartShape.bezierCurveTo( x - 6, y + 11, x - 声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！