volograms-js
Version:
Volograms JS Reader
91 lines (75 loc) • 3.25 kB
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>