Question

我正在尝试对Three.js块进行动画处理，以使其在动画结束时使用tween.js返回到其原始位置。

是否有办法使用tween.js 仅使用一个补间来实现这一目标？

我的工作如下所示：

var position = {x: -200, y: 150, width: 1, height: 1, depth: 1, rotx: -0.5, roty: 0.7, rotz: 0.9};
var target = {x: 200, y: -100, width: 0.4, height: 3, depth: 8, rotx: 0.3, roty: -0.4, rotz: -0.6};
var position2 = {x: -200, y: 150, width: 1, height: 1, depth: 1, rotx: -0.5, roty: 0.7, rotz: 0.9};

var mesh = new THREE.Mesh(
  new THREE.CubeGeometry(190, 45, 30),
  new THREE.MeshBasicMaterial({color: 0x444444}),
  0
);
mesh.position.set(position.x, position.y, 0);
mesh.rotation.set(position.rotx, position.roty, position.rotz);
scene.add(mesh);

var t1 = new TWEEN.Tween(position).to(target, 2000);
t1.onUpdate(function() {
  mesh.position.set(position.x, position.y, 0);
  mesh.scale.set(position.width, position.height, position.depth);
  mesh.rotation.set(position.rotx, position.roty, position.rotz);
});
t1.easing(TWEEN.Easing.Quadratic.Out);
t1.onComplete(function() {t2.start();});

var t2 = new TWEEN.Tween(target).to(position2, 2000);
t2.onUpdate(function() {
  mesh.position.set(target.x, target.y, 0);
  mesh.scale.set(target.width, target.height, target.depth);
  mesh.rotation.set(target.rotx, target.roty, target.rotz);
});
t2.easing(TWEEN.Easing.Quadratic.In);

t1.start();

我的动画功能中有补间更新：

function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
  mesh.__dirtyPosition = true;
  mesh.__dirtyRotation = true;
  TWEEN.update();
}
animate();

这是按我预期的那样工作，但是显然效率很低，并且很难解决。

任何人和所有帮助将不胜感激。

Answer 1

通过将FileNotFoundError属性重命名为x, y, z或width, height, depth，会使事情变得有些复杂。这仅意味着您在执行rotx, roty, rotz和scale.x = position.width时必须手动转换onUpdate这些属性。建议您保留rotation.x = position.rotx，以避免重复的工作。

x, y, z

最后，在// We set our start and target pos using the THREE.js "x, y, z" nomenclature var startPos = {x: -200, y: 150, z: 0}; var targetPos = {x: 200, y: -100, z: 0}; // Scale also is defined in "x, y, z" var startScale = {x: 1, y: 1, z: 1}; var targetScale = {x: 0.4, y: 3, z: 8}; // Rotation also has "x, y, z" degrees in Euler angles var startRot = {x: -0.5, y: 0.7, z: 0.9}; var targetRot = {x: 0.3, y: -0.4, z: -0.6}; // Standard mesh setup var mesh = new THREE.Mesh( new THREE.CubeGeometry(190, 45, 30), new THREE.MeshBasicMaterial({color: 0x444444}) ); mesh.position.copy(startPos); mesh.rotation.copy(startRot); scene.add(mesh); // Create shortcuts for shorter easing names var QuadOut = TWEEN.Easing.Quadratic.Out; var QuadIn = TWEEN.Easing.Quadratic.In; // Create one tween for position // Notice that you can chain the animation // back to startPos by doing double ".to().to()"" var t1 = new TWEEN.Tween(mesh.position) .to(targetPos, 2000, QuadOut) .to(startPos, 2000, QuadIn); // Second, we tween the mesh's rotation var t2 = new TWEEN.Tween(mesh.rotation) .to(targetRot, 2000, QuadOut) .to(startRot, 2000, QuadIn); // Third, we tween the mesh's scale var t3 = new TWEEN.Tween(mesh.scale) .to(targetScale, 2000, QuadOut) .to(startScale, 2000, QuadIn); t1.start(); t2.start(); t3.start();期间，您不再需要更改animate()或其他任何内容，因为补间将直接更新网格的属性。

__dirtyPosition

反转Tween.js动画的效果

1 个答案: