Q&A
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/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件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
2022/08/28 12:17