Question

我试图将相机移动从一个地方到另一个地方，但我似乎无法解决这个问题。我使用Chrome实验中的Globe并在其上添加了此功能

  function changeCountry(lat,lng){
var phi = (90 - lat) * Math.PI / 180;
var theta = (180 - lng) * Math.PI / 180;
var from = {
    x : camera.position.x,
    y : camera.position.y,
    z : distance
  };

  var to = {
    posX : 200 * Math.sin(phi) * Math.cos(theta),
    posY : 200 * Math.cos(phi),
    posZ : distance
  };
  var tween = new TWEEN.Tween(from)
  .to(to,2000)
  .easing(TWEEN.Easing.Linear.None)
  .onUpdate(function () {
    camera.position.set(this.x, this.y, this.z);
    camera.lookAt(new THREE.Vector3(0,0,0));
  })
  .onComplete(function () {
    camera.lookAt(new THREE.Vector3(0,0,0));
  })
  .start();
  console.log(to,from,lat,lng);}

我已经控制台打印了这些值，这一切都非常适合获得lat＆amp; long并将它们转换为正确的值，x，y，z值也很棒，但它根本不会移动相机。在控制台我得到这个错误： Uncaught TypeError: n is not a function， 90Tween.js:4 Uncaught TypeError: is not a function＆安培; 419Tween.js:4 Uncaught TypeError: is not a function 最后无休止地计算++。

如果有人能帮助我解决问题，那将会得到很多帮助。

编辑：我修复了错误，将.easing(TWEEN.Easing.Linear.None)替换为 .easing(TWEEN.Easing.Linear.EaseNone)。然而，相机会进行不规则的移动 - 始终相同，然后在动画之前返回到正常位置。在我的render（）函数中使用TWEEN.update()时，我会得到不同的结果，但它们都不能正常工作。 render（）函数是这样的：

zoom(curZoomSpeed);

rotation.x += (target.x - rotation.x) * 0.1;
rotation.y += (target.y - rotation.y) * 0.1;


distance += (distanceTarget - distance) * 0.3;

camera.position.x = distance * Math.sin(rotation.x) * Math.cos(rotation.y);
camera.position.y = distance * Math.sin(rotation.y);
camera.position.z = distance * Math.cos(rotation.x) * Math.cos(rotation.y);

camera.lookAt(mesh.position);

TWEEN.update();
renderer.render(scene, camera);

Answer 1

你在做什么看起来有点奇怪。对我来说，它运作得很好，看起来更简单：

var newpos = new THREE.Vector3( /* new values */ );
new TWEEN.Tween(camera.position)
    .to(newpos, 500)
    .easing(TWEEN.Easing.Quadratic.InOut)
    .start();

render()功能的更新只是

TWEEN.update();
camera.lookAt(mesh.position);

唯一的问题是，如果新位置位于地球的另一侧，相机将会穿过看起来不错的地球。因此，将相机放入Object3D并补间此对象的旋转可能会更好。无论如何，你正在使用lat和lng，所以一般来说角度应该更容易。

camera.position.set(0,0,distance);
camera.lookAt(new THREE.Vector3(0,0,0));
var camObject = new THREE.Object3D();
camObject.add(camera); 

// camera.lookAt shouldn't be needed anymore within render()

...

var phi = (90 - lat) * Math.PI / 180;
var theta = (180 - lng) * Math.PI / 180;

var euler = new THREE.Euler(phi, theta, 0, 'XYZ');
var newq = new THREE.Quaternion().setFromEuler(euler);

new TWEEN.Tween(camObject.quaternion)
    .to(newq, 500)
    .easing(TWEEN.Easing.Quadratic.InOut)
    .start();

我没有测试这个想法，可能有些不对劲（例如，定义新角度的方式和顺序）。我只想提一些提示。

Three.js全球相机补间按钮点击

1 个答案: