three.js环境下的一种飞线动画实现方法
·
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)