旋转对象以匹配轨迹

Rotate object to match trajectory

本文关键字：轨迹 对象 旋转      更新时间：2023-09-26

我正在学习向量以及如何在 ThreeJS 中使用它们移动对象。作为一个简单的实验，我使用速度和任意重力矢量发射一个盒子。

我还在尝试定位对象，使其与它所遵循的曲线路径相匹配，看起来它开始正确，但在中途后开始回头。

此外，我一直在学习的示例不是在JS中，它们执行以下操作：

position = position + velocity * delta;
velocity = velocity + gravity * delta;

但是你不能在 JS 中做同样的事情，所以我一直在乘以标量，我在这里走在正确的轨道上吗？

这是我的渲染函数：

function render(){
    var delta = clock.getDelta();
    velocity.add(velocity.clone().multiplyScalar(delta));
    velocity.add(gravity.clone().multiplyScalar(delta));
    box.position.add(velocity);
    var theta = velocity.angleTo(z);
    box.rotation.x = (theta);
    requestAnimationFrame(render);
    renderer.render(scene, camera);
}

更新：这是我最终根据WaclawJasper答案JSFIDDLE演示所做的

function render(){
    var delta = clock.getDelta();
    velocity.addScaledVector(gravity, delta);
    position.add(velocity);
    axis.crossVectors(up, velocity.clone().normalize()).normalize();
    radians = Math.acos(up.dot(velocity.clone().normalize()));
    box.quaternion.setFromAxisAngle(axis, radians);
    box.position.set(position.x, position.y, position.z);
    requestAnimationFrame(render);
    renderer.render(scene, camera);
}

JS不支持运算符重载position = position + velocity * delta但基本上意味着将增量乘以速度添加到位置。在其他语言中，操作可以根据每个参数的类型具有不同的含义。在这里，由于 delta 是一个数字，速度是 vec3，这意味着缩放矢量。幸运的是，ThreeJS确实为您提供了addScaledVector。

至于旋转，最简单的方法是改变方向，使模型面向的方向等于其速度。这样做的功能是 matrix4.lookAt . matrix4.lookAt(v3(0,0,0),velocity, UP)应该为您提供正确的旋转矩阵，您所要做的就是将其应用于模型。

相关文章：