我正在使用Three.js(r64)来渲染一些模型。我正在使用包含的THREE.OBJMTLLoader。我试图通过将.obj和.mtl提供给加载器来渲染椅子。我还有一个普通地图的png我想申请它。以下是我正在经历的两个屏幕截图。
如果没有应用法线贴图,模型的屏幕截图,注意颜色是预期的,但显示低分辨率质量,因为未应用法线贴图:
如果将法线贴图应用于材质的“贴图”字段,则会显示模型的屏幕截图。请注意它现在看起来很高,但颜色不对,可能是因为我将纹理应用于材质:
如果我将纹理应用于材质的“normalMap”字段,模型将消失。
下面是我用来渲染模型的代码片段:
var chairNormalMap = THREE.ImageUtils.loadTexture('../Models/BanquetChair/BanquetChairNormalMap.png');
loader.load('../Models/BanquetChair/BanquetChair.obj', '../Models/BanquetChair/BanquetChair.mtl', function (object) {
materials.push.apply(materials, object.children);
object.traverse(function (child) {
if (child instanceof THREE.Mesh) {
var chairNormalMaterial = new THREE.MeshPhongMaterial();
// if this line is applied, the model will disappear
chairNormalMaterial.normalMap = chairNormalMap;
// if this line is applied, the normals look great but then the chair is the color of the normal map
chairNormalMaterial.map = chairNormalMap;
child.material = chairNormalMaterial;
}
});
object.position.y = -80;
object.receiveShadow = true;
scene.add(object);
});
我希望我已经很好地解释了我的尝试,我希望它就像在材料中使用不同的属性一样简单。欢迎任何建议。谢谢!
答案 0 :(得分:1)
您需要为场景添加灯光,并确保使用回调加载纹理。
var ambientLight = new THREE.AmbientLight( 0x222222 );
scene.add( ambientLight );
var light = new THREE.PointLight( 0xffffff, 1 );
light.position = camera.position;
scene.add( light );
var loader = new THREE.OBJMTLLoader();
var chairNormalMap = THREE.ImageUtils.loadTexture('...png', undefined, function() {
loader.load('...obj', '...mtl', function ( object ) {
object.traverse( function ( child ) {
if (child instanceof THREE.Mesh && child.material instanceof THREE.MeshPhongMaterial ) {
child.material.normalMap = chairNormalMap;
}
});
object.position.set( 30, 0, 0 );
scene.add( object );
});
});
three.js r.64