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

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

新規登録して質問してみよう
ただいま回答率
85.48%
Three.js

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

Q&A

0回答

3772閲覧

Three.jsで複数Textureファイルを正しくOBJ形式モデルに関連つけられない。

zero1962

総合スコア8

Three.js

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

0グッド

0クリップ

投稿2016/11/23 06:39

###前提・実現したいこと
複数Textureファイルを持つVRMLモデルをOBJ形式でThree.jsのOBJLoader/MTLLoader
を使って3Dモデルを表示させたい。

以下のファイル構成のVRMLは正しく表示できる。
rv6a.wrl
prop.png
rv6a_Top_tpl.png
rv6a_side.png

BlenderでImport/Exportし以下を生成した。
rv6a.mtl
rv6a.obj

rv6a.mtlで示されるTextureファイルとShapeを正しく関連つける方法を知りたいです。

###発生している問題・エラーメッセージ

一つのTextureファイルの情報は正しい位置に表示されるが、他のTextureファイルは
正しい位置に関連つけられない。

以下のrv6a.mtlに示される部位とTextureファイルが関連つかない。
また、Textureファイル内の画像位置とShapeの関連がわからない?

Blender MTL File: 'None'

Material Count: 39

newmtl Shape
Ns 96.078431
Ka 0.000000 0.000000 0.000000
Kd 0.800000 0.800000 0.800000
Ks 0.000500 0.000500 0.000500
Ni 1.000000
d 0.0
illum 2
map_Kd prop.png
map_d prop.png

newmtl Shape.001
Ns 96.078431
Ka 0.000000 0.000000 0.000000
Kd 0.800000 0.800000 0.800000
Ks 0.000500 0.000500 0.000500
Ni 1.000000
d 0.0
illum 2
map_Kd prop.png
map_d prop.png

newmtl Shape.002
Ns 96.078431
Ka 0.000000 0.000000 0.000000
Kd 0.800000 0.800000 0.800000
Ks 0.161000 0.161000 0.161000
Ni 1.000000
d 1.000000
illum 2
map_Kd prop.png
map_d prop.png

newmtl Shape.003
Ns 96.078431
Ka 0.000000 0.000000 0.000000
Kd 0.800000 0.800000 0.800000
Ks 0.161000 0.161000 0.161000
Ni 1.000000
d 1.000000
illum 2
map_Kd rv6a_Top_tpl.png

エラーメッセージ
とくにありません。

###該当のソースコード

// RV-6A
var manager = new THREE.LoadingManager();
manager.onProgress = function ( item, loaded, total ) {
console.log( item, loaded, total );
};
var tex = new THREE.Texture();
var texloader = new THREE.ImageLoader( manager );
texloader.load( 'mmd/rv6a.png', function ( image ) {
tex.image = image;
tex.needsUpdate = true;
} );
mtlLoader.load( "mmd/rv6a.mtl", function( materials ) {
materials.preload();
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials( materials );
objLoader.load( "mmd/rv6a.obj", function ( object ) {
object.scale.set( 1, 1, 1 );
object.traverse( function ( child ) {
if ( child instanceof THREE.Mesh ) {
child.material.map = tex;
}
} );
mesh = object;
meshShadow = new THREE.ShadowMesh( mesh );
scene.add( mesh );
scene.add( meshShadow );
}, onProgress, onError );
});

###試したこと
とりあえず上記の3つのpngを組み合わせて1つにした。
rv6a.png
上記のソースコードで一応rv6a.pngは、rv6a.objに張り付いたが、
rv6a_Top_tpl.pngを優先した場合、rv6a_side.pngが正しい位置に表示できない。

###補足情報(言語/FW/ツール等のバージョンなど)
Three.jp r77

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問