Wie kann ich in Three.js

I ve seen different options to rotate objects but I don eine Kugel um einen Würfel drehen? T weiß, wie man sie anwendet. Ich bin sehr neu in Javascript. Ich habe den Würfel und die Kugel erschaffen und es geschafft, die Kugel um ihre eigene Achse rotieren zu lassen, aber ich muss sie um den Würfel drehen. Jede Hilfe ist willkommen. Dies ist mein Code:Wie kann ich in 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>

Quelle

2016-10-14 AstroMiss

In diesem Fall würde ich vorschlagen, ein Object3D als Container für Ihre Kugel zu verwenden. Platziere diesen Behälter dann an der Position/Mitte des Würfels und drehe ihn.

... 
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); 
};

Quelle

2016-10-14 20:04:17 Brakebein

ich den Code kopiert und es scheint gut und einfach zu sein, aber es doesn 't Arbeit. Der Fehler, den ich bekomme, ist "SphereContainer ist undefined" obwohl es definiert ist. – AstroMiss

Ich sehe nur, dass ich "neu" bei der Definition von sphereContainer vergessen habe. Also habe ich es auf 'new THREE.Object3D()' bearbeitet. Ich hoffe es klappt jetzt. Ihre Lösung scheint für jeden Frame viel mehr zu berechnen. – Brakebein

Ich habe einen Weg gefunden, damit es funktioniert. Ich benutzte die rotateAboutWorldAxis Funktion und es sieht wie folgt aus:

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

und in der Render-Funktion setzen:

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

Quelle

2016-10-15 10:27:42 AstroMiss

Wie kann ich in Three.js

Antwort

Verwandte Themen