Javascript Three.js将球体旋转到任意位置_Javascript_Web_3d_Three.js

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

javascript web 3d three.js

Javascript Three.js将球体旋转到任意位置,javascript,web,3d,three.js,Javascript,Web,3d,Three.js,使用Three.js，我有一个球体和几个附在火山点上的精灵。我可以旋转球体，精灵保持在它们的位置，因为它们是作为一个组添加到球体中的现在我想用一个按钮把地球旋转到任意位置。我该怎么做？例如，如果我想旋转到的点位于地球仪的后部，我如何旋转地球仪使其位于前部这段代码基本上就是我现在拥有的。我添加精灵的主网格 <html> <head></head> <body> <script src="three.min.js"></sc

使用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>

这就是我的方法：

//由于精灵是网格的子对象，因此获得世界位置 var spritePos=new THREE.Vector3.setfromtrixpositionsprite.matrixWorld； //获取用于计算角度的向量 var cv3=新的3.Vector3.subVectorscamera.position，mesh.position； var sv3=新的三个向量3.subvectorspritepos，mesh.position； //我们只想绕y轴旋转，所以只有x-z平面上的角度是相关的 var cv2=新的三个向量2Cv3.x，cv3.z； var sv2=新的三个向量2sv3.x，sv3.z； //规范化向量正常化； sv2.1标准化； //点积 var dot=cv2.dotsv2； //精灵和相机之间的角度（弧度） //cosinus是从1到-1，所以我们需要对它进行归一化和反转，并将其与PI相乘，以获得合适的角度变量角度=1-点+1/2*Math.PI； //sprite是从相机左移还是从相机右移？ ifspritePos.x<0 网格旋转+=角度；其他的网格旋转-=角度；现在，我做了一个决定

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

还请记住，如果摄影机或网格位于场景中的其他位置，则确定精灵是从摄影机向左还是从摄影机向右比较困难

dot产品后的说明：

点积给出两个向量的夹角为余弦。所以我们得到一个介于-1和1之间的值。e、 g.cos0=1 cosPI/2=0 cosPI=-1，此时为0°=1和180°=1

我们希望获得旋转网格的角度（以弧度为单位）。首先我们将其标准化为点+1/2，0°=1和180°=0

然后将其反转为0°=0，180°=1，并与PI 0°=0，180°=PI相乘

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

我不知道它的解释是否足够，或者它是否完全可以理解？

您能展示一下您已经拥有的代码吗？这将有助于我理解dot产品部分。我在原来的帖子中添加了一个图表，希望我理解正确。您的代码似乎每次都给我一个固定的旋转，而不是每次都绕到正确的点。你能澄清一下dot product的情况吗？我猜这是两个向量之间的角度，然后旋转这个量？是的，你的图表是对的。我更新了我的答案。我必须纠正一些事情，比如setPositionFromMatrix到setFromMatrixPosition和>到