WebGL教程_Three.js教程_郭隆邦技术博客 郭隆邦_技术博客 一对一班

Three.js圆弧轨迹线ArcCurve

下面代码通过圆弧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);
本站版权所有,本站任何内容未经允许不得转载   备案号:豫ICP备16004767号 QQ群:187740169 (WebGL-Three.js教程)   邮箱:guolongbang@163.com