-
Notifications
You must be signed in to change notification settings - Fork 0
/
demo.js
52 lines (41 loc) · 1.77 KB
/
demo.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
import * as THREE from 'three'
import {OrbitControls} from "three/examples/jsm/controls/OrbitControls.js"
import {Vologram} from "./Vologram.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) + '%'
if(p === 1.0) { //when loaded/100%
// Play and unmute when clicking on canvas (because of Chrome policy; cannot be autoplay)
renderer.domElement.onclick = e => {
vologram.elVideo.play()
vologram.elVideo.muted = false
renderer.domElement.onclick = null
}
}
}
// Play/Pause button and Sound/Mute button
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()