CodePenでesm.shでお手軽にReact Three Fiberを使用してみるテスト３　3Dモデルアニメーション表示

2024年4月23日 22:36

　前回からのつづきです。　esm.shを使用したCodePenのコードで、React Three Fiberによる3Dモデルアニメーションの表示を行ってみました。　3DモデルアニメーションはglTFファイル形式のものを使用しています。

概要

　コードは全てglTFファイル形式による3Dモデルアニメーションを動かすものですが、Test01からTest03までのコードと、Test04からTest09までのコードでは、アニメーションを再生させるコードの書き方が異なっています。　これは、Test04からTest09のコードは3Dモデルのアニメーションを切り替える処理のコードを書いた後に、そのアニメーション切り替えコードを元に作成しているからです。　Test01からTest03までのコードではそういう要素は全くないので、また違う書き方となっています。　ちなみどちらが一般的な書き方なのかは自分もよくわかりませんｗ。　いつものテキトーな、動けばよかろうなのだァァァァッ!! 、精神でいかせてもらってますｗ

参考：import文そのままになりますが、使用したライブラリ等のバージョンは以下になります

呼び出す機能が変わっている部分はありますが、基本的には前回からバージョンの変更などはないです。

Test01からTest03までのコードでは

import ReactDOM from 'https://esm.sh/react-dom@18.2.0'
import React, { Suspense } from 'https://esm.sh/react@18.2.0'
import { GLTFLoader } from 'https://esm.sh/three@0.163.0/examples/jsm/loaders/GLTFLoader'
import { Canvas, useFrame, useLoader } from 'https://esm.sh/@react-three/fiber@8.16.1'
import { Html, useProgress } from 'https://esm.sh/@react-three/drei@9.105.4'
import * as THREE from 'https://esm.sh/three@0.163.0'

Test04からTest09までのコードでは

import ReactDOM from 'https://esm.sh/react-dom@18.2.0'
import React, { useRef, useEffect, Suspense } from 'https://esm.sh/react@18.2.0'
import { Canvas, useFrame } from 'https://esm.sh/@react-three/fiber@8.16.1'
import { Html, useProgress, useGLTF, useAnimations } from 'https://esm.sh/@react-three/drei@9.105.4'

となります。

また、3Dアニメーションの実行のために以下のサイトを参考にさせていただきました。

■Test01からTest03までのコードで参考にさせていただいたサイト
・How to extract and play animation in react-three-fiber
・reactjs - react-three-fiberでアニメーションを抽出して再生する方法（現在サイトはなくなってしまっているようです）

■Test04からTest09までのコードで参考にさせていただいたサイト
上記の参考サイトに加えて以下を参考にさせていただきました
・How to Perform Inplace Animations in React Three Fiber
・【React】react-three-fibarで3D表現をする（Mixamoを使ったアニメーションモデル）
・Controlling Multiple Character Animations In React Three Fiber

このnoteのそれぞれのコードの下にある参考サイトとして引用している自分noteは、参考にした自作CodeSandboxコードへのリンクをまとめただけのものです。　それらCodeSandboxコードはこのnoteのコード作成時に参考にしましたが、重いのでコードへの直接のリンクはやめておきました。

以下作成したコードのリストとなります。　各コードにて、タイトル文字によるリンクはコード付きCodePenへのリンク、サムネイル画像によるリンクはコードなしのコード実行結果の全画面表示へのリンク、となります。　

あと、JavaScriptのコードをそのまま載せているので、冗長な感じでこのnoteエントリけっこう長いです、ご注意ください。

React Three Fiber 8.16.1 glTF Animation Test01

HTML

<div id="root"></div>

CSS

* {
  box-sizing: border-box;
}

html,
body,
#root {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: #30ffff;
}

JS（JavaScript）

import ReactDOM from 'https://esm.sh/react-dom@18.2.0'
import React, { Suspense } from 'https://esm.sh/react@18.2.0'
import { GLTFLoader } from 'https://esm.sh/three@0.163.0/examples/jsm/loaders/GLTFLoader'
import { Canvas, useFrame, useLoader } from 'https://esm.sh/@react-three/fiber@8.16.1'
import { Html, useProgress } from 'https://esm.sh/@react-three/drei@9.105.4'
import * as THREE from 'https://esm.sh/three@0.163.0'

const Loader = () => {
  const { progress } = useProgress()
  return (
    <Html center>
      {progress} % loaded
    </Html>
  )
}

const Model = (props) => {
  const gltf = useLoader(
    GLTFLoader,
    'https://raw.githack.com/KhronosGroup/glTF-Sample-Models/master/2.0/BrainStem/glTF-Binary/BrainStem.glb'
  )

  let mixer
  if (gltf.animations.length) {
    mixer = new THREE.AnimationMixer(gltf.scene)
    gltf.animations.forEach((clip) => {
      const action = mixer.clipAction(clip)
      action.play()
    })
  }


  useFrame((state, delta) => {
    mixer?.update(delta)
    //gltf.scene.rotation.x += 0.01
    gltf.scene.rotation.x = state.mouse.y * -2.5
    gltf.scene.rotation.y = state.mouse.x * 7.5
    //gltf.scene.rotation.z = (state.mouse.x + state.mouse.y) / 2  * 5
  }, [])

  gltf.scene.traverse((child) => {
    if (child.isMesh) {
      child.castShadow = true
      child.receiveShadow = true
      child.material.side = THREE.FrontSide
    }
  })

  return (
    <>
      <primitive object={gltf.scene} position={props.position} scale={props.scale} />
    </>
  )
}

const App = () => {

  return (

    <Canvas>

    <ambientLight intensity={Math.PI / 2} />
    <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} decay={0} intensity={Math.PI} />
    <pointLight position={[-10, -10, -10]} decay={0} intensity={Math.PI} />

    <Suspense fallback={<Loader />}>
      <Model position={[0, -2, 0]} scale={3} />
    </Suspense>

    </Canvas>

  )

}

ReactDOM.render(
  <App/>,
  document.getElementById("root")
);

前に自分で作成した以下のサイトの記録を参考にして作成してみました
CodeSandboxでReact Three Fiber実験その４　glTF 3Dモデルアニメーション表示 > React Three Fiber Practice25 glTF Model Animation01

React Three Fiber 8.16.1 glTF Animation Test02

HTML　Test01と同じです

CSS　Test01と同じです

JS（JavaScript）

import ReactDOM from 'https://esm.sh/react-dom@18.2.0'
import React, { Suspense } from 'https://esm.sh/react@18.2.0'
import { GLTFLoader } from 'https://esm.sh/three@0.163.0/examples/jsm/loaders/GLTFLoader'
import { Canvas, useFrame, useLoader } from 'https://esm.sh/@react-three/fiber@8.16.1'
import { Html, useProgress } from 'https://esm.sh/@react-three/drei@9.105.4'
import * as THREE from 'https://esm.sh/three@0.163.0'

const Loader = () => {
  const { progress } = useProgress()
  return (
    <Html center>
      {progress} % loaded
    </Html>
  )
}

const Model = (props) => {
  const gltf = useLoader(
    GLTFLoader,
    'https://raw.githack.com/KhronosGroup/glTF-Sample-Models/master/2.0/CesiumMan/glTF-Binary/CesiumMan.glb'
  )

  let mixer
  if (gltf.animations.length) {
    mixer = new THREE.AnimationMixer(gltf.scene)
    gltf.animations.forEach((clip) => {
      const action = mixer.clipAction(clip)
      action.play()
    })
  }


  useFrame((state, delta) => {
    mixer?.update(delta)
    //gltf.scene.rotation.x += 0.01
    gltf.scene.rotation.x = state.mouse.y * -2.5
    gltf.scene.rotation.y = state.mouse.x * 7.5
    //gltf.scene.rotation.z = (state.mouse.x + state.mouse.y) / 2  * 5
  }, [])

  gltf.scene.traverse((child) => {
    if (child.isMesh) {
      child.castShadow = true
      child.receiveShadow = true
      child.material.side = THREE.FrontSide
    }
  })

  return (
    <>
      <primitive object={gltf.scene} position={props.position} scale={props.scale} />
    </>
  )
}

const App = () => {

  return (

    <Canvas>

    <ambientLight intensity={Math.PI / 2} />
    <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} decay={0} intensity={Math.PI} />
    <pointLight position={[-10, -10, -10]} decay={0} intensity={Math.PI} />

    <Suspense fallback={<Loader />}>
      <Model position={[0, -2, 0]} scale={3} />
    </Suspense>

    </Canvas>

  )

}

ReactDOM.render(
  <App/>,
  document.getElementById("root")
);

前に自分で作成した以下のサイトの記録を参考にして作成してみました
CodeSandboxでReact Three Fiber実験その４　glTF 3Dモデルアニメーション表示 > React Three Fiber Practice26 glTF Model Animation02

React Three Fiber 8.16.1 glTF Animation Test03

HTML　Test01と同じです

CSS　Test01と同じです

JS（JavaScript）

import ReactDOM from 'https://esm.sh/react-dom@18.2.0'
import React, { Suspense } from 'https://esm.sh/react@18.2.0'
import { GLTFLoader } from 'https://esm.sh/three@0.163.0/examples/jsm/loaders/GLTFLoader'
import { Canvas, useFrame, useLoader } from 'https://esm.sh/@react-three/fiber@8.16.1'
import { Html, useProgress } from 'https://esm.sh/@react-three/drei@9.105.4'
import * as THREE from 'https://esm.sh/three@0.163.0'

const Loader = () => {
  const { progress } = useProgress()
  return (
    <Html center>
      {progress} % loaded
    </Html>
  )
}

const Model = (props) => {
  const gltf = useLoader(
    GLTFLoader,
    'https://raw.githack.com/KhronosGroup/glTF-Sample-Models/master/2.0/CesiumMilkTruck/glTF-Binary/CesiumMilkTruck.glb'
  )

  let mixer
  if (gltf.animations.length) {
    mixer = new THREE.AnimationMixer(gltf.scene)
    gltf.animations.forEach((clip) => {
      const action = mixer.clipAction(clip)
      action.play()
    })
  }


  useFrame((state, delta) => {
    mixer?.update(delta)
    //gltf.scene.rotation.x += 0.01
    gltf.scene.rotation.x = state.mouse.y * -2.5
    gltf.scene.rotation.y = state.mouse.x * 7.5
    //gltf.scene.rotation.z = (state.mouse.x + state.mouse.y) / 2  * 5
  }, [])

  gltf.scene.traverse((child) => {
    if (child.isMesh) {
      child.castShadow = true
      child.receiveShadow = true
      child.material.side = THREE.FrontSide
    }
  })

  return (
    <>
      <primitive object={gltf.scene} position={props.position} scale={props.scale} />
    </>
  )
}

const App = () => {

  return (

    <Canvas>

    <ambientLight intensity={Math.PI / 2} />
    <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} decay={0} intensity={Math.PI} />
    <pointLight position={[-10, -10, -10]} decay={0} intensity={Math.PI} />

    <Suspense fallback={<Loader />}>
      <Model position={[0, -1, 0]} scale={1} />
    </Suspense>

    </Canvas>

  )

}

ReactDOM.render(
  <App/>,
  document.getElementById("root")
);

前に自分で作成した以下のサイトの記録を参考にして作成してみました
CodeSandboxでReact Three Fiber実験その４　glTF 3Dモデルアニメーション表示 > React Three Fiber Practice27 glTF Model Animation03

React Three Fiber 8.16.1 glTF Animation Test04

HTML　Test01と同じです

CSS　Test01と同じです

JS（JavaScript）

import ReactDOM from 'https://esm.sh/react-dom@18.2.0'
import React, { useRef, useEffect, Suspense } from 'https://esm.sh/react@18.2.0'
import { Canvas, useFrame } from 'https://esm.sh/@react-three/fiber@8.16.1'
import { Html, useProgress, useGLTF, useAnimations } from 'https://esm.sh/@react-three/drei@9.105.4'

const ModelPath = 'https://cdn.jsdelivr.net/gh/mrdoob/three.js@r110/examples/models/gltf/Parrot.glb'

const Loader = () => {
  const { progress } = useProgress()
  return (
    <Html center>
      {progress} % loaded
    </Html>
  )
}

const Model = (props) => {
  const group = useRef()

  const gltf = useGLTF(ModelPath)

  const { actions } = useAnimations(gltf.animations, group)

  useEffect(() => {
    //console.log(actions) // find out the name of your action
    actions['parrot_A_'].play()
  })

  useFrame((state) => {
    //gltf.scene.rotation.x += 0.01
    gltf.scene.rotation.x = state.mouse.y * -2.5
    gltf.scene.rotation.y = state.mouse.x * 7.5
    //gltf.scene.rotation.z = (state.mouse.x + state.mouse.y) / 2  * 5
  }, [])

  return (
    <>
      <group ref={group} dispose={null}>
        <group scale={props.scale}>
          <primitive object={gltf.scene} position={props.position} rotation={props.rotation} scale={props.scale} />
        </group>
      </group>
    </>
  )



}

const App = () => {

  return (

    <Canvas>

    <ambientLight intensity={Math.PI / 2} />
    <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} decay={0} intensity={Math.PI} />
    <pointLight position={[-10, -10, -10]} decay={0} intensity={Math.PI} />

    <Suspense fallback={<Loader />}>
      <Model position={[0, -1.5, 0]} rotation={[0, 0, 0]} scale={0.3} />
    </Suspense>

    </Canvas>

  )

}

ReactDOM.render(
  <App/>,
  document.getElementById("root")
);

前に自分で作成した以下のサイトの記録を参考にして作成してみました
CodeSandboxでReact Three Fiber実験その５　glTF 3Dモデルアニメーション切り替え表示 > React Three Fiber Practice32 glTF Model Animation04

React Three Fiber 8.16.1 glTF Animation Test05

HTML　Test01と同じです

CSS　Test01と同じです

JS（JavaScript）

import ReactDOM from 'https://esm.sh/react-dom@18.2.0'
import React, { useRef, useEffect, Suspense } from 'https://esm.sh/react@18.2.0'
import { Canvas, useFrame } from 'https://esm.sh/@react-three/fiber@8.16.1'
import { Html, useProgress, useGLTF, useAnimations } from 'https://esm.sh/@react-three/drei@9.105.4'

const ModelPath = 'https://cdn.jsdelivr.net/gh/mrdoob/three.js@r110/examples/models/gltf/Flamingo.glb'

const Loader = () => {
  const { progress } = useProgress()
  return (
    <Html center>
      {progress} % loaded
    </Html>
  )
}

const Model = (props) => {
  const group = useRef()

  const gltf = useGLTF(ModelPath)

  const { actions } = useAnimations(gltf.animations, group)

  useEffect(() => {
    //console.log(actions) // find out the name of your action
    actions['flamingo_flyA_'].play()
  })

  useFrame((state) => {
    //gltf.scene.rotation.x += 0.01
    gltf.scene.rotation.x = state.mouse.y * -2.5
    gltf.scene.rotation.y = state.mouse.x * 7.5
    //gltf.scene.rotation.z = (state.mouse.x + state.mouse.y) / 2  * 5
  }, [])

  return (
    <>
      <group ref={group} dispose={null}>
        <group scale={props.scale}>
          <primitive object={gltf.scene} position={props.position} rotation={props.rotation} scale={props.scale} />
        </group>
      </group>
    </>
  )



}

const App = () => {

  return (

    <Canvas>

    <ambientLight intensity={Math.PI / 2} />
    <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} decay={0} intensity={Math.PI} />
    <pointLight position={[-10, -10, -10]} decay={0} intensity={Math.PI} />

    <Suspense fallback={<Loader />}>
      <Model position={[0, -1, 0]} rotation={[0, 0, 0]} scale={0.2} />
    </Suspense>

    </Canvas>

  )

}

ReactDOM.render(
  <App/>,
  document.getElementById("root")
);

前に自分で作成した以下のサイトの記録を参考にして作成してみました
CodeSandboxでReact Three Fiber実験その５　glTF 3Dモデルアニメーション切り替え表示 > React Three Fiber Practice33 glTF Model Animation05

React Three Fiber 8.16.1 glTF Animation Test06

HTML　Test01と同じです

CSS　Test01と同じです

JS（JavaScript）

import ReactDOM from 'https://esm.sh/react-dom@18.2.0'
import React, { useRef, useEffect, Suspense } from 'https://esm.sh/react@18.2.0'
import { Canvas, useFrame } from 'https://esm.sh/@react-three/fiber@8.16.1'
import { Html, useProgress, useGLTF, useAnimations } from 'https://esm.sh/@react-three/drei@9.105.4'

const ModelPath = 'https://cdn.jsdelivr.net/gh/mrdoob/three.js@r110/examples/models/gltf/Horse.glb'

const Loader = () => {
  const { progress } = useProgress()
  return (
    <Html center>
      {progress} % loaded
    </Html>
  )
}

const Model = (props) => {
  const group = useRef()

  const gltf = useGLTF(ModelPath)

  const { actions } = useAnimations(gltf.animations, group)

  useEffect(() => {
    //console.log(actions) // find out the name of your action
    actions['horse_A_'].play()
  })

  useFrame((state) => {
    //gltf.scene.rotation.x += 0.01
    gltf.scene.rotation.x = state.mouse.y * -2.5
    gltf.scene.rotation.y = state.mouse.x * 7.5
    //gltf.scene.rotation.z = (state.mouse.x + state.mouse.y) / 2  * 5
  }, [])

  return (
    <>
      <group ref={group} dispose={null}>
        <group scale={props.scale}>
          <primitive object={gltf.scene} position={props.position} rotation={props.rotation} scale={props.scale} />
        </group>
      </group>
    </>
  )



}

const App = () => {

  return (

    <Canvas>

    <ambientLight intensity={Math.PI / 2} />
    <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} decay={0} intensity={Math.PI} />
    <pointLight position={[-10, -10, -10]} decay={0} intensity={Math.PI} />

    <Suspense fallback={<Loader />}>
      <Model position={[0, -15, 0]} rotation={[0, 0, 0]} scale={0.14} />
    </Suspense>

    </Canvas>

  )

}

ReactDOM.render(
  <App/>,
  document.getElementById("root")
);

前に自分で作成した以下のサイトの記録を参考にして作成してみました
CodeSandboxでReact Three Fiber実験その５　glTF 3Dモデルアニメーション切り替え表示 > React Three Fiber Practice34 glTF Model Animation06

React Three Fiber 8.16.1 glTF Animation Test07

HTML　Test01と同じです

CSS　Test01と同じです

JS（JavaScript）

import ReactDOM from 'https://esm.sh/react-dom@18.2.0'
import React, { useRef, useEffect, Suspense } from 'https://esm.sh/react@18.2.0'
import { Canvas, useFrame } from 'https://esm.sh/@react-three/fiber@8.16.1'
import { Html, useProgress, useGLTF, useAnimations } from 'https://esm.sh/@react-three/drei@9.105.4'

const ModelPath = 'https://cdn.jsdelivr.net/gh/mrdoob/three.js@r110/examples/models/gltf/Stork.glb'

const Loader = () => {
  const { progress } = useProgress()
  return (
    <Html center>
      {progress} % loaded
    </Html>
  )
}

const Model = (props) => {
  const group = useRef()

  const gltf = useGLTF(ModelPath)

  const { actions } = useAnimations(gltf.animations, group)

  useEffect(() => {
    //console.log(actions) // find out the name of your action
    actions['storkFly_B_'].play()
  })

  useFrame((state) => {
    //gltf.scene.rotation.x += 0.01
    gltf.scene.rotation.x = state.mouse.y * -2.5
    gltf.scene.rotation.y = state.mouse.x * 7.5
    //gltf.scene.rotation.z = (state.mouse.x + state.mouse.y) / 2  * 5
  }, [])

  return (
    <>
      <group ref={group} dispose={null}>
        <group scale={props.scale}>
          <primitive object={gltf.scene} position={props.position} rotation={props.rotation} scale={props.scale} />
        </group>
      </group>
    </>
  )



}

const App = () => {

  return (

    <Canvas>

    <ambientLight intensity={Math.PI / 2} />
    <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} decay={0} intensity={Math.PI} />
    <pointLight position={[-10, -10, -10]} decay={0} intensity={Math.PI} />

    <Suspense fallback={<Loader />}>
      <Model position={[0, 0, 0]} rotation={[0, 0, 0]} scale={0.20} />
    </Suspense>

    </Canvas>

  )

}

ReactDOM.render(
  <App/>,
  document.getElementById("root")
);

前に自分で作成した以下のサイトの記録を参考にして作成してみました
CodeSandboxでReact Three Fiber実験その５　glTF 3Dモデルアニメーション切り替え表示 > React Three Fiber Practice35 glTF Model Animation07

React Three Fiber 8.16.1 glTF Animation Test08

HTML　Test01と同じです

CSS　Test01と同じです

JS（JavaScript）

import ReactDOM from 'https://esm.sh/react-dom@18.2.0'
import React, { useRef, useEffect, Suspense } from 'https://esm.sh/react@18.2.0'
import { Canvas, useFrame } from 'https://esm.sh/@react-three/fiber@8.16.1'
import { Html, useProgress, useGLTF, useAnimations } from 'https://esm.sh/@react-three/drei@9.105.4'

const ModelPath = 'https://rawcdn.githack.com/mrdoob/three.js/36f9f34752a985359e2556c68a52234436cefdfa/examples/models/gltf/LittlestTokyo.glb'

const Loader = () => {
  const { progress } = useProgress()
  return (
    <Html center>
      {progress} % loaded
    </Html>
  )
}

const Model = (props) => {
  const group = useRef()

  const gltf = useGLTF(ModelPath)

  const { actions } = useAnimations(gltf.animations, group)

  useEffect(() => {
    //console.log(actions) // find out the name of your action
    actions['Take 001'].play()
  })

  useFrame((state) => {
    //gltf.scene.rotation.x += 0.01
    gltf.scene.rotation.x = state.mouse.y * -2.5
    gltf.scene.rotation.y = state.mouse.x * 7.5
    //gltf.scene.rotation.z = (state.mouse.x + state.mouse.y) / 2  * 5
  }, [])

  return (
    <>
      <group ref={group} dispose={null}>
        <group scale={props.scale}>
          <primitive object={gltf.scene} position={props.position} rotation={props.rotation} scale={props.scale} />
        </group>
      </group>
    </>
  )



}

const App = () => {

  return (

    <Canvas>

    <ambientLight intensity={Math.PI / 2} />
    <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} decay={0} intensity={Math.PI} />
    <pointLight position={[-10, -10, -10]} decay={0} intensity={Math.PI} />

    <Suspense fallback={<Loader />}>
      <Model position={[0, 0, 0]} rotation={[0, 0, 0]} scale={0.09} />
    </Suspense>

    </Canvas>

  )

}

ReactDOM.render(
  <App/>,
  document.getElementById("root")
);

前に自分で作成した以下のサイトの記録を参考にして作成してみました
CodeSandboxでReact Three Fiber実験その５　glTF 3Dモデルアニメーション切り替え表示 > React Three Fiber Practice36 glTF Model Animation08

React Three Fiber 8.16.1 glTF Animation Test09

HTML　Test01と同じです

CSS　Test01と同じです

JS（JavaScript）

import ReactDOM from 'https://esm.sh/react-dom@18.2.0'
import React, { useRef, useEffect, Suspense } from 'https://esm.sh/react@18.2.0'
import { Canvas, useFrame } from 'https://esm.sh/@react-three/fiber@8.16.1'
import { Html, useProgress, useGLTF, useAnimations } from 'https://esm.sh/@react-three/drei@9.105.4'

const ModelPath = 'https://rawcdn.githack.com/BabylonJS/Exporters/422493778d6ffbc2980e83e46eb94729bbeada0c/Maya/Samples/glTF%202.0/T-Rex/trex_running.gltf'

const Loader = () => {
  const { progress } = useProgress()
  return (
    <Html center>
      {progress} % loaded
    </Html>
  )
}

const Model = (props) => {
  const group = useRef()

  const gltf = useGLTF(ModelPath)

  const { actions } = useAnimations(gltf.animations, group)

  useEffect(() => {
    //console.log(actions) // find out the name of your action
    actions['animation_0'].play()
  })

  useFrame((state) => {
    //gltf.scene.rotation.x += 0.01
    gltf.scene.rotation.x = state.mouse.y * -2.5
    gltf.scene.rotation.y = state.mouse.x * 7.5
    //gltf.scene.rotation.z = (state.mouse.x + state.mouse.y) / 2  * 5
  }, [])

  return (
    <>
      <group ref={group} dispose={null}>
        <group scale={props.scale}>
          <primitive object={gltf.scene} position={props.position} rotation={props.rotation} scale={props.scale} />
        </group>
      </group>
    </>
  )



}

const App = () => {

  return (

    <Canvas>

    <ambientLight intensity={Math.PI / 2} />
    <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} decay={0} intensity={Math.PI} />
    <pointLight position={[-10, -10, -10]} decay={0} intensity={Math.PI} />

    <Suspense fallback={<Loader />}>
      <Model position={[0, -20, -10]} rotation={[0, 0, 0]} scale={0.09} />
    </Suspense>

    </Canvas>

  )

}

ReactDOM.render(
  <App/>,
  document.getElementById("root")
);

前に自分で作成した以下のサイトの記録を参考にして作成してみました
Three.js r110でglTF形式の3Dモデルアニメーションを表示するCodePenへのリンク集② > Three.js r110でglTF 3Dモデルのアニメーション表示その13

次回

この記事が気に入ったらサポートをしてみませんか？

CodePenでesm.shでお手軽にReact Three Fiberを使用してみるテスト３ 3Dモデルアニメーション表示

概要

React Three Fiber 8.16.1 glTF Animation Test01

React Three Fiber 8.16.1 glTF Animation Test02

React Three Fiber 8.16.1 glTF Animation Test03

React Three Fiber 8.16.1 glTF Animation Test04

React Three Fiber 8.16.1 glTF Animation Test05

React Three Fiber 8.16.1 glTF Animation Test06

React Three Fiber 8.16.1 glTF Animation Test07

React Three Fiber 8.16.1 glTF Animation Test08

React Three Fiber 8.16.1 glTF Animation Test09

次回

CodePenでesm.shでお手軽にReact Three Fiberを使用してみるテスト３　3Dモデルアニメーション表示