mirror of
https://github.com/hanzoai/next.js.git
synced 2026-09-24 17:00:51 +00:00
e3688fbd94
This PR updates the with-three-js example to use the App Router. Here are the changes that have been made: - Renamed the pages folder to the app folder. - Updated the routing for `/`, `/birds` & `/boxes` files to align with the App Router. - Added the `layout.tsx` & `tsconfig.json` file as part of the App Router. - Updated the package.json file. The following actions were performed as part of this PR: - Ran `pnpm prettier-check `with no issues found. - Executed the `pnpm check-examples` script. CC: @samcx --------- Co-authored-by: samcx <[email protected]>
40 lines
1.2 KiB
JavaScript
40 lines
1.2 KiB
JavaScript
import { useEffect } from "react";
|
|
import { useFrame } from "@react-three/fiber";
|
|
import { useAnimations, useGLTF } from "@react-three/drei";
|
|
|
|
export default function Bird({ speed, factor, url, ...props }) {
|
|
const { nodes, animations } = useGLTF(url);
|
|
const { ref, mixer } = useAnimations(animations);
|
|
|
|
useEffect(
|
|
() => void mixer.clipAction(animations[0], ref.current).play(),
|
|
[mixer, animations, ref],
|
|
);
|
|
|
|
useFrame((state, delta) => {
|
|
ref.current.rotation.y +=
|
|
Math.sin((delta * factor) / 2) * Math.cos((delta * factor) / 2) * 1.5;
|
|
mixer.update(delta * speed);
|
|
});
|
|
|
|
return (
|
|
<group ref={ref}>
|
|
<scene name="Scene" {...props}>
|
|
<mesh
|
|
name="Object_0"
|
|
morphTargetDictionary={nodes.Object_0.morphTargetDictionary}
|
|
morphTargetInfluences={nodes.Object_0.morphTargetInfluences}
|
|
rotation={[1.5707964611537577, 0, 0]}
|
|
>
|
|
<bufferGeometry attach="geometry" {...nodes.Object_0.geometry} />
|
|
<meshStandardMaterial
|
|
attach="material"
|
|
{...nodes.Object_0.material}
|
|
name="Material_0_COLOR_0"
|
|
/>
|
|
</mesh>
|
|
</scene>
|
|
</group>
|
|
);
|
|
}
|