servostar
/
brunsviga-demo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat/add-three.js #3

Merged
servostar merged 5 commits from feat/add-three.js into main 2024-10-24 22:16:32 +00:00
Conversation 0 Commits 5 Files Changed 8 +8 -2
2 changed files with 8 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 8578ec4561 - Show all commits

BIN
public/gear.glb
View File

Binary file not shown.

10
src/Renderer.tsx
View File

@ -1,7 +1,8 @@
import { Canvas, useFrame, useLoader } from '@react-three/fiber'; import { Canvas, useFrame, useLoader } from '@react-three/fiber';
import { Clone, ContactShadows, OrbitControls } from '@react-three/drei' import { Circle, Clone, ContactShadows, OrbitControls } from '@react-three/drei'
import { Suspense, useRef } from 'react'; import { Suspense, useRef } from 'react';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'; import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { AmbientLight } from 'three';
function Gear(props: any) { function Gear(props: any) {
const gltf = useLoader(GLTFLoader, './gear.glb'); const gltf = useLoader(GLTFLoader, './gear.glb');
@ -27,6 +28,8 @@ function Renderer() {
<div className='flex flex-col h-screen gradient'> <div className='flex flex-col h-screen gradient'>
<Canvas camera={{ position: [-8, 5, 8] }}> <Canvas camera={{ position: [-8, 5, 8] }}>
<Suspense fallback={null}> <Suspense fallback={null}>
<ambientLight />
<directionalLight />
<Gear /> <Gear />
<ContactShadows <ContactShadows
scale={60} scale={60}
@ -35,7 +38,10 @@ function Renderer() {
blur={2} blur={2}
resolution={512} resolution={512}
/> />
<OrbitControls target={[0, 0, 0]} maxPolarAngle={Math.PI / 2} /> <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> </Suspense>
</Canvas> </Canvas>
</div> </div>