質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
Three.js

Three.jsはWebGLをサポートしているJavaScriptの3D描画用ライブラリです。

解決済

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

gubi.m
gubi.m

総合スコア16

Three.js

Three.jsはWebGLをサポートしているJavaScriptの3D描画用ライブラリです。

1回答

0グッド

0クリップ

655閲覧

投稿2022/08/25 13:44

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> ```

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答1

0

ベストアンサー

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

js

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

ということではないでしょうか?(試しては無いです)

投稿2022/08/28 05:14

cx20

総合スコア4297

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

gubi.m

2022/08/28 12:17

urls[i]でうまくいきました!ありがとうございます!

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Three.js

Three.jsはWebGLをサポートしているJavaScriptの3D描画用ライブラリです。