dist/index-jsm.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Volograms-js demo - with module</title>
    <style>
        body { margin: 0; }
        #gui{
            position: absolute;
            color: white;
            text-align: center;
            width: 100%;
            user-select: none;
        }
    </style>
</head>
<body>

<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
<script type="importmap">
        {
            "imports": {
                "three": "https://cdn.jsdelivr.net/npm/three@0.148.0/build/three.module.js"
            }
        }
</script>

<script type="module">
    import * as THREE from 'three'
    import {OrbitControls} from 'https://cdn.jsdelivr.net/npm/three@0.148.0/examples/jsm/controls/OrbitControls.js'
    import {Vologram} from 'https://cdn.jsdelivr.net/npm/volograms-js@latest/src/Vologram.js' //replace latest with version eg 0.1.116 for production usage

    // if package not yet published on npm :
    // import {Vologram} from 'https://rawcdn.githack.com/remmel/volograms-js/9e3267899a5172d5af0a66ab06b575da06ea4ec7/src/Vologram.js'

    // Skypack can also be used instead of all code above, but
    // three version in https://cdn.skypack.dev/three must match three version in https://cdn.skypack.dev/volograms-js
    // import * as THREE from 'https://cdn.skypack.dev/three@0.148.0'
    // import {OrbitControls} from 'https://cdn.skypack.dev/three@0.148.0/examples/jsm/controls/OrbitControls.js'
    // import {Vologram} from 'https://cdn.skypack.dev/volograms-js'

    // setup render, scene, light, orbitcontrol
    const renderer = new THREE.WebGLRenderer()
    renderer.setSize(window.innerWidth, window.innerHeight)
    document.body.appendChild(renderer.domElement)

    const scene = new THREE.Scene()
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
    scene.add(new THREE.AmbientLight(0xFFFFFF, 1))

    const controls = new OrbitControls(camera, renderer.domElement)
    camera.position.set(0, 2, 2)
    controls.target.set(0, 0.9, 0)
    controls.update()

    //setup some helper on the scene
    scene.add(new THREE.AxesHelper(1))
    scene.add(new THREE.GridHelper(10, 10))

    // as a volograms takes time to be downloaded, display loading information
    const updateLoading = p => {
        const el = document.getElementById('loading')
        el.innerText = Math.round(p*100) + '%'
    }

    document.getElementById('playpause').onclick = e => vologram.elVideo.paused ? vologram.elVideo.play() : vologram.elVideo.pause()
    document.getElementById('sound').onclick = e => vologram.elVideo.muted = !vologram.elVideo.muted

    let url = 'https://www.metalograms.com/ftp/vv/volograms/1670754904327_ld'
    let vologram = new Vologram(url, updateLoading)
    scene.add(vologram)

    function animate() {
        requestAnimationFrame(animate)
        renderer.render(scene, camera)
    }

    animate()

</script>

<span id="gui">
    <span id="loading">...</span>
    <button id="playpause">⏯︎</button>
    <button id="sound">🔈</button>
</span>

</body>
</html>