1. 物体运动效果

4.gif

2. 核心代码

var points, sphere
var index = 0

initModel()
animate()

function initModel() {
  // 1.创建运动轨迹
  var point1 = new THREE.Vector3(150, 0, 150)
  var point2 = new THREE.Vector3(-150, 0, -150)
  var control1 = new THREE.Vector3(50, 100, 50)
  var control2 = new THREE.Vector3(-50, -100, -50)

  var curve = new THREE.CubicBezierCurve3(point1, control1, control2, point2)
  // 2.通过轨迹创建点坐标数据
  points = curve.getPoints(200);
  var curveGeometry = new THREE.BufferGeometry()
  curveGeometry.setFromPoints(points);

  var curveMaterial = new THREE.LineBasicMaterial({
    color: 'red'
  })
  var curveMesh = new THREE.Line(curveGeometry, curveMaterial)
  scene.add(curveMesh)

  // 3.创建运动对象
  var geometry = new THREE.SphereGeometry(2, 32, 32)
  var material = new THREE.MeshLambertMaterial({
    color: 0xffff00
  })
  sphere = new THREE.Mesh(geometry, material)
  sphere.position.set(points[0].x, points[0].y, points[0].z)
  scene.add(sphere)

}

function reader() {
  TWEEN.update()
  renderer.render(scene, camera)
  // 4.添加动画效果
  if(sphere) {
    let point = points[index]
    sphere.position.set(point.x, point.y, point.z)
    index++
    if(index === points.length) {
      index = 0
    }
  }
}

function animate() {
  reader()
  requestAnimationFrame(animate)
}

3. 核心代码说明

26.jpg
27.jpg

4. 总结

  1. 创建路径
  2. 通过路径创建点数据
  3. 创建运动的物体
  4. 循环遍历改变物体的位置(关键)