-
-
Save drcmda/92ab43a16aae3991b609 to your computer and use it in GitHub Desktop.
awv3.modules/es6
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import 'requestidlecallback'; | |
import Canvas from 'canvas'; | |
import View from 'view'; | |
import Object3 from 'three/object3'; | |
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(); | |
} | |
} | |
// 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}`); | |
// Show button | |
document.querySelector('#button').classList.toggle('hide'); | |
}); | |
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, | |
lazy: true | |
}); | |
perf.end().printCurrent(); | |
// Create red 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(1500).wait(), | |
// Focus + zoom cam | |
view.controls | |
.rotate(Math.PI / 3, Math.PI / 3) | |
.focus(model.bounds.sphere.center) | |
.zoom(model.bounds.sphere.radius * 4) | |
.wait() | |
]); | |
// Return | |
return { model: model, time: perf.total }; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment