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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Cloud9

Cloud9は、クラウドからのプログラミングが可能になるWebサービス。IDEとしての機能が搭載されており、GitHubやHerokuなど他ツールとの連携も可能です。ブラウザ上で動くため、デバイスに関係なく開発環境を準備できます。

Three.js

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Blender

Blenderとは、オープンソースの3DCGソフトウェアです。フリーでありながら、3Dモデル作成、レンダリング、アニメーション、コンポジットなどのハイエンドに匹敵する高い機能を持ち、さらにゲームエンジンも搭載しています。

Q&A

0回答

588閲覧

< three.js > glbファイル取り込みの方法を教えてください。

bro.

総合スコア1

Cloud9

Cloud9は、クラウドからのプログラミングが可能になるWebサービス。IDEとしての機能が搭載されており、GitHubやHerokuなど他ツールとの連携も可能です。ブラウザ上で動くため、デバイスに関係なく開発環境を準備できます。

Three.js

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Blender

Blenderとは、オープンソースの3DCGソフトウェアです。フリーでありながら、3Dモデル作成、レンダリング、アニメーション、コンポジットなどのハイエンドに匹敵する高い機能を持ち、さらにゲームエンジンも搭載しています。

0グッド

0クリップ

投稿2021/04/06 10:56

編集2022/01/12 10:55

< 背景 >
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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問