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

feat(three): added ambient light, directional light, base plate
Gitea Vite Build Action / Vite-Build (push) Failing after 34s Details

This commit is contained in:
Sven Vogel 2024-10-25 00:12:57 +02:00
parent 2be2a52925
commit 8578ec4561
2 changed files with 8 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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>