JSFiddle - React, Tailwind, and code Playground

by uggway

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.js"></script>

JavaScript

THREE.Object3D.prototype.rotateAroundWorldAxis = function() {

    var q1 = new THREE.Quaternion();
    return function ( point, axis, angle ) {

        q1.setFromAxisAngle( axis, angle );

        this.quaternion.multiplyQuaternions( q1, this.quaternion );

        this.position.sub( point );
        this.position.applyQuaternion( q1 );
        this.position.add( point );

        return this;
    }

}();


var sw = window.innerWidth, sh = window.innerHeight;
var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera( 100, sw / sh, 1, 10000 );
scene.add( camera );

var renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize( sw, sh );

var material = new THREE.MeshBasicMaterial({ wireframe: true });
var geometry = new THREE.BoxGeometry(100, 100, 100);
var object = new THREE.Mesh(geometry, material);
scene.add(object);
var o2=object.clone();
object.add(o2);
o2.scale.set(0.5,0.5,0.5);
o2.position.set(100,100,100);

document.body.appendChild(renderer.domElement);

camera.position.set(0, 1000, 300);
camera.lookAt(scene.position);
var r = 0, t = -1, a = 0;

var p = new THREE.Vector3(1, 2, 10);
var ax = new THREE.Vector3(0, 0, 1);
var frames = 300;
setInterval(function(){
    t ++;
    if (t % frames == 0) {
    	a++;
        a %= 2;
        p.x = (a == 1 ? 1 : -1) * 200;
        r = a == 1 ? -1 : 1;
    }
    object.rotateAroundWorldAxis(p, ax, r * Math.PI * 2 / frames);
    o2.rotation.x+=0.01;
    renderer.render(scene, camera);
}, 10);