Threepipe React/JS Sample

html js
copy source

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