Three.js 将球体旋转到任意位置答案

【问题标题】：Three.js Rotate sphere to arbitrary positionThree.js 将球体旋转到任意位置
【发布时间】：2015-11-04 04:53:11
【问题描述】：

使用 Three.js，我有一个球体（地球）和几个附在火山点上的精灵。我可以旋转（旋转）地球，并且精灵保持在它们的位置，因为它们作为一个组添加到球体中。

现在我希望能够使用按钮将地球旋转到任意位置。我怎样才能做到这一点？例如，如果我想旋转到的点在地球的后面，我怎样才能旋转地球，让它在前面？

这段代码基本上就是我现在所拥有的。我添加精灵的主网格。

 <html>
<head></head>
<body>


<script src="three.min.js"></script>

<script>

  var scene, camera, renderer;
  var geometry, material, mesh;

  init();
  animate();

  function init() {

      scene = new THREE.Scene();
      camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
      camera.position.z = 1000;

      material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: false } );

      geometry = new THREE.SphereGeometry( 159, 32, 32 );
      mesh = new THREE.Mesh( geometry, material );
      scene.add( mesh );

      var map = THREE.ImageUtils.loadTexture( "sprite1.png" );
      var material2 = new THREE.SpriteMaterial( { map:map, color:0x00ff00 } );
      var sprite1 = new THREE.Sprite( material2 );
      sprite1.position.set(100,100,100);
      sprite1.scale.set(40,40,40);
      mesh.add(sprite1);

      var sprite2 = new THREE.Sprite( material2);
      sprite2.position.set(-100,-100,-100);
      sprite2.scale.set(30,30,30);
      mesh.add(sprite2);

      var sprite3 = new THREE.Sprite(material2);
      sprite3.position.set(100,-100,100);
      sprite3.scale.set(20,20,20);
      mesh.add(sprite3);

      renderer = new THREE.WebGLRenderer({alpha:true});
      renderer.setSize( window.innerWidth, window.innerHeight );

      document.body.appendChild( renderer.domElement );

  }

  function animate() {
      requestAnimationFrame( animate );
      mesh.rotation.y += 0.01;
      renderer.render( scene, camera );
  }

 </script>
</body>
</html>

Diagram example

【问题讨论】：

您能展示一下您已经拥有的代码吗？这会有所帮助

标签： javascript web 3d three.js

【解决方案1】：

这将是我的方法：

// as sprite is a child of mesh get world position
var spritePos = new THREE.Vector3().setFromMatrixPosition(sprite.matrixWorld);

// get the vectors for calculating angle
var cv3 = new THREE.Vector3().subVectors(camera.position, mesh.position);
var sv3 = new THREE.Vector3().subVectors(spritePos, mesh.position);

// we only want to rotate around y-axis, so only the angle in x-z-plane is relevant
var cv2 = new THREE.Vector2(cv3.x, cv3.z);
var sv2 = new THREE.Vector2(sv3.x, sv3.z);

// normalize Vectors
cv2.normalize();
sv2.normalize();

// dot product
var dot = cv2.dot(sv2);

// angle to between sprite and camera in radians
// cosinus is from 1 to -1, so we need to normalize and invert it and multiply it with PI to get proper angle
var angle = (1 - (dot + 1) / 2) * Math.PI;

// is sprite left or right from camera?
if(spritePos.x < 0)
  mesh.rotation += angle;
else
  mesh.rotation -= angle;

现在，我发了一个Plunker。

它似乎有点不准确，因为它总是向左或向右旋转到最前面的位置。可能是因为某些特定角度附近的余弦。

另外请记住，如果相机或网格在场景中的其他位置，那么确定精灵是在相机的左侧还是右侧会有点困难。

点积后的解释：

点积将两个向量的夹角表示为余弦。所以我们得到一个介于 -1 和 1 之间的值。例如cos(0) = 1 cos(PI/2) = 0 cos(PI) = -1 所以现在是 0° = 1 和 180° = -1。

我们想要获得以弧度为单位的角度，以将网格旋转到位。所以首先我们将它标准化(dot + 1) / 2，所以 0° = 1 和 180° = 0。

然后将其反转 (0° = 0, 180° = 1) 并乘以 PI (0° = 0, 180° = PI)。

现在，我们有了旋转的角度，但我们不知道需要向左还是向右旋转，这就是为什么我检查精灵是从相机左侧还是右侧。

不知道是不是解释够了，还是完全可以理解？

【讨论】：

我理解到“点积”部分。我在原始帖子中添加了一个图表，希望我理解正确。您的代码似乎每次都给我一个固定的旋转，而不是每次都绕到正确的点。你能澄清一下“点积”发生了什么吗？我猜是两个向量之间的角度，然后旋转这个量？
是的，您的图表是正确的。我更新了我的答案。我不得不纠正一些事情，比如setPositionFromMatrix 到setFromMatrixPosition 和> 到<。我还做了一个 Plunker 作为现场演示和解释。