如何使用 Three.js 曲线作为移动网格的路径

Question

正在构建动画，当前处于此状态：

http://jsfiddle.net/CoderX99/66b3j9wa/1/

请不要查看代码，它是从 CoffeeScript 编译而来的，对您的理智不利。

对于你的想法，你正在看一些 "nordic" 景观，那里有船只漂浮，汽车行驶。左上角的黄色球体是汽车的代表，还有弯道代表的弯路。

准确地说是

CatmullRomCurve3。黄色球体应该使用曲线移动。

让我们使用闭合曲线，它的编码如下：

curveRoadNo2 = new THREE.CatmullRomCurve3([
  new THREE.Vector3( 15, roadHeight, 11 ),
  new THREE.Vector3( 12, roadHeight, 12 ),
  new THREE.Vector3( 11, roadHeight, 11 ),     
  new THREE.Vector3( 11, roadHeight, 9 ),
  new THREE.Vector3( 12, roadHeight, 8 ),
  new THREE.Vector3( 12, roadHeight, 5 ),
  new THREE.Vector3( 15, roadHeight, 3 ),
  new THREE.Vector3( 17, roadHeight, 7 ),
  new THREE.Vector3( 16, roadHeight, 8 ),
  new THREE.Vector3( 16, roadHeight, 9 ),
  new THREE.Vector3( 17, roadHeight, 11 )
] )

随机输入。

然后：

curveRoadNo2.closed = true
geometry = new THREE.Geometry()
geometry.vertices = curveRoadNo2.getPoints( 200 )
material = new THREE.LineBasicMaterial( { color : 0xa9c41e } )
curveObject = new THREE.Line( geometry, material )
scene.add( curveObject )

我想用 getPoint(t) 和 getTangent(t) 以某种方式制作动画，但我有点无能为力。

t = 0
animate = ->
  requestAnimationFrame animate

  t += 0.1
  vehicle.position = curveRoadNo2.getPoint(t)

  # (Not per se relevant)
  # The following works for animating the ship but makes 
  # absolutely no sense yet. 
  # Also this should move along some kind of an elliptical path,
  # showing up on to the scene, making a stop for unloading,
  # moving again. And loop.  
  # if 0 < t < 7
  #     v = t * 0.01
  #     ship.rotation.y += 26 * v ** 0.96 * Math.PI / 180
  #     ship.position.x += -6 * v
  #     ship.position.z +=  12 * v ** 1.3 

  renderer.render scene, camera
animate()

可以看到车辆静止不动。我查找了解决方案，但它们似乎都非常冗长且过于复杂。

当然也欢迎JS回答

Answer 1

你应该为一个位置定义另一个向量

  animate = function() {
    requestAnimationFrame(animate);
    t += 0.001;
    var pos =  curveRoadNo2.getPoint(t);
    vehicle.position.set(pos.x, pos.y, pos.z);
    // if 0 < t < 7
    //     v = t * 0.01
    //     ship.rotation.y += 26 * v ** 0.96 * Math.PI / 180
    //     ship.position.x += -6 * v
    //     ship.position.z +=  12 * v ** 1.3 
    return renderer.render(scene, camera);
  };

而且 t += 0.1 太快了。所以，我把它设为 0.001。如果您要为 Object3D 或网格指定位置。使用，

mesh.position.set(x, y, z);
object.position.set(newPos.x, newPos.y, newPos.z);

不仅是职位。轮换也是如此。

这样更健康。

如何使用 Three.js 曲线作为移动网格的路径

How to use a Three.js curve as a path for moving a mesh along at

javascript

coffeescript

three.js