<div id="root"></div>
<script type="module">
await import("/content/0b7ba5105ad7e8d47f32530e937a315667578c87827876cec754bbd970793547i0")
.then(o_o => o_o.ordEngine({
tailwind: true,
cameraControls: true,
r3f: true,
drei2: true,
}))
const SpinningBox = () => {
const ref = useRef()
useFrame(({
clock
}) => {
ref.current.rotation.y += 0.01
ref.current.rotation.x = Math.sin(clock.elapsedTime) * 0.1
})
const texture = drei2.useTexture('/content/307a22b26defd7a05d26e292e4b90085e2be8650b1750c06c9b9d1e4ee8d3e4di0')
return html`
<mesh ref=${ref}>
<boxGeometry />
<meshStandardMaterial map=${texture} />
</mesh>
`
}
const Scene = () => {
return html`
<${Fiber.Canvas} camera=${{position: [2, 3, 4], fov: 22}}>
<ambientLight/>
<directionalLight/>
<${CameraControls}/>
<${Suspense}>
<${SpinningBox}/>
<//>
<//>
`
}
ReactDOM.render(html`
<div className="flex flex-col w-full h-full bg-gradient-to-t from-neutral-700 to-neutral-900">
<${Scene}/>
</div>
`, document.getElementById('root'))
</script>