<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1"
/>
<script src="/content/d3d5e1e6c0e6b73a0842f2a8b2edb885963537f222d66a977543a6cfe9e42c29i0"></script>
<script src="/content/609bad601cdafa4d4a2622bbd9f4ebfdd278b8c5ea1efeb0d468db33f871fffai0"></script>
<script src="/content/609b117277f1e9c9f27f358fe02db34e13d08915bbcea18770dc36f5f3afcbb2i2"></script>
<style>
html,
body,
#root {
margin: 0;
width: 100%;
height: 100%;
background: #333;
}
</style>
</head>
<body>
<div id="root">load</div>
<script type="text/jsx" data-presets="react" data-type="module">
import React, {Suspense} from 'react'
import ReactDOM from 'react-dom'
import {Canvas, useFrame} from '@react-three/fiber'
import {CameraControls, Environment, useGLTF, Grid, SoftShadows, Instances, Instance, Sparkles} from '@react-three/drei'
import sat_1 from '/content/05ab156001afb379a88657179fd6e53958234d4e34dfc40c65b6af9e0dc62427i0?sat=844562594176888'
const Coin = (props) => {
const { nodes, materials } = useGLTF('/content/503cafd70b95d868982b4511e903dc305348fcf71baf068895664c1c6291ede0i0')
const ref = useRef()
useFrame(() => {
ref.current.rotation.x += 0.02
ref.current.rotation.y += 0.01
ref.current.rotation.z += 0.03
}, [])
return (
<group ref={ref} {...props} dispose={null}>
<mesh
castShadow
receiveShadow
geometry={nodes.Cylinder.geometry}
material={materials['Material.001']}
rotation={[Math.PI / 2, 0, -Math.PI / 2]}
/>
</group>
)
}
const GridFloor = (props) => {
const config = {
gridSize: [10.5, 10.5],
cellSize: 1,
cellThickness: 1,
cellColor: '#6f6f6f',
sectionSize: 5,
sectionThickness: 1.5,
sectionColor: '#ff6600',
fadeDistance: 35,
fadeStrength: 5,
followCamera: true,
infiniteGrid: true,
...props
}
return (
<Grid {...config} {...props} />
)
}
const Cam = () => {
const ref = useRef()
useFrame(({clock}) => {
ref.current.moveTo(0, 1.5, 0, true)
ref.current.dollyTo(Math.sin(clock.getElapsedTime() * 0.2) * 0.6 + 3, true)
ref.current.rotate(0.003, Math.sin(clock.getElapsedTime()) * 0.001, true)
})
return (
<CameraControls ref={ref} makeDefault />
)
}
const InstancedBoxes = (props) => {
const numBoxes = 25;
const boxes = Array.from({ length: numBoxes }, () => ({
position: [
(Math.random() - 0.5) * 50,
0.5,
(Math.random() - 0.5) * 50
],
scale: Math.random() + 1,
rotation: [
0,
Math.random() * Math.PI,
0
]
}));
return (
<Instances {...props} limit={numBoxes}>
<boxGeometry />
<meshStandardMaterial color="#ff9900" />
{boxes.map((box, i) => (
<Instance
key={i}
position={box.position}
scale={box.scale}
rotation={box.rotation}
/>
))}
</Instances>
);
};
function Box2(props) {
return (
<sat_1.Box receiveShadow castShadow position-y={0.5}
texture={'cfab194b924f7785c6e453728e1c264b89b74843633278cda3ad3f57576c1e93i0'}
{...props}
/>
)
}
function App() {
return window.innerWidth < 300 ? <div className="p-2 text-orange-400 text-xl">testscene</div> : (
<div className="w-full h-full border-4 border-orange-400">
<Canvas shadows camera={{fov: 40, position: [3, 4, 2]}}>
<Suspense>
<CameraControls makeDefault />
<Environment environmentIntensity={0.5} files={'/content/8c4ea8f9fafef081345ba8a72c08efed2373d0ba33ac92aca5f043071fc42909i0'}/>
<Cam />
<SoftShadows />
<directionalLight
position={[1, 7, 1]}
castShadow
shadow-mapSize-width={1024}
shadow-mapSize-height={1024}
shadow-camera-left={-5}
shadow-camera-right={5}
shadow-camera-top={5}
shadow-camera-bottom={-5}
/>
<Coin receiveShadow castShadow position-y={1.61} rotation-x={-1} scale={0.5} />
<Box2 />
<Sparkles scale={1.5} position-y={0.5} color={'yellow'} />
<InstancedBoxes />
<GridFloor />
</Suspense>
</Canvas>
</div>
)
}
ReactDOM.render(<App/>, document.getElementById('root'));
</script>
</body>
</html>