Three.js 圆弧轨迹线 ArcCurve - 文章教程

Three.js 圆弧轨迹线 ArcCurve

发布于 2021-08-06 字数 1543 浏览 1042 评论 0

下面代码通过圆弧 ArcCurve 类创建一个圆弧对象,本质上就是生成一系列沿着圆周分布的顶点坐标,然后通过曲线的方法 .getPoints() 从圆弧线均匀获得沿着圆周曲线分布的顶点坐标,获得坐标后,赋值给几何体 Geometry 对象的顶点位置属性 .vertices

.getPoints() 方法的介绍参考圆弧 ArcCurve 的基类 Curve

var r = 400;// 圆弧线半径
// 圆弧曲线APITHREE.ArcCurve
var arc = new THREE.ArcCurve(0, 0, r, 0, 2 * Math.PI, true); // 圆心  半径  起始角度
// 参数50表示曲线分割成几部分
//返回一个vector2对象作为元素组成的数组,如果是3D样条曲面返回的元素是三维向量vector3
var points = arc.getPoints(50);
console.log('points', points);//控制台查看返回的顶点
var geometry = new THREE.Geometry();
// 设置几何体.vertices属性,插入顶点位置数据
points.forEach(function(v){
  geometry.vertices.push(new THREE.Vector3(v.x,v.y,0));
})
var material = new THREE.LineBasicMaterial({
  color: 0x222222
});
// LineLoop和Line不同,起始点闭合
var line = new THREE.LineLoop(geometry, material);
// var line = new THREE.Line(geometry, material);//起始点不闭合
line.rotateX(Math.PI / 2);//可以旋转圆弧线
scene.add(line);

也可以通过几何体 .setFromPoints() 方法将二维向量 Vector2 转化为三维向量 Vector3 赋值给几何体顶点属性 .vertices

// setFromPoints方法的本质:遍历points把vector2转变化vector3
geometry.setFromPoints(points);

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

清晨说ぺ晚安

我之所以活到现在的全部意义,是为了此刻能对你说,我爱你,我会在你身后永远守护你。

16 文章
2 评论
21567 人气
更多

推荐作者

qianbiandeboy

文章 0 评论 0

少女净妖师

文章 2 评论 0

zangqw

文章 0 评论 0

qq_7HKsl

文章 0 评论 0

伪装你

文章 1 评论 0