CODEWITHSUNDEEP
javascriptthree.js
AstroMiss
AstroMiss

Reputation: 3

How can I rotate a sphere around a cube in Three.js

Ive seen different options to rotate objects but I dont know how to apply them. I am very new to javascript. I created the cube and the sphere and managed to make the sphere rotate around its own axis but I need it to rotate around the cube Any help is welcome. This is my code:

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

Upvotes: 0

Views: 1493

Answers (2)

Brakebein
Brakebein

Reputation: 2237

In this case I would suggest to use an Object3D as a container for your sphere. Then place this container at the position/center of the cube and rotate it.

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

Upvotes: 1

AstroMiss
AstroMiss

Reputation: 3

I found a way to make it work. I used the rotateAboutWorldAxis function and it looks like this:

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

and in the render function put:

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

Upvotes: 0

Related Questions