Three.js - rotate sphere around a point while keeping tilted axis of sphere fixed

Question

To simulate the sphere rotate around some point and its own axis at the same time, I created a so-called pivot, a Object3D, and added the sphere as its child, and had them both rotate around their own axes. This is an idea I got from somewhere in the Web.

However, seeing as the sphere represents the Earth and the Earth has a fixed axial tilt, this approach turned out to be flawed. The axial tilt just changed based on the rotation around the pivot.

I made some drawings to visualize the problem:

WRONG:

CORRECT:

This is the code I use:

index.php

<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <title></title>
        <?php include_once ('php/includes.php'); ?>
    </head>
    <body>
        <section id="container"></section>
        <script>
        $(document).ready(function () {
            new Space();
        });
        </script>
    </body>
</html>

includes.php

<script type="text/javascript" src="js/libs/jquery/jquery.js" ></script>

<script type="text/javascript" src="js/libs/three/three.js" ></script>
<script type="text/javascript" src="js/libs/orbitcontrols/orbitcontrols.js" ></script>

<script type="text/javascript" src="js/shape/Sphere.js" ></script>
<script type="text/javascript" src="js/shape/Plane.js" ></script>
<script type="text/javascript" src="js/Space.js" ></script>

Space.js

var Space = function() {
    this.init();
    this.animate();

    Space.instance = this;
};

Space.instance;

Space.prototype.getInstance = function() {
    return Space.instance;
};

Space.prototype.init = function() {
    this.scene = new THREE.Scene();

    this.width = window.innerWidth;
    this.height = window.innerHeight;

    this.renderer = new THREE.WebGLRenderer({antialias:true});
    this.renderer.setSize(this.width, this.height);
    this.renderer.setClearColor(0x000000);

    this.camera = new THREE.PerspectiveCamera(45, this.width/this.height, 0.1, 10000);
    this.camera.position.set(0, 30, 40);
    this.scene.add(this.camera);

    //this.light = new THREE.PointLight();
    //this.light.position.set(0, 0, 0);
    //this.scene.add(this.light);

    this.pivot = new THREE.Object3D();
    this.scene.add(this.pivot);

    var sphereGeometry = new THREE.SphereGeometry(5, 32, 32);
    var sphereMaterial = new THREE.MeshBasicMaterial();
    sphereMaterial.wireframe = true;
    this.sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
    this.sphere.position.x = 10;
    this.sphere.quaternion.setFromAxisAngle(new THREE.Vector3(0, 0, 1), 23.5*Math.PI/180);
    this.pivot.add(this.sphere);

    var planeGeometry = new THREE.PlaneGeometry(50, 50, 100, 100);
    var planeMaterial = new THREE.MeshBasicMaterial();
    planeMaterial.wireframe = true;
    this.plane = new THREE.Mesh(planeGeometry, planeMaterial);
    this.plane.rotateOnAxis(new THREE.Vector3(0, 1, 1).normalize(), Math.PI);
    this.plane.position.y = -10;
    this.scene.add(this.plane);

    this.axisHelper = new THREE.AxisHelper(5);
    this.scene.add(this.axisHelper);

    this.controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);

    $('#container').append(this.renderer.domElement);
    window.addEventListener('resize', this.resize());
};

Space.prototype.resize = function() {
    this.width = window.innerWidth;
    this.height = window.innerHeight;

    this.renderer.setSize(this.width, this.height);
    this.camera.aspect = this.width/this.height;
    this.camera.updateProjectionMatrix();
};

Space.prototype.animate = function() {
    window.requestAnimationFrame(this.animate.bind(this));

    this.pivot.rotation.y += 0.5*(Math.PI/180);

    this.renderer.render(this.scene, this.camera);
    this.controls.update();
};

How to solve this?

prisoner849 prisoner849 · Accepted Answer · 2016-11-09T11:30:17

As an option, add a sphere (earth, for example) with tilted axis to a THREE.Group() object (earth_container), then set lookAt() of the container by adding a directional vector to container's position. Like this:

earth_container.position.x = -Math.cos(time) * 10;
earth_container.position.z = -Math.sin(time) * 10;
lookAtPos = earth_container.position.clone().add(new THREE.Vector3(0,0,1));
earth_container.lookAt(lookAtPos);

jsfiddle example

Three.js - rotate sphere around a point while keeping tilted axis of sphere fixed

1 Answers