three.jsで、glbファイルの読み込みについて

Blenderで書き出したglbファイルをthree.jsで表示させたいと思っています。
ですが、添付画像のようなエラーが出てしまい、うまくいきません。

コードは複数の記事からコピーしてきているので、自分で理解できていない部分もあり、そもそもjavascriptの勉強が足りていないというのもあるのですが、
何がエラーの原因か教えていただけないでしょうか。

お手数をおかけしますが、よろしくお願いいたします。
イメージ説明

main.js

import * as THREE from "./build/three.module.js";
import { OrbitControls } from "./controls/OrbitControls.js";
import { GLTFLoader } from "./build/GLTFLoader.js";
import GUI from 'https://cdn.jsdelivr.net/npm/lil-gui@0.17/+esm';//デバッグのやつ
// import { RectAreaLightHelper } from "./helpers/RectAreaLightHelper.js";


//サイズ
const sizes = {
    width: window.innerWidth,
    height: window.innerHeight,
};

// レンダラーを作成  // ウィンドウサイズ設定
const renderer = new THREE.WebGLRenderer();
renderer.setSize(sizes.width, sizes.height);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
document.body.appendChild(renderer.domElement);


//追記

renderer.outputEncoding = THREE.GammaEncoding; // 出力エンコーディングを定義  //不要？明るくなるぽい
renderer.gammaOutput = true;//明るくなるっぽい

renderer.physicallyCorrectLights = true;
renderer.outputEncoding = THREE.sRGBEncoding;
renderer.toneMapping = THREE.ACESFilmicToneMapping;

renderer.physicallyCorrectLights = true;

renderer.outputEncoding = THREE.sRGBEncoding;
renderer.toneMapping = THREE.ACESFilmicToneMapping;

//ここまで追記


console.log(window.devicePixelRatio);
//console.log(width + ", " + height);

// シーンを作成
const scene = new THREE.Scene();
scene.background = new THREE.Color( 0x000000 ); // 背景色

// カメラを作成
//カメラ
const camera = new THREE.PerspectiveCamera(
    75,
    sizes.width / sizes.height,
    0.1,
    1000
);
camera.position.x = 0;
camera.position.y = 0;
camera.position.z = 6;
scene.add(camera);

const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;


window.addEventListener("resize", () => {
sizes.width = window.innerWidth;
sizes.height = window.innerHeight;

camera.aspect = sizes.width / sizes.height;
camera.updateProjectionMatrix();

renderer.setSize(sizes.width, sizes.height);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
});


const loader = new GLTFLoader();
const urls = [
  '/blender/skelton.glb',
  '/blender/foundation.glb',
  'blender/wagon_1.glb',
  'blender/wagon_2.glb',
  'blender/wagon_3.glb',
  'blender/wagon_4.glb',
  'blender/wagon_5.glb',
  'blender/wagon_6.glb',
  'blender/wagon_7.glb',
  'blender/wagon_8.glb'
];


// window size

//ここから25行くらい不要かも（scene.addはコメントアウトした）
let model = null;
for(let i = 0; i < urls.length; i++){
  loader.load(
    urls,
    function (gltf) {
        // model = gltf.scene;
        // // model.name = "model_with_cloth";
        // model.scale.set(100.0, 100.0, 100.0);
        // model.position.set(0, (height / 3 * -1), 0);
        //scene.add(gltf.scene);

        gltf.animations; // Array<THREE.AnimationClip>
        gltf.scene; // THREE.Group
        gltf.scenes; // Array<THREE.Group>
        gltf.cameras; // Array<THREE.Camera>
        gltf.asset; // Object


        // model["test"] = 100;
    },
    function (error) {
        console.log('An error happened');
        console.log(error);
    }
);
}


// window size


// renderer.gammaOutput = true;
// renderer.gammaFactor = 2.2;
//ここまで不要かも

// 平行光源
const light = new THREE.DirectionalLight(0xFFFFFF);
light.intensity = 1; // 光の強さ
light.position.set(3, 10, 1);
// シーンに追加
scene.add(light);


//環境光源(アンビエントライト)：すべてを均等に照らす、影のない、全体を明るくするライト
const ambient = new THREE.AmbientLight(0xffffff, 1);
scene.add(ambient); //シーンにアンビエントライトを追加

// 初回実行
tick();

function tick() {
    controls.update();

    if (model != null) {
        console.log(model);
    }
    renderer.render(scene, camera);
    requestAnimationFrame(tick);
}

```








![![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-08-25/8155abad-d0b3-48fd-96e4-50f0a5f6a185.png)](https://ddjkaamml8q8x.cloudfront.net/questions/2022-08-25/14ec6d0a-b583-4a62-ad77-9733325b3d9e.png)
index.html
```
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ThreeJs-Udemy</title>
    <link rel="stylesheet" href="style.css">
    <style>
      body{
        margin: 0;
      }
    </style>
  </head>
  <body>

    <canvas id="webgl"></canvas>
    <!-- <div id="main_canvas">
      <canvas id="canvas" width="100%" height="100%"></canvas>
    </div> -->

    <script src="main.js" type="module"></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.7/dat.gui.min.js"
      integrity="sha512-LF8ZB1iTwi4Qvkm4pekHG4a437Y9Af5ZuwbnW4GTbAWQeR2E4KW8WF+xH8b9psevV7wIlDMx1MH9YfPqgKhA/Q=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>
  </body>
</html>



```

回答1件

ベストアンサー

エラー自体は 404 Not Found となっているので、glTF ファイルが見つからない、ということかと・・
変数 urls は配列なので、

js
1for(let i = 0; i < urls.length; i++){
2  loader.load(
3    //urls,  // URL の指定に配列を渡すのは誤りと思われる
4    urls[i],  // for ループして、配列から１つづつ URL を取り出す、が正しいのでは？
5      :
6  }