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

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

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

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

Q&A

1回答

4309閲覧

glb形式のモデルをテクスチャが反映された状態でthree.js表示したい

orio12345123

総合スコア0

JavaScript

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

0グッド

0クリップ

投稿2021/11/08 14:56

編集2021/11/08 15:39

前提・実現したいこと

modoでつくったモデルをglb形式で書き出したところまではテクスチャがついていたのですが、
three.jsで表示するとテクスチャが反映されていないのか真っ黒になってしまいます。
モデルは空間に表示されており
テクスチャが反映されておらず、黒いだけでです。

テクスチャを反映させたいです。

MAMPで表示させています。

コードはDWを使用しております。

イメージ説明

こちらは表示結果になります。

ソースコード
// JavaScript Document

window.addEventListener('load', init);

function init() {
// レンダラーを作成
const renderer = new THREE.WebGLRenderer({
canvas: document.querySelector('#canvas'),
antialias: true
});
// シーンを作成
const scene = new THREE.Scene();

// カメラを作成 const camera = new THREE.PerspectiveCamera(45, 1); camera.fov = 60; camera.position.set(0, 0, 1000); // Load GLTF or GLB const loader = new THREE.GLTFLoader(); const url = './img/signal.glb'; let model = null; loader.load( url, function (gltf) { model = gltf.scene; model.scale.set(100.0, 100.0, 100.0); model.position.set(0, 0, 0); //回転の調整 //model.rotation.y = THREE.Math.DEG2RAD * -45; scene.add(model); }, function (error) { console.log('An error happened'); } ); //テクスチャをガンマ補正 renderer.gammaOutput = true; renderer.gammaFactor = 2.2; // ライト追加 hemisphereLight = new THREE.HemisphereLight(0xffffff, 0x4169e1, 1.8); scene.add(hemisphereLight); // 初回実行 tick(); onResize(); // リサイズイベント発生で実行 window.addEventListener('resize', onResize); function onResize() { // サイズを取得 const w = window.innerWidth; const h = window.innerHeight; // 描画サイズ renderer.setSize(w, h); // ピクセル比 renderer.setPixelRatio(window.devicePixelRatio); // 空間の背景色 //0xから始まる16進数の色コード renderer.setClearColor(0xe4f8ec); // カメラのアスペクト比を正す camera.aspect = w / h; camera.updateProjectionMatrix(); console.log('h' + h + 'h' + h); // レンダリング renderer.render(scene, camera); } function tick() { requestAnimationFrame(tick); //回転 if (model) { model.rotation.y += 0.05; } renderer.render(scene, camera); }

}

試したこと

ガンマ値やひかりのあかるさは調整してみました。

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

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

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

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

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

cx20

2021/11/08 15:04 編集

glTFファイルのオンラインビューア(three.jsベースのビューア)があるので、こちらで表示できるか確認してもらえますか? https://gltf-viewer.donmccurdy.com/
orio12345123

2021/11/08 15:07

はい。 確認してまいりました。 ここで確認したところ自分がつけた色はついていたため 書き出しまではうまくいっていると感じます。
cx20

2021/11/08 15:23

サンプルコード自体は問題なさそうに見えます。(手持ちのサンプルモデルは問題なくテクスチャ付きで表示されることを確認しました。) 可能であればモデルを連携してもらえますか?こちらで確認してみたいと思います。
cx20

2021/11/08 15:25

あと、質問文に表示結果の画像を貼り付けてもらえると、多少状態が確認できるかと思います。
cx20

2021/11/08 15:43

画像貼り付けありがとうございます。確かにテクスチャ表示されていないようですね。 ちなみにブラウザのコンソール(F12画面)に何かエラー等は出てないでしょうか?
orio12345123

2021/11/08 20:39

An error happened script.js:35 のエラーは 34 function (error) { 35 console.log('An error happened'); この部分。 これと h946h946 script.js:68 このエラー 65 // カメラのアスペクト比を正す camera.aspect = w / h; camera.updateProjectionMatrix(); 68 console.log('h' + h + 'h' + h); この部分 THREE.WebGLRenderer: .gammaOutput has been removed. Set WebGLRenderer.outputEncoding instead. three.min.js:6 これらがエラーとして表示されました 一番したもののに関しては何かよくわかりませんでした。 返信遅くなってしまい申し訳ありません。 お時間取れる時にご教授いただけるとありがたいです。
cx20

2021/11/09 13:43 編集

テクスチャの読み込みに関するエラーは出てなさそうですね。。 > 34 function (error) { > 35 console.log('An error happened'); ここは使い方が間違っているようです。(ただ、テクスチャの件とは関係ないと思いますが・・) https://threejs.org/docs/#examples/en/loaders/GLTFLoader > .load ( url : String, onLoad : Function, onProgress : Function, onError : Function ) : null load メソッドの3番目の引数にある function は、onProgress なので、進捗表示用の function かと思います。 エラーをハンドリングするには、4番目の function を用意する必要があるかと思います。 実際にモデルを確認してみないと何とも言えないですが、 ・使用しているライブラリのバージョン(three.jsのバージョン)は何か? ・他のビューアでの表示結果に問題はないか?(エラー等、出ていないか?) ・何か特殊な拡張が使われていないか? など、を教えてもらうと少し切り分けが出来るかもしれません。 以下は、他のライブラリによる glTF Viewer になります。 ■ Babylon.js https://sandbox.babylonjs.com/ ■ PlayCanvas https://playcanvas.com/viewer
orio12345123

2021/11/09 15:13

いろいろと試してみたところ Blenderで書き出したものではうまくテクスチャがつき、 modoで書き出したものではつかないといった結果が出ました。 なぜ違いが出るのかわかりませんが やはり問題は書き出しの部分だったようです。 コードには問題がないようでした。
cx20

2021/11/09 15:32

> modoで書き出したものではつかないといった結果が出ました。 ちょっと混乱しているのですが、 modo で書き出したモデルの場合、下記のオンラインビューアでテクスチャは表示される、ということで合っていますか? https://gltf-viewer.donmccurdy.com/
cx20

2021/11/09 15:44 編集

あぁ、今、コメントに気が付きました。 > modoで書き出したものだとうまく表示されず > Blenderで書き出したものはうまくいくといった結果がでました ということであれば、やはりmodoの書き出しになんらかの問題がありそうですね。。 modo は使ったことが無いのですが、書き出し時にログが書かれるようなので、調べるのであれば、そのあたりを確認してみる、とかでしょうか? http://modogroup.jp/tipsblog/io/gltf/
orio12345123

2021/11/09 15:51

ここで表示する際には何も問題なく表示されました。 時間をかけて調べてみようと思います 本当にありがとうございます。
guest

回答1

0

上記の情報から原因特定が難しいですが(私の経験値も少ないのですが)、
ライトの変数が const や let で宣言されていないのが気になりました。
(変数宣言が原因だとしたらそもそもエラーとなり tick 関数が呼び出されず、何も描画されないはずなので変数宣言が原因ではないかも)

hemisphereLight = new THREE.HemisphereLight(0xffffff, 0x4169e1, 1.8);

scene.add(hemisphereLight);

あと、別のライトの種類も試してみてください(ポイントライトやディレクショナルライト等)。

また、念の為、書き出した glb ファイルを下記のサイトにドラッグアンドドロップして、テクスチャが反映されるかどうか確認してみてください。下記サイトでテクスチャが反映されていなければ、glb ファイルの書き出し設定に問題があるかもしれません。
glTF_viewer

投稿2021/11/09 14:42

編集2021/11/09 14:44
hirotry

総合スコア53

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

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

orio12345123

2021/11/09 15:18

ビュアーでもテクスチャが反映されて表示されていたので 書き出しまでは問題点がないとおもっていましたが、 modoで書き出したものだとうまく表示されず Blenderで書き出したものはうまくいくといった結果がでました modoの書き出しの時点で何かしらの問題があるといった 結果に落ち着き Blenderでモデルを作り直すことにしました。 書き出しの設定も少し見直してみようと 思っています
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

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

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

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

ただいまの回答率
85.44%

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

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

質問する

関連した質問