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

Question

前提・実現したいこと

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);
}

}

試したこと

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

Comments

[cx20]

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

[orio12345123]

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

[cx20]

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

[cx20]

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

[cx20]

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

[orio12345123]

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]

テクスチャの読み込みに関するエラーは出てなさそうですね。。

> 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 メソッドの３番目の引数にある function は、onProgress なので、進捗表示用の function かと思います。
エラーをハンドリングするには、４番目の function を用意する必要があるかと思います。

実際にモデルを確認してみないと何とも言えないですが、
・使用しているライブラリのバージョン（three.jsのバージョン）は何か？
・他のビューアでの表示結果に問題はないか？（エラー等、出ていないか？）
・何か特殊な拡張が使われていないか？
など、を教えてもらうと少し切り分けが出来るかもしれません。

以下は、他のライブラリによる glTF Viewer になります。

■ Babylon.js
https://sandbox.babylonjs.com/
■ PlayCanvas
https://playcanvas.com/viewer

[orio12345123]

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

[cx20]

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

[cx20]

あぁ、今、コメントに気が付きました。

> modoで書き出したものだとうまく表示されず
> Blenderで書き出したものはうまくいくといった結果がでました

ということであれば、やはりmodoの書き出しになんらかの問題がありそうですね。。
modo は使ったことが無いのですが、書き出し時にログが書かれるようなので、調べるのであれば、そのあたりを確認してみる、とかでしょうか？
http://modogroup.jp/tipsblog/io/gltf/

[orio12345123]

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

Answer 1

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

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

scene.add(hemisphereLight);

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

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

Comments

[orio12345123]

ビュアーでもテクスチャが反映されて表示されていたので
書き出しまでは問題点がないとおもっていましたが、

modoで書き出したものだとうまく表示されず
Blenderで書き出したものはうまくいくといった結果がでました

modoの書き出しの時点で何かしらの問題があるといった
結果に落ち着き
Blenderでモデルを作り直すことにしました。

書き出しの設定も少し見直してみようと
思っています