时间戳

首页 > 解决方案 > Three.js 旋转立方体以在前视图中显示选定的一侧？

javascript - Three.js 旋转立方体以在前视图中显示选定的一侧？

问题描述

我有一个用three.js 制作的旋转框，我想停止（并重新启动）动画以正面显示对象面。

我想显示一个流畅的动画，直到立方体处于正确的位置。我在 StackOverflow 上看到了几个示例，但我无法在我的示例中复制它。

示例：JSFiddle 示例

 scene = new THREE.Scene();

camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 10000);
camera.position.z = 500;

scene.add(camera);

geometry = new THREE.CubeGeometry(200, 200, 200);
material = new THREE.MeshNormalMaterial();

mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

renderer = new THREE.CanvasRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);

document.body.appendChild(renderer.domElement);

这里的动画

function render() {

mesh.rotation.x += 0.01;
mesh.rotation.z += 0.01;
mesh.rotation.y += 0.02;

renderer.render(scene, camera);
}

保持简单流畅的最佳方法是什么？

标签： javascriptthree.js

解决方案

解决这个问题的一种方法是使用Quaternion.rotateTowards()（一种类似于 Unity 的Quaternion.RotateTowards()的方法）。

首先，您必须为您的盒子定义一个目标旋转。这可以这样做：

var targetQuaternion = new THREE.Quaternion();
targetQuaternion.setFromEuler( new THREE.Euler( 0, Math.PI, 0 ) );

在下一步中，您将Quaternion.rotateTowards()在动画循环中使用，如下所示：

if ( ! mesh.quaternion.equals( targetQuaternion ) ) {

    var step = speed * delta;
    mesh.quaternion.rotateTowards( targetQuaternion, step );

}

step表示以弧度/秒为单位的角位移。在以下实时示例中，该值设置为Math.PI。这意味着盒子可以每秒旋转 180 度。

所以本质上，您可以为立方体的所有侧面定义一个目标旋转，然后使用Quaternion.rotateTowards()它朝它旋转。

https://jsfiddle.net/0eutrjqs/

three.js R113

推荐阅读