Threepipe React/JSX Sample

html js
copy source

<!DOCTYPE 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>