threepipe
Version:
A 3D viewer framework built on top of three.js in TypeScript with a focus on quality rendering, modularity and extensibility.
45 lines (39 loc) • 1.57 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Threepipe HTML/JS 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>
<canvas id="three-canvas" style="width: 800px; height: 600px;"></canvas>
<!--<script src="https://unpkg.com/threepipe"></script>-->
<script src="./../../dist/index.js"></script>
<script id="example-script" type="module" data-scripts="./index.html">
const {ThreeViewer, LoadingScreenPlugin} = threepipe
// or
// import {ThreeViewer, LoadingScreenPlugin} from 'threepipe' // if using import maps
// import {ThreeViewer, LoadingScreenPlugin} from './../../dist/index.mjs'
// import {ThreeViewer, LoadingScreenPlugin} from 'https://threepipe.org/dist/index.mjs'
const viewer = new ThreeViewer({canvas: document.getElementById('three-canvas')})
viewer.addPluginSync(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)
})
</script>
</body>
</html>