threepipe
Version:
A 3D viewer framework built on top of three.js in TypeScript with a focus on quality rendering, modularity and extensibility.
63 lines (57 loc) • 2.07 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Threepipe React/JSX 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>
<!-- Include Babel for JSX transformation -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script id="example-script" type="text/babel" data-scripts="./index.html" data-type="module">
// 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, env }) {
const canvasRef = React.useRef(null);
React.useEffect(() => {
const viewer = new ThreeViewer({canvas: canvasRef.current,
plugins: [LoadingScreenPlugin],
})
// Load an environment map
const envPromise = viewer.setEnvironmentMap(env)
const modelPromise = viewer.load(src, {
autoCenter: true,
autoScale: true,
})
Promise.all([envPromise, modelPromise]).then(([env, model])=>{
console.log('Loaded', model, env, viewer)
})
return () => {
viewer.dispose()
}
}, []);
return (
<canvas id="three-canvas" style={{ width: 800, height: 600 }} ref={canvasRef} />
)
}
ReactDOM.render(
<ThreeViewerComponent
src={'https://threejs.org/examples/models/gltf/DamagedHelmet/glTF/DamagedHelmet.gltf'}
env={'https://threejs.org/examples/textures/equirectangular/venice_sunset_1k.hdr'}
/>,
document.getElementById('root')
)
</script>
</body>
</html>