JSFiddle - React, Tailwind, and code Playground

by edapx

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/16.6.0/Tween.min.js"></script>

JavaScript

var camera, scene, renderer, geometry, material, mesh;

init();
animate();

function init() {

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(150, window.innerWidth / window.innerHeight, 1, 900);
    camera.position.z = 500;
    scene.add(camera);

    geometry = new THREE.CubeGeometry(200, 200, 200);
    material = new THREE.MeshNormalMaterial();

    mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

    renderer = new THREE.WebGLRenderer({antialias:true});
    renderer.setSize(window.innerWidth, window.innerHeight);

    document.body.appendChild(renderer.domElement);
    
    testChained();
}

    function testChained(){
        var radians = 90 * THREE.Math.DEG2RAD;

        var pos_copy_a = new THREE.Vector3().copy(mesh.position);
        var target_a = pos_copy_a.add(new THREE.Vector3(0.0, 0.0, 50.0));
        var rotationMatrix_a = new THREE.Matrix4().makeRotationY(mesh.rotation.y);
        target_a.applyMatrix4(rotationMatrix_a);
        var a = new TWEEN.Tween(mesh.position).to(target_a, 900).onComplete(function(){
            console.log("animation a");
            console.log(mesh.position);
            console.log(mesh.rotation);
        });

        var target_b = {y:mesh.rotation.y + radians};
        var b = new TWEEN.Tween(mesh.rotation).to(target_b, 900).onComplete(function(){
            console.log("animation b");
            console.log(mesh.position);
            console.log(mesh.rotation);  
        });;

        var pos_copy_c = new THREE.Vector3().copy(mesh.position);
        var target_c = pos_copy_c.add(new THREE.Vector3(0.0, 0.0, 50));
        var rotationMatrix_c = new THREE.Matrix4().makeRotationY(mesh.rotation.y);
        target_c.applyMatrix4(rotationMatrix_c);
        var c = new TWEEN.Tween(mesh.position).to(target_c, 900)
        .onComplete(function(){
            console.log("animation c");
            console.log(mesh.position);
            console.log(mesh.rotation);
        });
      ...