feat(three): added sample scene
Added two gears and a gradient background
This commit is contained in:
parent
b96f9626aa
commit
2be2a52925
Binary file not shown.
|
@ -1,3 +1,5 @@
|
||||||
|
import Renderer from './Renderer.tsx'
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -19,6 +21,7 @@ function App() {
|
||||||
<div className="hidden lg:flex lg:flex-1 lg:justify-end"/>
|
<div className="hidden lg:flex lg:flex-1 lg:justify-end"/>
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
|
<Renderer/>
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,45 @@
|
||||||
|
import { Canvas, useFrame, useLoader } from '@react-three/fiber';
|
||||||
|
import { Clone, ContactShadows, OrbitControls } from '@react-three/drei'
|
||||||
|
import { Suspense, useRef } from 'react';
|
||||||
|
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
|
||||||
|
|
||||||
|
function Gear(props: any) {
|
||||||
|
const gltf = useLoader(GLTFLoader, './gear.glb');
|
||||||
|
|
||||||
|
const gear1Ref = useRef<any>()
|
||||||
|
const gear2Ref = useRef<any>()
|
||||||
|
|
||||||
|
const speed = 2.5;
|
||||||
|
|
||||||
|
useFrame(({ clock }) => {
|
||||||
|
gear1Ref.current.rotation.z = clock.getElapsedTime() * speed + Math.sin(clock.getElapsedTime()) * speed
|
||||||
|
gear2Ref.current.rotation.z = -clock.getElapsedTime() * speed - Math.sin(clock.getElapsedTime()) * speed
|
||||||
|
})
|
||||||
|
|
||||||
|
return <>
|
||||||
|
<Clone ref={gear1Ref} {...props} object={gltf.scene} />
|
||||||
|
<Clone ref={gear2Ref} position={[2.5,0,0]} {...props} object={gltf.scene} />
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
|
||||||
|
function Renderer() {
|
||||||
|
return (
|
||||||
|
<div className='flex flex-col h-screen gradient'>
|
||||||
|
<Canvas camera={{ position: [-8, 5, 8] }}>
|
||||||
|
<Suspense fallback={null}>
|
||||||
|
<Gear />
|
||||||
|
<ContactShadows
|
||||||
|
scale={60}
|
||||||
|
position={[0, -2, 0]}
|
||||||
|
opacity={2.0}
|
||||||
|
blur={2}
|
||||||
|
resolution={512}
|
||||||
|
/>
|
||||||
|
<OrbitControls target={[0, 0, 0]} maxPolarAngle={Math.PI / 2} />
|
||||||
|
</Suspense>
|
||||||
|
</Canvas>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Renderer
|
|
@ -1,3 +1,8 @@
|
||||||
@tailwind base;
|
@tailwind base;
|
||||||
@tailwind components;
|
@tailwind components;
|
||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
|
|
||||||
|
.gradient {
|
||||||
|
background: rgb(255,255,255);
|
||||||
|
background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(190,190,190,1) 100%);
|
||||||
|
}
|
||||||
|
|
|
@ -1 +1 @@
|
||||||
{"root":["./src/App.tsx","./src/main.tsx","./src/vite-env.d.ts"],"version":"5.6.3"}
|
{"root":["./src/App.tsx","./src/Renderer.tsx","./src/main.tsx","./src/vite-env.d.ts"],"version":"5.6.3"}
|
|
@ -10,4 +10,7 @@ export default defineConfig({
|
||||||
plugins: [tailwindcss()],
|
plugins: [tailwindcss()],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
assetsInclude: [
|
||||||
|
"**/*.glb"
|
||||||
|
]
|
||||||
})
|
})
|
||||||
|
|
Loading…
Reference in New Issue