/ /親メッシュに子メッシュをロードするにはどうすればよいですか？ - javascript、three.js

親メッシュに子メッシュをロードするにはどうすればよいですか？ - javascript、three.js

私は別の目のメッシュで顔のメッシュを持っています。 Blenderでは、顔は親として、目は子として定義されます。今私はthree.jsに全体をロードしようとします。これどうやってするの？

テクスチャでは問題がありますが、それは1つしか読み込めません。誰か助けてくれますか？ありがとう

var loader = new THREE.JSONLoader();
loader.load( "./three/models/JSON/Blender/DM_Face.json", addModelToScene );           //function( geometry, material ) {
//loader.load( "./three/models/JSON/Blender/DM_Eye.json", addModelToScene );

//var materials = [material1, material2];
//var meshFaceMaterial = new THREE.MeshFaceMaterial( materials );

function addModelToScene( geometry, materials ) { //sphereGeometry1, sphereMaterial1 ) {
var material = new THREE.MeshPhongMaterial({morphTargets: true, map: THREE.ImageUtils.loadTexture("./three/models/JSON/Blender/DM.fbm/RyEddie_face_1001.jpg")});
var Mouth = new THREE.MeshPhongMaterial({map: THREE.ImageUtils.loadTexture("./three/models/JSON/Blender/DM.fbm/RyEddie_mouth_1005.jpg")});

mesh = new THREE.Mesh( geometry, material, Mouth )
mesh.scale.set( 17, 13, 13 );
mesh.position.x = 0;            //Position (x = nach rechts+ links-)
mesh.position.y = -17;          //Position (y = nach oben +, unten-)
mesh.position.z = 0;            //Position (z = nach vorne +, hinten-)
scene.add( mesh )

//var sphereMaterial1 = new THREE.MeshPhongMaterial( {map: THREE.ImageUtils.loadTexture("./three/models/JSON/Blender/DM.fbm/RyEddie_eyes01_1007.jpg")});
//sphareMesh1 = new THREE.Mesh( sphereGeometry1, sphereMaterial1 )
//sphareMesh1.scale.set( 30, 30, 30 );
//sphareMesh1.position.x = 0;       //Position (x = nach rechts+ links-)
//sphareMesh1.position.y = 0;       //Position (y = nach oben +, unten-)
//sphareMesh1.position.z = 0;       //Position (z = nach vorne +, hinten-)
//scene.add( sphareMesh1 );


mixer = new THREE.AnimationMixer( mesh );
var clip = THREE.AnimationClip.CreateFromMorphTargetSequence( "test", geometry.morphTargets, 30 );
mixer.clipAction( clip ).setDuration( 6 ).play();

};

JSONファイルでは、テクスチャ素材は次のように定義されています

"materials":[{
"depthTest":true,
"transparent":false,
"depthWrite":true,
"colorSpecular":[0.5,0.5,0.5],
"DbgName":"Face",
"wireframe":false,
"visible":true,
"DbgIndex":5,
"DbgColor":61166,
"doubleSided":false,
"specularCoef":103,
"colorEmissive":[0,0,0],
"opacity":1,
"colorDiffuse":[0.8,0.8,0.8],
"shading":"phong",
"blending":1
},{
"depthTest":true,
"transparent":true,
"depthWrite":true,
"DbgName":"Eyelashes",
"wireframe":false,
"visible":true,
"DbgIndex":0,
"DbgColor":15658734,
"doubleSided":false,
"colorEmissive":[0,0,0],
"opacity":0,
"colorDiffuse":[0.0414118,0.0379608,0.0310588],
"shading":"lambert",
"blending":1
},{
"depthTest":true,
"transparent":true,
"depthWrite":true,
"colorSpecular":[0.5,0.5,0.5],
"DbgName":"EyeMoisture",
"wireframe":false,
"visible":true,
"DbgIndex":14,
"DbgColor":15658734,
"doubleSided":false,
"specularCoef":103,
"colorEmissive":[0,0,0],
"opacity":0,
"colorDiffuse":[0.8,0.8,0.8],
"shading":"phong",
"blending":1
},{
"depthTest":true,
"transparent":false,
"depthWrite":true,
"colorSpecular":[0.5,0.5,0.5],
"DbgName":"Torso",
"wireframe":false,
"visible":true,
"DbgIndex":9,
"DbgColor":15658734,
"doubleSided":false,
"specularCoef":103,
"colorEmissive":[0,0,0],
"opacity":1,
"colorDiffuse":[0.8,0.8,0.8],
"shading":"phong",
"blending":1
},{

回答：

回答№1は1

技術的に1つのメッシュを別のメッシュの親にすることはできますが、レンダラーを混乱させる可能性があります。思考を開始する方が良い Groups。

https://threejs.org/docs/#api/objects/Group

以下の簡単なコードを考えてみましょう。

var head = new THREE.Group();
loader.load("face.json", function(geometry, materials){
var mesh = new THREE.Mesh(geometry, material);
head.add(mesh);
});
loader.load("eye.json", function(geometry, materials){
var mesh = new THREE.Mesh(geometry, material);
head.add(mesh);
});
scene.add(head);

（サイドノート： Mesh コンストラクタには2つのパラメータしかありません。 ドキュメント）

ここから、 head 両方の face メッシュと eye 続くメッシュ。これは、すべての変換（位置、回転、スケール、スキュー）に適用されます。変換は、変換に含まれるすべてのメッシュにカスケードします head.

あなたは巣にすることもできます Groupモデルに階層を与えることができますが、その会話は別の質問のためのものです。

three.js r87

回答№2の場合は-1

@ TheJim01現時点ではこのように見えます。

var loader = new THREE.JSONLoader();
//var loader = new THREE.ObjectLoader();
//loader.load( "./three/models/JSON/Blender/Face.json", addModelToScene );


var head = new THREE.Group();
loader.load("./three/models/JSON/Blender/Face.json", function(geometry, materials){
var material = new THREE.MeshPhongMaterial({morphTargets: true, map: THREE.ImageUtils.loadTexture("./three/models/JSON/Blender/DM.fbm/RyEddie_face_1001.jpg")});
var mesh = new THREE.Mesh( geometry, material );
head.add( mesh );
});

loader.load("./three/models/JSON/Blender/Eyes.json", function(geometry, materials){
var material = new THREE.MeshPhongMaterial({morphTargets: true, map: THREE.ImageUtils.loadTexture("./three/models/JSON/Blender/DM.fbm/eyes_1001.jpg")});
var mesh = new THREE.Mesh(geometry, material);
head.add( mesh );
});


function addModelToScene( geometry, materials ) {

mesh = new THREE.Mesh( geometry, material )
mesh.scale.set( 13, 13, 13 );
mesh.position.x = 0;
mesh.position.y = -25;
mesh.position.z = 0;
scene.add( mesh )

mixer = new THREE.AnimationMixer( mesh );

var clip = THREE.AnimationClip.CreateFromMorphTargetSequence( "test", geometry.morphTargets, 30 );

mixer.clipAction( clip ).setDuration( 6 );
var action = mixer.clipAction( clip );

Play.onclick = function Play() {
action.play();
}
Stop.onclick = function Stop() {
action.stop();
}

};

回答№3の場合は-1

@ TheJim01はい、モデルフェイスが表示されます。 目はまだありません。アニメーションはもはや実行されていません。私は以下を再構築しました。興味深いのは、テクスチャーを取り出すと、もう顔が現れないということです。

var loader = new THREE.JSONLoader();

var head = new THREE.Group();
loader.load("./three/models/JSON/Blender/Face.json", function(geometry, materials){
var material = new THREE.MeshPhongMaterial({map: THREE.ImageUtils.loadTexture("./three/models/JSON/Blender/DM.fbm/face_1001.jpg")});
var mesh = new THREE.Mesh(geometry, material);
mesh.scale.set( 13, 13, 13 );
mesh.position.x = 0;
mesh.position.y = -25;
mesh.position.z = 0;
head.add( mesh );
});

loader.load("./three/models/JSON/Blender/Eyes.json", function(geometry, materials){
var material = new THREE.MeshPhongMaterial({map: THREE.ImageUtils.loadTexture("./three/models/JSON/Blender/DMWBSABAB.fbm/eyes_1001.jpg")});
var mesh = new THREE.Mesh(geometry, material);
mesh.scale.set( 13, 13, 13 );
mesh.position.x = 0;
mesh.position.y = 0;
mesh.position.z = 0;
head.add( mesh );
});

scene.add( head );


function addModelToScene( geometry, materials ) {

morphTargets: true
//scene.add( mesh );


mixer = new THREE.AnimationMixer( mesh, head );

var clip = THREE.AnimationClip.CreateFromMorphTargetSequence( "gallop", geometry.morphTargets, 30 );

mixer.clipAction( clip ).setDuration( 6 );
var action = mixer.clipAction( clip );

Play.onclick = function Play() {
action.play();
}
Stop.onclick = function Stop() {
action.stop();
}

};

関連する質問

複数のメッシュ - ユニティ3d、ブレンダー
ロードされたオブジェクトをthreejsでドラッグしますか？ - three.js、draggable
threejsはモデルの一部を回転させ、モデルの一部はパーツそのものをどのように回転するのか - three.js
OGREで.meshファイルを作成するには？ - メッシュ、鬼、シーン
3Dモデルからメッシュを取得するにはどうすればいいですか？ - java、mesh、jmonkeyengine、3d-model
Three.js：viewangleがテクスチャの強さに影響する - javascript、three.js
子供たちとmouseover three.js - javascript、three.js
ASP.NETでは、どのように子ウインドウで親を追跡できますか？ - javascript、c＃、asp.net
Three.js：EdgesHelperとMeshのマッチング方法 - javascript、three.js、helper、mesh
動的に追加されたメッシュのメモリ割り当てが機能しない - javascript、memory-leaks、webgl、three.js
子オブジェクトの描画順序 - javascript、three.js
Three.jsロードjsonの文字列 - javascript、three.js
シーン内のノードに一致するジオメトリIDが含まれているかどうかを確認する方法 - javascript、three.js、ジオメトリ、シーン
Grails - grailsに新しい子インスタンスを追加する
オブジェクトのインライン作成で親を参照する方法 - C＃
linqからxml-c＃、xml、linqを使用して複数のxmlファイルを1つにマージする
three.js - colors、three.js、vertex、colladaを使用して頂点カラーを使用してcolladaファイルを読み込む
シネマ4d - スケルトンにリグメッシュできません - バインディング、メッシュ、シネマ4d
クエリ文字列パラメータと改ざん - asp.net、web-applications、webforms
Androidメッシュネットワーク - Android、ネットワーキング、メッシュ、esp8266