index.html

<!DOCTYPE html>
<html>

<head>
    <title>Simple TTT3D example with Three.js</title>
</head>

<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.147.0/three.min.js" integrity="sha512-GWXLkqxMENYgBdQvA/lTeOV+R2auhasgKQxjMTWBFt3Z6GJVZ9owiyAMOzz0Wt6J1ri8bf/g2kHJV0uvWpJTuw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script type="module" defer>
        // import TTT3D
        import TTT3D from "https://cdn.jsdelivr.net/npm/@jgtools/ttt3d@1.1.0/dist/index.min.js";
        // setup three js
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
        camera.position.set(0, 1, 5);
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(512, 512);
        document.body.appendChild(renderer.domElement);
        const light = new THREE.AmbientLight(0xffffff, 0.1);
        scene.add(light);
        const dLight = new THREE.DirectionalLight(0xffffff, 1);
        dLight.position.set(0, 1, 5);
        scene.add(dLight);

        // add cube
        const geo = new THREE.BoxGeometry(1, 1, 1);
        const mat = new THREE.MeshLambertMaterial({ color: 0x00ffff });
        const cube = new THREE.Mesh(geo, mat);
        scene.add(cube);

        // setup transitions (only one in this example)
        // [pos.x, pos.y, pos.z, rot.x, rot.y, rot.z, scale.x, scale.y, scale.z]
        const origins = {
            cube: [0, 0, 0, 0, 0, 0, 1, 1, 1]
        };
        const ttt = new TTT3D(origins);
        ttt.add("jump", c => {
            const t = Math.sin(c * Math.PI);
            return {
                cube: [0, t * 2, 0, 0, t * 4, 0, 0, t, 0]
            };
        });

        // play jump transition every 3 seconds
        setInterval(() => ttt.play("jump"), 3000);

        const clock = new THREE.Clock();
        const update = () => {
            const delta = clock.getDelta();

            // update transition system
            const res = ttt.update(delta);

            // update mesh transform
            const part = res["cube"];
            cube.position.set(part[0], part[1], part[2]);
            cube.rotation.set(part[3], part[4], part[5]);
            cube.scale.set(part[6], part[7], part[8]);

            renderer.render(scene, camera);
            requestAnimationFrame(update);
        };
        update();
    </script>
</body>

</html>