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

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

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

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

受付中

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

orio12345123
orio12345123

総合スコア0

JavaScript

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

1回答

0評価

0クリップ

1031閲覧

投稿2021/11/08 14:56

編集2022/01/12 10:55

前提・実現したいこと

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

}

試したこと

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

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

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

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

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

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

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