Three.js에서 큐브 주위의 구를 어떻게 회전시킬 수 있습니까?

I ve seen different options to rotate objects but I don 어떻게 적용하는지 알고 있습니다. 나는 아주 새로운 자바 스크립트입니다. 큐브와 구를 생성하고 구가 자체 축을 중심으로 회전하도록 만들었지 만 큐브를 중심으로 회전해야합니다. 어떤 도움도 환영합니다. 이 내 코드입니다 : 나는 당신의 영역에 대한 컨테이너와 같은 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

내가 코드를 복사하고 좋은 간단한 것 같다하지만 작업 어쩌려 구'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에서 큐브 주위의 구를 어떻게 회전시킬 수 있습니까?

답변

관련 문제