xfy/DefectingCat.github.io
1
0
Fork 0
mirror of https://github.com/DefectingCat/DefectingCat.github.io synced 2025-07-16 09:11:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix home model light

Browse Source
This commit is contained in:
DefectingCat
2023-08-17 16:56:44 +08:00
parent 7d082f8129
commit 9ec0e8fcee
1 changed files with 16 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
app/home-modle.tsx
View File

@ -1,8 +1,7 @@
'use client'; 'use client';
import { Stats } from '@react-three/drei';
import { Canvas, useFrame, useLoader, useThree } from '@react-three/fiber'; import { Canvas, useFrame, useLoader, useThree } from '@react-three/fiber';
import clsx from 'clsx';
import Loading from 'components/rua/loading/rua-loading';
import { getMousePosition } from 'lib/utils'; import { getMousePosition } from 'lib/utils';
import { useEffect, useRef } from 'react'; import { useEffect, useRef } from 'react';
import useStore from 'store'; import useStore from 'store';
@ -62,17 +61,25 @@ const Model = () => {
mixer.current?.update(delta); mixer.current?.update(delta);
}); });
// const spotRef = useRef<THREE.SpotLight>(null);
// useHelper(spotRef as any, THREE.SpotLightHelper, 'red');
const objectRef = useRef<THREE.Object3D>(null);
return ( return (
<> <>
{/* spot light target */}
<object3D position={[0, 0.5, -0.5]} ref={objectRef} />
<spotLight <spotLight
color={0xffffff} color={0xffffff}
intensity={0.6} intensity={5}
distance={100} // distance={1000}
angle={15} angle={15}
target={gltf.scene} target={objectRef.current ?? undefined}
position={[0, 2, 6]} position={[0, 0.5, 1.5]}
/> />
<primitive object={gltf.scene} /> <primitive object={gltf.scene} />
{/* <OrbitControls camera={camera} /> */}
</> </>
); );
}; };
@ -85,8 +92,9 @@ const HomeModel = () => {
<Canvas camera={{ fov: 55 }}> <Canvas camera={{ fov: 55 }}>
<ambientLight color={0xffffff} intensity={0.5} /> <ambientLight color={0xffffff} intensity={0.5} />
<Model /> <Model />
<Stats />
</Canvas> </Canvas>
<div {/* <div
className={clsx( className={clsx(
'h-full w-full absolute', 'h-full w-full absolute',
'top-0 left-0 flex', 'top-0 left-0 flex',
@ -97,7 +105,7 @@ const HomeModel = () => {
)} )}
> >
<Loading /> <Loading />
</div> </div> */}
</> </>
); );
}; };