threepipe
Version:
A 3D viewer framework built on top of three.js in TypeScript with a focus on quality rendering, modularity and extensibility.
60 lines (54 loc) • 1.94 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Threepipe React/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>
<div id="root"></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 React from 'https://esm.sh/react@18'
import ReactDOM from 'https://esm.sh/react-dom@18'
function ThreeViewerComponent({ src }) {
const canvasRef = React.useRef(null);
React.useEffect(() => {
const viewer = new ThreeViewer({
canvas: canvasRef.current,
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)
})
return () => {
viewer.dispose()
}
}, []);
return React.createElement(
'canvas',
{id: 'three-canvas', style: {width: 800, height: 600}, ref: canvasRef},
)
}
ReactDOM.render(
React.createElement(ThreeViewerComponent),
document.getElementById('root')
)
</script>
</body>
</html>