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

来源：互联网发布：isp图像处理编程编辑：程序博客网时间：2024/05/01 09:36

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, middleCurvePositionY, middleCurvePositionZ),            new THREE.Vector3(endPoint.x, endPoint.y, endPoint.z)        ])        var curveModelData = curveData.getPoints(50)        var curveGeometry = new THREE.Geometry()        curveGeometry.vertices = curveModelData.slice(0, 1)        var curveMaterial = new THREE.LineBasicMaterial({color: lineStyle.color, linewidth: lineStyle.linewidth})        var curve = new THREE.Line(curveGeometry, curveMaterial)        var tween = new TWEEN.Tween({endPointIndex:1})            .to({endPointIndex:50}, flyTime)        tween.onUpdate(tweenHandler)        tween.start()        return curve        function tweenHandler() {            var endPointIndex = Math.ceil(this.endPointIndex)            var curvePartialData = new THREE.CatmullRomCurve3(curveModelData.slice(0, endPointIndex))            curve.geometry.vertices = curvePartialData.getPoints(50)            curve.geometry.verticesNeedUpdate = true        }    }

0 0