glb形式のモデルをテクスチャが反映された状態でthree.js表示したい

Question

### 前提・実現したいこと
modoでつくったモデルをglb形式で書き出したところまではテクスチャがついていたのですが、
three.jsで表示するとテクスチャが反映されていないのか真っ黒になってしまいます。
モデルは空間に表示されており
テクスチャが反映されておらず、黒いだけでです。

テクスチャを反映させたいです。

MAMPで表示させています。

コードはDWを使用しております。


![イメージ説明](668744a56832bc31528872048dedc2dd.png)

こちらは表示結果になります。


ソースコード
// JavaScript Document

window.addEventListener('load', init);
 
function init() {
    // レンダラーを作成
    const renderer = new THREE.WebGLRenderer({
        canvas: document.querySelector('#canvas'),
        antialias: true
    });
    // シーンを作成
    const scene = new THREE.Scene();
 
    // カメラを作成
    const camera = new THREE.PerspectiveCamera(45, 1);
    camera.fov = 60;
    camera.position.set(0, 0, 1000);
 
    // Load GLTF or GLB
    const loader = new THREE.GLTFLoader();
    const url = './img/signal.glb';
 
    let model = null;
    loader.load(
        url,
        function (gltf) {
            model = gltf.scene;
            model.scale.set(100.0, 100.0, 100.0);
            model.position.set(0, 0, 0);
            //回転の調整
            //model.rotation.y = THREE.Math.DEG2RAD * -45;
            scene.add(model);
        },
        function (error) {
            console.log('An error happened');
        }
    );
    //テクスチャをガンマ補正
    renderer.gammaOutput = true;
    renderer.gammaFactor = 2.2;
 
 
    // ライト追加
    hemisphereLight = new THREE.HemisphereLight(0xffffff, 0x4169e1, 1.8);
    scene.add(hemisphereLight);
 
    // 初回実行
    tick();
    onResize();
 
    // リサイズイベント発生で実行
    window.addEventListener('resize', onResize);
 
    function onResize() {
        // サイズを取得
        const w = window.innerWidth;
        const h = window.innerHeight;
        // 描画サイズ
        renderer.setSize(w, h);
        // ピクセル比
        renderer.setPixelRatio(window.devicePixelRatio);
        // 空間の背景色　//0xから始まる16進数の色コード
        renderer.setClearColor(0xe4f8ec);
 
        // カメラのアスペクト比を正す
        camera.aspect = w / h;
        camera.updateProjectionMatrix();
        console.log('h' + h + 'h' + h);
 
        // レンダリング
        renderer.render(scene, camera);
    }
 
    function tick() {
        requestAnimationFrame(tick);
        //回転
        if (model) {
            model.rotation.y += 0.05;
        }
        renderer.render(scene, camera);
    }
 
}

### 試したこと

ガンマ値やひかりのあかるさは調整してみました。

Answer

上記の情報から原因特定が難しいですが（私の経験値も少ないのですが）、
ライトの変数が const や let で宣言されていないのが気になりました。
（変数宣言が原因だとしたらそもそもエラーとなり tick 関数が呼び出されず、何も描画されないはずなので変数宣言が原因ではないかも）
> hemisphereLight = new THREE.HemisphereLight(0xffffff, 0x4169e1, 1.8);
scene.add(hemisphereLight);


あと、別のライトの種類も試してみてください（ポイントライトやディレクショナルライト等）。

また、念の為、書き出した glb ファイルを下記のサイトにドラッグアンドドロップして、テクスチャが反映されるかどうか確認してみてください。下記サイトでテクスチャが反映されていなければ、glb ファイルの書き出し設定に問題があるかもしれません。
[glTF_viewer](https://gltf-viewer.donmccurdy.com/)

前提・実現したいこと

試したこと

関連した質問