three.js 几何体(三)
2020-07-12 20:15
344 查看
上一篇介绍了几何体的构造体参数,这篇郭先生就接着上一篇说。
1. ExtrudeGeometry挤压几何体
挤压几何体允许我们从一条形状路径中,挤压出一个Geometry。ExtrudeGeometry有两个参数,第一个参数是一个图形,第二个参数是它的配置
var shape = new THREE.Shape(); shape.moveTo(0, 1.5); shape.bezierCurveTo(2, 3.5, 4, 1.5, 2, -0.5); shape.lineTo(0, -2.5); shape.lineTo(-2, -0.5); shape.bezierCurveTo(-4, 1.5, -2, 3.5, 0, 1.5); var extrudeSettings = { steps: 2, //用于沿着挤出样条的深度细分的点的数量,默认值为1 depth: 0.3, //挤出的形状的深度,默认值为100 bevelEnabled: true, //对挤出的形状应用是否斜角,默认值为true bevelThickness: 0.3, //设置原始形状上斜角的厚度。默认值为6 bevelSize: 0.5, //斜角与原始形状轮廓之间的延伸距离 bevelSegments: 2, //斜角的分段层数,默认值为3 curveSegments: 12, //曲线上点的数量,默认值是12 }; var grometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
2. LatheGeometry车削几何体
车削几何体创建具有轴对称性的网格,它将一条线绕着Y轴来进行旋转。
var points = []; for (let i = 0; i < 41; i++) { points.push( new THREE.Vector2( Math.abs(Math.sin((Math.PI * i) / 10)) * 1.8, i * 0.1 - 2 ) ); } var geometry = new THREE.LatheGeometry(points, 30);
车削几何体的第一个参数是一个Vector2对象数组。每个点的X坐标必须大于0,第二个参数是要生成的车削几何体圆周分段的数量,默认值是12
3. ParametricGeometry参数化几何体
参数化几何体生成由参数表示其表面的几何体。参数化几何体的第一个参数是一个函数,该函数由三个参数u,v,t转换成,u、v值作为参数定义每个顶点的位置,t该点的位置对象,可通过该对象设置u,v组成额度定点。slices属性定义u值应该分成多少份,stacks属性定义v值应该分成多少份
var geometry = new THREE.ParametricGeometry( (u, v, target) => { let x = Math.sin(Math.PI * 2 * u) * 1.7 * Math.abs(Math.sin(Math.PI * v)); let y = v * 4 - 2; let z = Math.cos(Math.PI * 2 * u) * 1.7 * Math.abs(Math.cos(Math.PI * v)); target.set(x, y, z); }, 30, 12 );
参数化几何体可以做出十分丰富的数学几何体,要求有一定的几何知识。
转载请注明地址:郭先生的博客
相关文章推荐
- Three.js 学习记录 之 几何体(一)
- three.js 06-03 之 ExtrudeGeometry 高级几何体
- three.js 06-06 之 Binary Operations 几何体
- Three.js 实时更新几何体的方法
- three.js 06-05 之 ParametricGeometry 几何体
- three.js 多面几何体进行多面贴图 (贴图后需要再次渲染才能显现出来)
- three.js 05-04 之 BoxGeometry 几何体
- three.js 06-02 之 LatheGeometry 高级几何体
- three.js平面几何体之旋转
- three.js 05-06 之 CylinderGeometry 几何体
- 初探three.js几何体
- Three.JS提升学习5:从外部加载几何体
- three.js 06-06 之 TextGeometry 几何体
- three.js 05-07 之 TorusGeometry 几何体
- Three.JS提升学习4:几何体对象组合
- three.js 多面几何体进行多面贴图
- three.js 05-08 之 TorusKnotGeometry 几何体
- THREE.JS之几何体(Geometry)
- three.js 05-02 之 CircleGeometry 几何体
- three.js提供的几何体