new gist

.js

import 'requestidlecallback';
import Canvas from 'canvas';
import View from 'view';
import Object3 from 'three/object3';
import Animation from 'animation';
import { Performance } from 'helpers/misc';

// Create new canvas
const canvas = new Canvas({ dom: '#main' });
// Create a view, defaults into the same dom as the canvas
const view = new View(canvas, { ambient: 0x909090 });

// Start when the browser has calmed down a bit
requestIdleCallback(async () => {
    let total = 0, number = 3;
    for (let i of Array(number).keys()) {

        // Process url, wait for all the zooming and fading
        let { model, time } = await process('./test/box.txt');

        total += time;

        if (i < number - 1) {

            // Fade out
            await model.animate({
                materials: { all: [ { opacity: 0.0 } ] },
                scale: new THREE.Vector3(1, 1, 0),
                light: { scale: new THREE.Vector3(10, 10, 1) }
            }).start(1500).wait();

            // Remove it
            model.destroy();

        } else if (i == number - 1) {

            model.animate({
                rotation: new THREE.Euler(0, 0, Math.PI / 2),
                scale: new THREE.Vector3(0.3, 1.8, 1.5),
                light: { scale: new THREE.Vector3(15, 15, 15), position: new THREE.Vector3(0, 0, 60) }
            }).repeat(Infinity, Animation.Repeat.Yoyo).easing(Animation.Easing.Elastic.Out).delay(500).start(1000);

        }
    }

    // All tasks are through, increase ambient ...
    view.ambient.animate({ intensity: 1.2, color: new THREE.Color('#fff') }).start(1000);
    // Log out total ...
    console.log(`total: ${total / number}`);
});

async function process(url) {

    // Create new object, add it to the scene right away
    const model = new Object3();
    view.scene.add(model);
    view.controls.zoom(5000).now();

    let perf = new Performance().begin();

    // Load & compress model lazy, group it into our scene-object
    await canvas.parser.stream(url, {
        groupInto: model,
        compressMaterials: true,
        compressGeometry: true,
        lazy: true
    });

    perf.end().printCurrent();

    // Create spotlight
    model.light = new THREE.PointLight( 0x28b4d7, 1, 100 )
    model.centerGeometry().updateMaterials().add(model.light);
    model.light.add(new THREE.Mesh(new THREE.SphereGeometry(1, 32, 32), new THREE.MeshBasicMaterial()));

    // Cam + Animation run at the same time, but both are awaited
    await Promise.all([

        // Animate meshes & light
        model.animate({
            materials: { meshes: [ { opacity: 0.75 } ] },
            light: { position: new THREE.Vector3(0, 0, model.bounds.sphere.radius / 2) }
        }).start(1000).wait(),

        // Focus + zoom cam
        view.controls
            .rotate(Math.PI / 3, Math.PI / 3)
            .focus(model.bounds.sphere.center)
            .zoom(model.bounds.sphere.radius * 10)
            .wait()

    ]);

    // Return
    return { model: model, time: perf.total };
}