无法补间 ThreeJS 相机旋转
Unable to Tween ThreeJS Camera Rotation
我正在尝试使用 TweenJS 为 ThreeJS 相机旋转设置动画,补间 camera.position 没问题,但出于某种原因 camera.rotation 拒绝更改?
我使用官方 ThreeJS 文档中的代码设置了一个最小示例:https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene
基本上归结为它如何正常工作:
new TWEEN.Tween(camera.position).to({x: newPos.x, y: newPos.y, z: newPos.z}).start()
虽然这根本不起作用:
new TWEEN.Tween(camera.rotation).to({x: newRot.x, y: newRot.y, z: newRot.z}).start()
我认为代码应该很清楚:
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
var animate = function () {
requestAnimationFrame( animate );
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render( scene, camera );
TWEEN.update(); // NOTE: I added this too
};
animate();
// NOTE: I added this:
// In a few seconds, tween the camera rotation
setTimeout(() => {
const newRot = {x: 1, y: 1, z: 1};
console.log('Changing camera rotation from:');
console.log(camera.rotation);
console.log('to:');
console.log(newRot);
new TWEEN.Tween(camera.rotation).to({x: newRot.x, y: newRot.y, z: newRot.z}).start().onComplete(() => {
// Note that it doesn't change at all?
console.log('Camera rotation changed:');
console.log(camera.rotation);
// Manually setting the rotation works fine??
console.log('Manually changing camera rotation:');
camera.rotation.x = newRot.x;
camera.rotation.y = newRot.y;
camera.rotation.z = newRot.z;
});
// Tweening the position is no problem??
const newPos = {x: 0, y: 0, z: 2};
new TWEEN.Tween(camera.position).to({x: newPos.x, y: newPos.y, z: newPos.z}).start()
}, 5000);
body { margin: 0; }
canvas { width: 100%; height: 100% }
<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/16.3.5/Tween.min.js"></script>
<script src="https://threejs.org/build/three.js"></script>
所以出于某种原因,我必须做的是解决这个问题,而不是直接补间 camera.rotation
,我创建了一个临时对象 oldRot
,补间了它,然后 onUpdate
将 camera.rotation
设置为 oldRot
。
所以,而不是这个:
const newRot = {x: 1, y: 1, z: 1};
new TWEEN.Tween(camera.rotation).to({x: newRot.x, y: newRot.y, z: newRot.z}).start();
我现在有这个:
const newRot = {x: 1, y: 1, z: 1};
const oldRot = {x: camera.rotation.x, y: camera.rotation.y, z: camera.rotation.z};
new TWEEN.Tween(oldRot).to(newRot).start().onUpdate(() => {
camera.rotation.x = oldRot.x;
camera.rotation.y = oldRot.y;
camera.rotation.z = oldRot.z;
});
无论出于何种原因,这都有效。很想知道 为什么 如果有人知道的话。
我正在尝试使用 TweenJS 为 ThreeJS 相机旋转设置动画,补间 camera.position 没问题,但出于某种原因 camera.rotation 拒绝更改?
我使用官方 ThreeJS 文档中的代码设置了一个最小示例:https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene
基本上归结为它如何正常工作:
new TWEEN.Tween(camera.position).to({x: newPos.x, y: newPos.y, z: newPos.z}).start()
虽然这根本不起作用:
new TWEEN.Tween(camera.rotation).to({x: newRot.x, y: newRot.y, z: newRot.z}).start()
我认为代码应该很清楚:
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
var animate = function () {
requestAnimationFrame( animate );
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render( scene, camera );
TWEEN.update(); // NOTE: I added this too
};
animate();
// NOTE: I added this:
// In a few seconds, tween the camera rotation
setTimeout(() => {
const newRot = {x: 1, y: 1, z: 1};
console.log('Changing camera rotation from:');
console.log(camera.rotation);
console.log('to:');
console.log(newRot);
new TWEEN.Tween(camera.rotation).to({x: newRot.x, y: newRot.y, z: newRot.z}).start().onComplete(() => {
// Note that it doesn't change at all?
console.log('Camera rotation changed:');
console.log(camera.rotation);
// Manually setting the rotation works fine??
console.log('Manually changing camera rotation:');
camera.rotation.x = newRot.x;
camera.rotation.y = newRot.y;
camera.rotation.z = newRot.z;
});
// Tweening the position is no problem??
const newPos = {x: 0, y: 0, z: 2};
new TWEEN.Tween(camera.position).to({x: newPos.x, y: newPos.y, z: newPos.z}).start()
}, 5000);
body { margin: 0; }
canvas { width: 100%; height: 100% }
<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/16.3.5/Tween.min.js"></script>
<script src="https://threejs.org/build/three.js"></script>
所以出于某种原因,我必须做的是解决这个问题,而不是直接补间 camera.rotation
,我创建了一个临时对象 oldRot
,补间了它,然后 onUpdate
将 camera.rotation
设置为 oldRot
。
所以,而不是这个:
const newRot = {x: 1, y: 1, z: 1};
new TWEEN.Tween(camera.rotation).to({x: newRot.x, y: newRot.y, z: newRot.z}).start();
我现在有这个:
const newRot = {x: 1, y: 1, z: 1};
const oldRot = {x: camera.rotation.x, y: camera.rotation.y, z: camera.rotation.z};
new TWEEN.Tween(oldRot).to(newRot).start().onUpdate(() => {
camera.rotation.x = oldRot.x;
camera.rotation.y = oldRot.y;
camera.rotation.z = oldRot.z;
});
无论出于何种原因,这都有效。很想知道 为什么 如果有人知道的话。