threepipe
Version:
A 3D viewer framework built on top of three.js in TypeScript with a focus on quality rendering, modularity and extensibility.
61 lines (52 loc) • 1.98 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Threepipe Vue/HTML Sample</title>
<style>
html, body{
width: 100%;
height: 100%;
margin: 0;
overflow: hidden;
}
</style>
<script type="module" src="../examples-utils/simple-code-preview.mjs"></script>
</head>
<body>
<div id="app">
<canvas id="three-canvas" style="width: 800px; height: 600px" ref="canvasRef"></canvas>
</div>
<script id="example-script" type="module" data-scripts="./index.html">
// import { ThreeViewer, LoadingScreenPlugin } from 'https://threepipe.org/dist/index.mjs'
import { ThreeViewer, LoadingScreenPlugin } from './../../dist/index.mjs'
import { createApp, ref, onMounted, onBeforeUnmount } from "https://unpkg.com/vue@3/dist/vue.esm-browser.prod.js";
const ThreeViewerComponent = {
setup() {
const canvasRef = ref(null);
onMounted(() => {
const viewer = new ThreeViewer({
canvas: canvasRef.value,
plugins: [LoadingScreenPlugin],
});
// Load an environment map
const envPromise = viewer.setEnvironmentMap('https://threejs.org/examples/textures/equirectangular/venice_sunset_1k.hdr');
const modelPromise = viewer.load('https://threejs.org/examples/models/gltf/DamagedHelmet/glTF/DamagedHelmet.gltf', {
autoCenter: true,
autoScale: true,
});
Promise.all([envPromise, modelPromise]).then(([env, model]) => {
console.log('Loaded', model, env, viewer);
});
onBeforeUnmount(() => {
viewer.dispose();
});
});
return { canvasRef };
},
};
const app = createApp(ThreeViewerComponent);
app.mount('#app');
</script>
</body>
</html>