Dog Model - Three.js #threejs-project #dogmodel

The dog model is downloaded from 3d website in .gltf format. For learning purpose, you can use the same dog model located in public directory of project. https://github.com/singhteekam/threejs/tree/main/public

For detailed explanation of code flow, read this blog - https://bloggerspace.singhteekam.in/threejs-project-overview

Code: 

import React, { useRef } from "react";
import { useGLTF, useAnimations } from "@react-three/drei";
import { OrbitControls } from "@react-three/drei";
import { Canvas, useFrame } from "@react-three/fiber";

const DogModel = () => {
  const model = useGLTF("/dog/dog.glb");

  const animations = useAnimations(model.animations, model.scene);
  console.log(animations);

  const ref = useRef();

  useFrame((state, _) => {
    ref.current.rotation.y = -1;
  });

  return (
    <>
      <OrbitControls />
      <hemisphereLight intensity={1} groundColor="black" />
      <spotLight
        position={[-20, 50, 10]}
        angle={0.12}
        penumbra={1}
        intensity={20}
        castShadow
        shadow-mapSize={1024}
        decay={false}
      />
      <ambientLight intensity={2} />

      <primitive ref={ref} scale={8} object={model.scene} />
    </>
  );
};

useGLTF.preload("/dog/dog.glb");

Output:

Full Source Code: https://github.com/singhteekam/threejs