Как поворачивать сферу вокруг куба в Three.js

I ve seen different options to rotate objects but I don t умеет применять их. Я очень новичок в javascript. Я создал куб и сферу и сумел заставить сферу вращаться вокруг своей оси, но мне нужно, чтобы она вращалась вокруг куба. Любая помощь приветствуется. Это мой код:Как поворачивать сферу вокруг куба в 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

В этом случае я бы предложил использовать Object3D в качестве контейнера для вашей сферы. Затем поместите этот контейнер в положение/центр куба и поверните его.

... 
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

Я скопировал код и он, кажется, хорошо и просто, но это Безразлично 'работы. Ошибка, которую я получаю, это «sphereContainer undefined» , хотя он определен. – AstroMiss

Я просто вижу, что я забыл «новое» при определении сферыContainer. Поэтому я отредактировал его на '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

ответ

Смежные вопросы