THREE.js—绘制弧线(SplineCurve3)

4 篇文章 1 订阅
8 篇文章 0 订阅

SplineCurve3通过一系列的点来创建一条平滑的曲线。

var curve = new THREE.SplineCurve3([
    new THREE.Vector3(-10, 10, 10);
    new THREE.Vector3(-5, 5, 5);
    new THREE.Vector3(0, 0, 0);
    new THREE.Vector3(5, -5, 5);
    new THREE.Vector3(10, 0, 10); 
]);

var geometry = new THREE.Geometry();
geometry.vertices = curve.getPoints(50);
var material = new THREE.LineMaterial({color : 0xff0000});
var line = new THREE.Line(geometry, material);

SplineCurve3Curve的子类,下面看看SplineCurve3从父类中继承了哪些方法。

  • THREE.SplineCurve3().getPoints(divisions):该方法返回一个Vector3数组,把曲线分为divisions段,返回每个点的坐标数组。上面的例子就是通过getPoint(50)返回曲线上
    50等分点的坐标,然后通过这些坐标构建一条曲线。
  • THREE.SplineCurve3().getPoint(t):t是0到1之间的数值,返回一个坐标值
  • THREE.SplineCurve3().getPointAt(u):在曲线的相对位置,根据弧长返回坐标值
  • THREE.SplineCurce3().getSpacedPoints(length):
  • THREE.SplineCurve3().getLength():返回曲线的长度
  • THREE.SplineCurve3().getLengths(divisions):返回累计段的长度列表

让点光源沿着弧线运动

1.新建一条弧线

var curve = new THREE.SplineCurve3([
    new THREE.Vector3(-10, 10, 10);
    new THREE.Vector3(-5, 5, 5);
    new THREE.Vector3(0, 0, 0);
    new THREE.Vector3(5, -5, 5);
    new THREE.Vector3(10, 0, 10); 
]);

2.创建一个光源

var pointLight = new PointLight(0xff0000, 1, 100, 1);
pointLight.name = 'pointLight';

3.获取弧线上面的点,然光源沿着这些点运动。

var pos = 0;
function move(){
    light = scene.getObjectByName('pointLight');
    if(pos < 1){
        light.position = curve.getPointAt(pos);
        pos += 0.001
    }else{
        pos = 0;
    }
}

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论 5

打赏作者

yangnianbing110

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值