Three.jsでキューブの周りの球をどのように回転させることができますか

I ve seen different options to rotate objects but I donこれを適用する方法はわかります。私は非常にjavascriptに新しいです。私はキューブと球体を作成し、球体をそれ自身の軸の周りで回転させるように管理しましたが、キューブの周りを回転する必要があります。助けてください。これは私のコードです：私はあなたの球のコンテナとしてObject3Dを使用することをお勧めこの場合Three.jsでキューブの周りの球をどのように回転させることができますか

<html> 
    <head> 
     <title>My first Three.js app</title> 
     <style> 
      body { margin: 0; } 
      canvas { width: 100%; height: 100% } 
     </style> 
    </head> 
    <body> 
     <script src="js/three.js"></script> 
     <script> 
      var scene = new THREE.Scene(); 
      var camera = new THREE.PerspectiveCamera(100, window.innerWidth/window.innerHeight, 0.1, 1000); 
      var renderer = new THREE.WebGLRenderer(); 
      renderer.setSize(window.innerWidth, window.innerHeight); 
      document.body.appendChild(renderer.domElement); 

      camera.position.z = 25; 

      var loader = new THREE.TextureLoader(); 
      var texture = loader.load('crate.jpg'); 
      var geometry = new THREE.BoxGeometry(7, 7, 7); 
      var material = new THREE.MeshBasicMaterial({map: texture}); 
      var cube = new THREE.Mesh(geometry, material); 

      cube.rotation.x += 0.6; 
      cube.rotation.y += 0.6; 

      scene.add(cube); 

      var loader = new THREE.TextureLoader(); 
      var texture = loader.load('earth.jpg'); 
      var geometry = new THREE.SphereGeometry(1, 50, 50); 
      var material = new THREE.MeshBasicMaterial({map: texture}); 
      var sphere = new THREE.Mesh(geometry, material); 

      scene.add(sphere); 

      var render = function() { 
       requestAnimationFrame(render); 
       sphere.position.set(6, 0, 15); 
       sphere.rotation.y += 0.01; 
       renderer.render(scene, camera); 
      }; 

      render(); 
     </script> 
    </body> 
</html>

出典

2016-10-14 AstroMiss

。次に、この容器を立方体の位置/中心に置き、回転させます。

... 
var cube = new THREE.Mesh(geometry, material); 

cube.rotation.x += 0.6; 
cube.rotation.y += 0.6; 

scene.add(cube); 

... 
var sphere = new THREE.Mesh(geometry, material); 

sphere.position.set(0,0,15); // offset from center 

var sphereContainer = new THREE.Object3D(); 
sphereContainer.add(sphere); 

sphereContainer.position.copy(cube.position); // optional, in case you've set the position of the cube 

scene.add(sphereContainer); 

var render = function() { 
    requestAnimationFrame(render); 

    sphere.rotation.y += 0.01; // rotate around its own axis 
    sphereContainer.rotation.y += 0.01; // rotate around cube 

    renderer.render(scene, camera); 
};

出典

2016-10-14 20:04:17 Brakebein

私は、コードをコピーして、良いと簡単なことのようですが、それは仕事をdoesnの 't。私が得ているエラーは "sphereContainerは定義されていません" が定義されています。 – AstroMiss

sphereContainerを定義するときに 'new'を忘れてしまったことが分かります。だから私はそれを '新しいTHREE.Object3D（）'に編集しました。私はそれが今働くことを望む。あなたのソリューションは、フレームごとにもっと多くの計算のように思えます。 – Brakebein

私はそれを動作させる方法を見つけました。私はrotateAboutWorldAxis機能を使用し、それは次のようになります。

... 
sphere.position.set(0,0,15); // offset from center 

function rotateAboutWorldAxis(object, axis, angle) { 
      var rotationMatrix = new THREE.Matrix4(); 
      rotationMatrix.makeRotationAxis(axis.normalize(), angle); 
      var currentPos = new THREE.Vector4(object.position.x, object.position.y, object.position.z, 1.5); 
      var newPos = currentPos.applyMatrix4(rotationMatrix); 
      object.position.x = newPos.x; 
      object.position.y = newPos.y; 
      object.position.z = newPos.z; 
      }

とレンダリング機能プットに：

var yAxis = new THREE.Vector3(0,50,0); 
rotateAboutWorldAxis(sphere,yAxis,Math.PI/180);

出典

2016-10-15 10:27:42 AstroMiss

Three.jsでキューブの周りの球をどのように回転させることができますか

答えて

関連する問題