我使用 Three.js 将简单的 3D 对象从 blender 加载到网页。我想在时间 TIME 内(在本例中仅“y”轴)将该对象从旋转 vectorSTART 旋转到 vectorEND。我在那里找到了解决方案ThreeJS Rotation Animation但出现错误 TypeError: _easingFunction is not a function (当我单击屏幕时)。我的代码是:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My first three.js app</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100%; display: block; }
</style>
</head>
<body>
<script src="https://threejs.org/build/three.js"></script>
<script src="Tween.js"></script>
<script>
var object;
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
camera.position.z = 5;
camera.position.y = 0;
camera.position.x = 0;
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var loader = new THREE.ObjectLoader();
document.addEventListener('mousedown', onDocumentMouseDown, false);
loader.load("model(1).json", function ( obj ) {
object = obj;
scene.add( object );
render();
},
function ( xhr ) {
console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
},
function ( xhr ) {
console.error( 'An error happened' );
}
);
var render = function () {
requestAnimationFrame(render);
renderer.render(scene, camera);
};
function onDocumentMouseDown(){
animate();
}
function animate(){
//object.rotation.y += 10 *(Math.PI / 180);
new TWEEN.Tween( object.rotation ).to( { y: object.rotation.y + (Math.PI * .18)}, 100 ).easing( TWEEN.Easing.Quadratic.EaseOut).start();
TWEEN.update();
console.log("im here");
}
render();
</script>
</body>
</html>
我不知道为什么它不起作用。不过，我不必使用 TWEEN，如果您知道任何不同的解决方案，那就太好了。
最佳答案
尚未对此进行测试，但 IIRC Tween.JS 的 API 需要“from”和“to”中的可比较值 - 尝试:
new TWEEN.Tween( object.rotation.y ).to( {object.rotation.y + (Math.PI * .18)}, 100 ).easing( TWEEN.Easing.Quadratic.EaseOut).start();
关于javascript - Web 上的旋转对象，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43298281/