< 背景 >
javascript、three.js初心者でございます。
blenderにて出力したモデル(glbファイル)をthree.jsで取り込みブラウザ上での表示を試みています。
< 問題 >
下記コードでglb形式モデルの取り込み、ウェブ上に表示させようとしたのですが
灰色の画面のみ表示されます。cloud9を使用しています。
どこに原因があるのか大まかに把握する為
three.js内で作成したmeshは表示させる事ができました。
ので、glb取り込みのパートのどこかに問題があるのかなと思っています。
コードを丸々投げる乱暴な質問で大変恐縮なのですが
問題点わかりましたらご教授いただきたく存じます。
HTML
1 2<!DOCTYPE html> 3<html lang = "ja"> 4<head> 5 <meta charset="utf-8"> 6 <title>meadolBox-3d</title> 7</head> 8<body> 9 <div id = "stage"></div> 10 <script src = "box-3d.js" type = "module"></script> 11</body> 12</html> 13
javascript
1 2import {GLTFLoader} from './GLTFLoader.js'; 3 4import { 5 Scene, 6 PerspectiveCamera, 7 MeshBasicMaterial, 8 AmbientLight, 9} from './three.module.js'; 10 11function init(){ 12 13 //scene設置 14 var scene = new Scene(); 15 16 //camera設置 17 var camera = new PerspectiveCamera(45,window.innerWidth / window.innerHeight,1,1000); 18 camera.position.set(10, 10, 10); 19 camera.lookAt(scene.position); 20 21 //renderer設置 22 var renderer = new WebGLRenderer(); 23 renderer.setClearColor(0xEEEEEE); 24 renderer.setSize(window.innerWidth, window.innerHeight); 25 26 27 //glbインポート 28 var gltfLoader = new GLTFLoader(); 29 let model = null; 30 gltfLoader.load('box.glb',function(gltf){ 31 model = gltf.scene; 32 model.scale.set(2,2,2); 33 model.position.set(0,0,0); 34 scene.add(model); 35 }); 36 37 //環境光設置 38 var light = new AmbientLight(0xFFFFFF, 3.0); 39 scene.add(light); 40 41 document.getElementById('stage').appendChild(renderer.domElement); 42 43 renderer.render(scene, camera); 44 45 } 46 47 window.onload = init;
<フォルダの中身>
フォルダ
| box.glb
| index.html
| box-3d.js
| three.module.js
| GLTFLoader.js
あなたの回答
tips
プレビュー