three.js环境下的一种飞线动画实现方法

最新推荐文章于 2024-08-19 16:55:34 发布

郭不耐

最新推荐文章于 2024-08-19 16:55:34 发布

阅读量1.1w

点赞数 1

分类专栏： javascript webgl

本文链接：https://blog.csdn.net/guoweish/article/details/52989098

版权

该博客介绍了如何在three.js环境中实现飞线动画的一种方法。通过定义起始点、终点、高度限制和飞行时间，结合CatmullRomCurve3曲线生成动画路径，并使用TWEEN库更新线段的终点位置，实现动态的飞线效果。

摘要由CSDN通过智能技术生成

var startPoint = {
        x: 0,
        y: 0,
        z: 0
    }


    var endPoint = {
        x: -80,
        y: 0,
        z: 50
    }


    var heightLimit = 20


    var flyTime = 8000


    var lineStyle = {
        color: 0xcc0000,
        linewidth: 2
    }

var aCurve = createFlyLine(startPoint, endPoint, heightLimit, flyTime, lineStyle)
    scene.add(aCurve)

    function createFlyLine(startPoint, endPoint, heightLimit, flyTime, lineStyle) {
        var middleCurvePositionX = (startPoint.x + endPoint.x) / 2
        var middleCurvePositionY = heightLimit
        var middleCurvePositionZ = (startPoint.z + endPoint.z) / 2

        var curveData = new THREE.CatmullRomCurve3([
            new THREE.Vector3(startPoint.x, startPoint.y, startPoint.z),
            new THREE.Vector3(middleCurvePositionX, middleCurvePosition