ThreeJSでblenderのファイル(.glb)をReact上で読み込めない

Question

前提

React上でblenderのファイル（.glb）をローディングできているのですがブラウザ上で表示されません。

実現したいこと

・ブラウザにblenderのファイル（.glb）を表示させたい。

該当のソースコード

以下のコードをそのまま読み込んでいます。

import { useEffect } from 'react';
import {
  WebGLRenderer,
  Scene,
  PerspectiveCamera,
} from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';

const Three: React.FC = () => {
  const onCanvasLoaded = (canvas: HTMLCanvasElement) => {
    if (!canvas) {
      return;
    }

    const width = window.innerWidth;
    const height = window.innerHeight;

    // init scene
    const scene = new Scene();
    const camera = new PerspectiveCamera(
      75,
      canvas.clientWidth / canvas.clientHeight,
      0.1,
      1000
    );

    const renderer = new WebGLRenderer({ canvas: canvas, antialias: true });
    renderer.setClearColor('#d2d0d0');
    renderer.setSize(width, height);

    // ここでglbファイルを読み込んで設定します。
    let model = null;
    loader.load(
      url,
      function (gltf) {
        model = gltf.scene;
        model.name = 'model_with_cloth';
        model.scale.set(400.0, 400.0, 400.0);
        model.position.set(0, -400, 0);
        scene.add(model);
        console.log(model); // ここでmodelのオブジェクトデータの中身があることを確認できました。
      },
      function (error) { 
        console.log('An error happened'); // glbがローディング完了するまではエラーになる
        console.log(error);
      }
    );

    window.addEventListener('resize', () => handleResize({ camera, renderer }));

    renderer.render(scene, camera);
  };

  // handle resize
  const handleResize = ({ camera, renderer }: any) => {
    const width = window.innerWidth;
    const height = window.innerHeight;
    camera.aspect = width / width;
    camera.updateProjectionMatrix();
    renderer.setSize(width, width);
  };
  useEffect(() => {
    return () => window.removeEventListener('resize', () => handleResize);
  });

  return <canvas ref={onCanvasLoaded} />;
};

export default Three;

略
const App = () => {
  return (
    <Suspense fallback={null}>
      <Three />
    </Suspense>
  );
};

結果としては、canvas（グレーの色にしている）のみが表示されてblenderの画像は表示されません。

試したこと

 let model = null;
    loader.load(
      url,
      function (gltf) {
        model = gltf.scene;
        model.name = 'model_with_cloth';
        model.scale.set(400.0, 400.0, 400.0);
        model.position.set(0, -400, 0);
        scene.add(gltf.scene);
        console.log(model);
      },
      function (error) { 
        console.log('An error happened'); // glbがローディング完了するまではエラーになる
        console.log(error);
      }
    );

ここの中身は色々と変えたりいじってみたのですが変わりませんでした。また３種類ほどのblenderファイルを入れ替えてみたのですが変わらずでした。

補足情報（FW/ツールのバージョンなど）

"three": "^0.139.2" を使用

Answer 1

念のため、モデルにエラーが無いかご確認下さい。
下記サイトに glTF ファイルをドラッグ＆ドロップすると表示確認が行えます。エラーがある場合、左下にエラーがある旨のメッセージが表示されます。
■ glTF Viewer
https://gltf-viewer.donmccurdy.com/

Three.js での glTF ファイルの表示については、ライトの設定が無い場合は、ライトを設定してみて下さい。

Comments

[moimoi_sushi]

このサイトとても良いですね！ちゃんと表示できるか不安だったので今度から活用します
ちなみに元のデータは表示できました...

[cx20]

モデルに問題なく、モデルが読み込めているのに表示されない、ということであれば、やはりライト周りな気がしますね。

ライトの使い方について下記の回答が参考になるかと思います。
https://discourse.threejs.org/t/trying-load-gltf-model-but-see-nothing-lights-are-added-camera-is-set-blender-react-three/13220/2