CodePenでesm.shでお手軽にReact Three Fiberを使用してみるテスト２　3Dモデル表示

2024年4月21日 10:32

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

概要

　githack経由でglTFファイル形式3Dモデルを読み込んで3Dモデルを表示させています。　読み込んでいるglTFファイルには .glb と .gltf の2種類の拡張子があります。　また、前回からReact Three Fiberのバージョンを、使用するreact-three/dreiのバージョンに合わせて変更しています。　
　
　Test01からTest09までのコードは基本的には全て同じコードで、表示させる3Dモデルによって読み込むglTFファイルを修正しているだけです。　他には、3Dモデルの位置・サイズ、3Dモデルのマウス連動の回転の仕方、といったあたりをコードごとに微調整しているぐらいです。

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

基本的には上記にも書いたように、使用するreact-three/dreiのバージョン
react-three/drei@9.105.4
を基準に、それが動くように
react-three/fiber@8.16.1
を選定しています。　後はthree等、前回と同じバージョンとなっています。

import ReactDOM from 'https://esm.sh/react-dom@18.2.0'
import React, { useRef, useState, 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'

また、3Dモデルの読み込みのために以下のサイトを参考にさせていただきました。

・Loading Models

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

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

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

React Three Fiber 8.16.1 glTF Loader Test01

HTML

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

CSS

* {
  box-sizing: border-box;
}

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

body {
  background: #f0f0f0;
}

JS（JavaScript）

import ReactDOM from 'https://esm.sh/react-dom@18.2.0'
import React, { useRef, useState, 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'

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/2CylinderEngine/glTF-Binary/2CylinderEngine.glb'
  )

  useFrame((state) => {
    gltf.scene.rotation.x += 0.01
    //gltf.scene.rotation.x = state.mouse.x * 5
    //gltf.scene.rotation.y = state.mouse.y * 5
    //gltf.scene.rotation.z = (state.mouse.x + state.mouse.y) / 2  * 5
  }, [])
  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, 0.3, 0]} scale={0.009} />
    </Suspense>

    </Canvas>

  )

}

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

前に自分で作成した以下のサイトの記録を参考にして作成してみました
CodeSandboxでReact Three Fiber実験その３　glTF 3Dモデル表示 > React Three Fiber Practice17 glTF Model03

React Three Fiber 8.16.1 glTF Loader Test02

HTML　Test01と同じです

CSS　Test01と同じです

JS（JavaScript）


import ReactDOM from 'https://esm.sh/react-dom@18.2.0'
import React, { useRef, useState, 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'

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/DamagedHelmet/glTF-Binary/DamagedHelmet.glb'
  )

  useFrame((state) => {
    //gltf.scene.rotation.x += 0.01
    gltf.scene.rotation.x = state.mouse.x * 5
    gltf.scene.rotation.y = state.mouse.y * 5
    gltf.scene.rotation.z = (state.mouse.x + state.mouse.y) / 2  * 5
  }, [])
  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, 0.8, 0]} scale={2.5} />
    </Suspense>

    </Canvas>

  )

}

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

前に自分で作成した以下のサイトの記録を参考にして作成してみました
CodeSandboxでReact Three Fiber実験その３　glTF 3Dモデル表示 > React Three Fiber Practice18 glTF Model04

React Three Fiber 8.16.1 glTF Loader Test03

HTML　Test01と同じです

CSS　Test01と同じです

JS（JavaScript）

import ReactDOM from 'https://esm.sh/react-dom@18.2.0'
import React, { useRef, useState, 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'

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/SheenChair/glTF-Binary/SheenChair.glb'
  )

  useFrame((state) => {
    //gltf.scene.rotation.x += 0.01
    gltf.scene.rotation.x = state.mouse.x * 5
    gltf.scene.rotation.y = state.mouse.y * 5
    //gltf.scene.rotation.z = (state.mouse.x + state.mouse.y) / 2  * 5
  }, [])
  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={5.5} />
    </Suspense>

    </Canvas>

  )

}

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

前に自分で作成した以下のサイトの記録を参考にして作成してみました
CodeSandboxでReact Three Fiber実験その３　glTF 3Dモデル表示 > React Three Fiber Practice19 glTF Model05

React Three Fiber 8.16.1 glTF Loader Test04

HTML　Test01と同じです

CSS　Test01と同じです

JS（JavaScript）

import ReactDOM from 'https://esm.sh/react-dom@18.2.0'
import React, { useRef, useState, 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'

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/Buggy/glTF-Binary/Buggy.glb'
  )

  useFrame((state) => {
    //gltf.scene.rotation.x += 0.01
    gltf.scene.rotation.x = state.mouse.y * 5
    gltf.scene.rotation.y = state.mouse.x * 5
    //gltf.scene.rotation.z = (state.mouse.x + state.mouse.y) / 2  * 5
  }, [])
  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={[-1.2, 0, -3.5]} scale={0.05} />
    </Suspense>

    </Canvas>

  )

}

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

前に自分で作成した以下のサイトの記録を参考にして作成してみました
CodeSandboxでReact Three Fiber実験その３　glTF 3Dモデル表示 > React Three Fiber Practice20 glTF Model06

React Three Fiber 8.16.1 glTF Loader Test05

HTML　Test01と同じです

CSS　Test01と同じです

JS（JavaScript）

import ReactDOM from 'https://esm.sh/react-dom@18.2.0'
import React, { useRef, useState, 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'

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/Avocado/glTF-Binary/Avocado.glb'
  )

  useFrame((state) => {
    //gltf.scene.rotation.x += 0.01
    gltf.scene.rotation.x = state.mouse.y * 5
    gltf.scene.rotation.y = state.mouse.x * 5
    //gltf.scene.rotation.z = (state.mouse.x + state.mouse.y) / 2  * 5
  }, [])
  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={70} />
    </Suspense>

    </Canvas>

  )

}

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

前に自分で作成した以下のサイトの記録を参考にして作成してみました
CodeSandboxでReact Three Fiber実験その３　glTF 3Dモデル表示 > React Three Fiber Practice21 glTF Model07

React Three Fiber 8.16.1 glTF Loader Test06

HTML　Test01と同じです

CSS　Test01と同じです

JS（JavaScript）

import ReactDOM from 'https://esm.sh/react-dom@18.2.0'
import React, { useRef, useState, 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'

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/Lantern/glTF-Binary/Lantern.glb'
  )

  useFrame((state) => {
    //gltf.scene.rotation.x += 0.01
    gltf.scene.rotation.x = state.mouse.y * 5
    gltf.scene.rotation.y = state.mouse.x * 5
    //gltf.scene.rotation.z = (state.mouse.x + state.mouse.y) / 2  * 5
  }, [])
  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={0.18} />
    </Suspense>

    </Canvas>

  )

}

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

前に自分で作成した以下のサイトの記録を参考にして作成してみました
CodeSandboxでReact Three Fiber実験その３　glTF 3Dモデル表示 > React Three Fiber Practice22 glTF Model08

React Three Fiber 8.16.1 glTF Loader Test07

HTML　Test01と同じです

CSS　Test01と同じです

JS（JavaScript）

import ReactDOM from 'https://esm.sh/react-dom@18.2.0'
import React, { useRef, useState, 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'

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/BoomBox/glTF-Binary/BoomBox.glb'
  )

  useFrame((state) => {
    //gltf.scene.rotation.x += 0.01
    gltf.scene.rotation.x = state.mouse.y * 5
    gltf.scene.rotation.y = state.mouse.x * 5
    //gltf.scene.rotation.z = (state.mouse.x + state.mouse.y) / 2  * 5
  }, [])
  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={200} />
    </Suspense>

    </Canvas>

  )

}

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

前に自分で作成した以下のサイトの記録を参考にして作成してみました
CodeSandboxでReact Three Fiber実験その３　glTF 3Dモデル表示 > React Three Fiber Practice23 glTF Model09

React Three Fiber 8.16.1 glTF Loader Test08

HTML　Test01と同じです

CSS　Test01と同じです

JS（JavaScript）

import ReactDOM from 'https://esm.sh/react-dom@18.2.0'
import React, { useRef, useState, 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'

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/Corset/glTF-Binary/Corset.glb'
  )

  useFrame((state) => {
    //gltf.scene.rotation.x += 0.01
    gltf.scene.rotation.x = state.mouse.y * 5
    gltf.scene.rotation.y = state.mouse.x * 5
    //gltf.scene.rotation.z = (state.mouse.x + state.mouse.y) / 2  * 5
  }, [])
  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={70} />
    </Suspense>

    </Canvas>

  )

}

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

前に自分で作成した以下のサイトの記録を参考にして作成してみました
CodeSandboxでReact Three Fiber実験その３　glTF 3Dモデル表示 > React Three Fiber Practice24 glTF Model10

React Three Fiber 8.16.1 glTF Loader Test09

HTML　Test01と同じです

CSS　Test01と同じです

JS（JavaScript）

 import ReactDOM from 'https://esm.sh/react-dom@18.2.0'
import React, { useRef, useState, 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'

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

const Model = (props) => {
  const gltf = useLoader(
    GLTFLoader,
    'https://rawcdn.githack.com/siouxcitizen/3DModel/a1c2e47550ca20de421f6d779229f66efab07830/yuusha.gltf'
    //'https://cdn.jsdelivr.net/gh/siouxcitizen/3DModel@a1c2e47550ca20de421f6d779229f66efab07830/yuusha.gltf'
  )

  useFrame((state) => {
    //gltf.scene.rotation.x += 0.01
    gltf.scene.rotation.x = state.mouse.y * -1.5
    gltf.scene.rotation.y = state.mouse.x * 5
    //gltf.scene.rotation.z = (state.mouse.x + state.mouse.y) / 2  * 5
  }, [])
  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モデル表示テスト
・Three.js .glTF 3D Model Display
・Three.js r102 .glTF 3D Model Display

次回

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

CodePenでesm.shでお手軽にReact Three Fiberを使用してみるテスト２ 3Dモデル表示

概要

React Three Fiber 8.16.1 glTF Loader Test01

React Three Fiber 8.16.1 glTF Loader Test02

React Three Fiber 8.16.1 glTF Loader Test03

React Three Fiber 8.16.1 glTF Loader Test04

React Three Fiber 8.16.1 glTF Loader Test05

React Three Fiber 8.16.1 glTF Loader Test06

React Three Fiber 8.16.1 glTF Loader Test07

React Three Fiber 8.16.1 glTF Loader Test08

React Three Fiber 8.16.1 glTF Loader Test09

次回

CodePenでesm.shでお手軽にReact Three Fiberを使用してみるテスト２　3Dモデル表示