ThreeJSにキューブがあり、ボタンを押すたびに時計回りに90度回転したいと思います。私は基本的な要点を持っていると思う：Three.Animationインスタンスを作成し、それをキューブにバインドし、正しいボタンを押すたびにアニメーションを開始させる。しかし、ThreeJSのAPIを理解するのは難しいです。なぜなら、そのメソッドの例は含まれていないようです。ThreeJS Rotation Animation
これはTHREE.jsのアニメーションコンストラクタです：（root、data、interpolationType、JITCompile）フィールドに何が入るのか分かりません。私はルートが私の立方体を置く場所であろうと推測していますが、残りの部分はどうですか？
私はいつでもアニメーションが発生するようにanimation.play()と呼ぶことができます。そして、animationHandlerはどのように機能しますか？
オブジェクトを時計回りに90度回転させるためには、TWEENクラスを使用します。私は（。骨/皮は、/ etcをモーフィングのような）Tweenクラスを使用するには
Animationクラスは重いもののために便利だと思う3つの基本的な手順があります。
<script src="js/Tween.js"></script>を）クラスを含めますnew TWEEN.Tween(cube.rotation).to({ y:Math.random()}, 1000).easing(TWEEN.Easing.Quadratic.EaseOut).start();）あなたが必要とするイベントのために、あなたのレンダリングループ内でトゥイーンをあなたのトゥイーンを追加します（TWEEN.update();）あなたが持っているを持つことができますcubes tween exampleをご覧ください。
私はでトゥイーンを持つように、デフォルトのキューブの例を変更した：あなたの助けを
<!doctype html>
<html lang="en">
<head>
<title>three.js canvas - geometry - cube</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
font-family: Monospace;
background-color: #f0f0f0;
margin: 0px;
overflow: hidden;
}
</style>
</head>
<body>
<script src="../build/Three.js"></script>
<script src="js/Tween.js"></script>
<script src="js/RequestAnimationFrame.js"></script>
<script src="js/Stats.js"></script>
<script>
var container, stats;
var camera, scene, renderer;
var cube, plane;
var windowHalfX = window.innerWidth/2;
var windowHalfY = window.innerHeight/2;
var rad90 = Math.PI * .5;
init();
animate();
function init() {
container = document.createElement('div');
document.body.appendChild(container);
var info = document.createElement('div');
info.style.position = 'absolute';
info.style.top = '10px';
info.style.width = '100%';
info.style.textAlign = 'center';
info.innerHTML = 'click to tween';
container.appendChild(info);
camera = new THREE.PerspectiveCamera(70, window.innerWidth/window.innerHeight, 1, 1000);
camera.position.y = 150;
camera.position.z = 500;
scene = new THREE.Scene();
// Cube
var materials = [];
for (var i = 0; i < 6; i ++) {
materials.push([ new THREE.MeshBasicMaterial({ color: Math.random() * 0xffffff }) ]);
}
cube = new THREE.Mesh(new THREE.CubeGeometry(200, 200, 200, 1, 1, 1, materials), new THREE.MeshFaceMaterial());
cube.position.y = 150;
cube.overdraw = true;
scene.add(cube);
// Plane
plane = new THREE.Mesh(new THREE.PlaneGeometry(200, 200), new THREE.MeshBasicMaterial({ color: 0xe0e0e0 }));
plane.rotation.x = - 90 * (Math.PI/180);
plane.overdraw = true;
scene.add(plane);
renderer = new THREE.CanvasRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild(stats.domElement);
document.addEventListener('mousedown', onDocumentMouseDown, false);
}
//
function onDocumentMouseDown(event) {
event.preventDefault();
new TWEEN.Tween(cube.rotation).to({ y: cube.rotation.y + rad90}, 1000).easing(TWEEN.Easing.Quadratic.EaseOut).start();
new TWEEN.Tween(plane.rotation).to({ z: plane.rotation.z + rad90}, 1000).easing(TWEEN.Easing.Quadratic.EaseOut).start();
console.log("click");
}
//
function animate() {
requestAnimationFrame(animate);
render();
stats.update();
}
function render() {
TWEEN.update();
renderer.render(scene, camera);
}
</script>
</body>
</html>
感謝を！私たちはTween.jsを使用して終了し、すべてがうまくいった。 –
私は間違っていますか？これはオイラー角を補間しますか？クォータニオンを補間したいのですが？特に、クォータニオン間の*球形補間が一般的です。それを達成するためにこのコードを適合させる簡単な方法はありますか？あるいは、トゥイーンの開始時から（可能ならば）経過した時間を取得し、手動で適切な時刻に 'quaternion.slerp'を呼び出すことができますか？ – Bakuriu
@Bakuriu元の質問でオイラー回転に関する問題を取り上げなかった。私は、この問題が正しいクラスを使用してthree.jsライブラリでプロパティ（この場合は回転）をアニメーション化することを理解していました。主に、シンタックス/ APIの質問は線形代数よりも重要です。あなたは正しいです、オイラー角は一般に3D空間での回転のために避けなければなりませんが、この単純な例のシナリオでは、実際には違いはありません。 Tweenクラスを使用して 'Object3D'の' quaternion'プロパティをアニメーション化できるはずです。トゥイーンを開始する前に 'useQuaternion'をtrueに設定してください –