Merge pull request 'feat/add-three.js' (#3) from feat/add-three.js into main
Gitea Vite Build Action / Vite-Build (push) Successful in 40s
Details
Gitea Vite Build Action / Vite-Build (push) Successful in 40s
Details
Reviewed-on: #3
This commit is contained in:
commit
077d3ef8e9
File diff suppressed because it is too large
Load Diff
|
@ -10,13 +10,17 @@
|
|||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@react-three/drei": "^9.115.0",
|
||||
"@react-three/fiber": "^8.17.10",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1"
|
||||
"react-dom": "^18.3.1",
|
||||
"three": "^0.169.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.13.0",
|
||||
"@types/react": "^18.3.11",
|
||||
"@types/react-dom": "^18.3.1",
|
||||
"@types/three": "^0.169.0",
|
||||
"@vitejs/plugin-react": "^4.3.3",
|
||||
"eslint": "^9.13.0",
|
||||
"eslint-plugin-react-hooks": "^5.0.0",
|
||||
|
|
Binary file not shown.
|
@ -1,3 +1,5 @@
|
|||
import Renderer from './Renderer.tsx'
|
||||
|
||||
function App() {
|
||||
|
||||
return (
|
||||
|
@ -19,6 +21,7 @@ function App() {
|
|||
<div className="hidden lg:flex lg:flex-1 lg:justify-end"/>
|
||||
</nav>
|
||||
</header>
|
||||
<Renderer/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -0,0 +1,50 @@
|
|||
import { Canvas, useFrame, useLoader } from '@react-three/fiber';
|
||||
import { Circle, 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}>
|
||||
<ambientLight />
|
||||
<directionalLight />
|
||||
<Gear />
|
||||
<ContactShadows
|
||||
scale={60}
|
||||
position={[0, -2, 0]}
|
||||
opacity={2.0}
|
||||
blur={2}
|
||||
resolution={512}
|
||||
/>
|
||||
<Circle args={[10]} position={[0,-2.001,0]} rotation-x={-Math.PI / 2} receiveShadow>
|
||||
<meshBasicMaterial color={[0.8,0.8,0.8]}/>
|
||||
</Circle>
|
||||
<OrbitControls target={[0, 0, 0]} maxPolarAngle={Math.PI / 2.0} />
|
||||
</Suspense>
|
||||
</Canvas>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Renderer
|
|
@ -1,3 +1,8 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@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()],
|
||||
},
|
||||
},
|
||||
assetsInclude: [
|
||||
"**/*.glb"
|
||||
]
|
||||
})
|
||||
|
|
Loading…
Reference in New Issue