我有一个带有单独眼网眼的面部网眼。在Blender中，脸部被定义为父母，眼睛定义为孩子。现在我尝试将整个加载到three.js中。我怎样才能做到这一点？
使用纹理我也有问题，它只能加载一个。有人能帮我吗？感谢
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
},{
答案 0 :(得分：1)
从技术上讲，您可以将一个网格物体设为另一个网格，但它可能会混淆渲染器。最好开始考虑Group s。
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构造函数只接受两个参数。docs ）
从这里开始，转换head会导致face网格和eye网格都跟随。这适用于所有变换（位置，旋转，缩放，倾斜） - 变换将级联到head中包含的所有网格中。
您甚至可以嵌套Group，因此您可以为模型提供层次结构，但该对话是另一个问题。
three.js r87
答案 1 :(得分：-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();
}
};
答案 2 :(得分：-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();
}
};