Javascript Three.js：如何向OBJ对象添加贴图以获得照片级真实感金属材质？

对于一个小项目，我想向Three.js 3D场景中的OBJ对象添加不同的贴图，以获得真实感的金属效果。不幸的是，我有一些问题

以一种有效的方式直接在这里嵌入代码是行不通的。所以我创建了这个模板：

如果在

THREE.MeshStandardMaterial

下添加

envMaps

、

map

和

roughnessMap

，则材质应该是这样的

我试着这样写：

import*作为三个源”https://threejs.org/build/three.module.js";
进口{
装载机
}从“https://threejs.org/examples/jsm/loaders/OBJLoader.js";
var容器；
摄像机、场景、渲染器；
var mouseX=0，
mouseY=0；
var windowHalfX=window.innerWidth/2；
var windowHalfY=window.innerHeight/2；
const textureLoader=新的textureLoader（）；
const envMaps=（函数（）{
常量路径='../examples/textures/cube/SwedishRoyalCastle/'；
常量格式='.jpg'；
常量URL=[
路径+‘px’+格式，路径+‘nx’+格式，
路径+py+格式，路径+ny+格式，
路径+‘pz’+格式，路径+‘nz’+格式
];
const reflectionCube=cubeTextReloader.load（URL）；
reflectionCube.format=RGBFormat；
const refractionCube=cubeTextureLoader.load（URL）；
refractionCube.mapping=CuberFractionMapping；
折射立方体.format=RGBFormat；
返回{
无：空，
反射：反射管，
折射：折射立方体
};
})();
常量粗糙度映射=（函数（）{
const bricks=textureLoader.load（'../../examples/textures/brick_糙率.jpg'）；
bricks.wrapT=重复包装；
bricks.wrapps=重复包装；
砖块。重复。设置（9，1）；
返回{
无：空，
砖：砖
};
})();
var对象；
init（）；
制作动画（）；
函数init（）{
容器=document.createElement（“div”）；
container.className=“object”；
文件.正文.附件（容器）；
摄像机=新的三视角摄像机(
45,
window.innerWidth/window.innerHeight，
1.
2000
);
摄像机位置z=250；
//场面
场景=新的三个。场景（）；
var环境光=新的三个环境光（0xCCCC，0.4）；
场景。添加（环境光）；
var pointLight=新的三个点光源（0xffffff，2）；
点光源位置设置（10010050）；
添加（点光源）；
场景。添加（摄影机）；
//经理
函数loadModel（）{
遍历（函数（子对象）{
//这允许我们检查子对象是否是网格构造函数的实例
if（三个.Mesh的子实例）{
child.material=新的三点网格标准材质({
颜色：#555“，
粗糙度：0.1，
金属度：0.4，
纹理：textureLoader，
环境地图：环境地图，
粗糙度贴图：粗糙度贴图
});
child.material.flatShading=false；
//有时.obj文件中缺少一些顶点法线，ThreeJs将计算它们
}
});
object.position.y=-90；
场景。添加（对象）；
}
var manager=新的三个加载管理器（加载模型）；
manager.onProgress=功能（项目、已加载、总计）{
控制台日志（项目、已加载、总计）；
};
//模型
函数onProgress（xhr）{
if（xhr.长度可计算）{
var percentComplete=（xhr.loaded/xhr.total）*100；
console.log（“模型”+Math.round（完成百分比，2）+%下载”）；
}
}
函数onError（）{}
var装载机=新的OBJLoader（管理器）；
装载机(
"https://threejs.org/examples/models/obj/female02/female02.obj",
功能（obj）{
对象=obj；
},
关于进展，
一个错误
);
//
renderer=new THREE.WebGLRenderer({
阿尔法：是的
});
renderer.setPixelRatio（window.devicePixelRatio）；
renderer.setSize（window.innerWidth、window.innerHeight）；
container.appendChild（renderer.domeElement）；
document.addEventListener（“mousemove”，onDocumentMouseMove，false）；
//
addEventListener（“resize”，onWindowResize，false）；
}
函数onWindowResize（）{
windowHalfX=window.innerWidth/2；
windowHalfY=window.innerHeight/2；
camera.aspect=window.innerWidth/window.innerHeight；
camera.updateProjectMatrix（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
}
onDocumentMouseMove函数（事件）{
mouseX=（event.clientX-windowHalfX）/2；
mouseY=（event.clientY-windowHalfY）/2；
}
//
函数animate（）{
请求动画帧（动画）；
render（）；
}
函数render（）{
camera.position.x+=（mouseX-camera.position.x）*0.05；
camera.position.y+=（-mouseY-camera.position.y）*0.05；
摄像机。注视（场景。位置）；
渲染器。渲染（场景、摄影机）；
}

如果您正在寻找一个ThreeJS工具来试验金属效果，请尝试

…包括一组控件，可轻松调整关键网格材质参数，并立即查看影响。使用此工具后，在您的特定示例中，我为网格材质提供了以下参数，使对象具有非常逼真的金属效果，并将对象的颜色更改为“#88f”以获得蓝色色调

THREE.MeshStandardMaterial({
    color: "#88f",
    metalness: 1,
    roughness: 0.37,
    aoMapIntensity: 1.0,
    ambientIntensity: 0.42,
    envMapIntensity: 2.2,
    displacementScale: 2.1,
    normalScale: 1
});

显然，您必须使用上述工具进行实验，以获得所需的特定金属效果。希望这有助于你的努力

编辑环境贴图功能取决于最终反射或折射到对象上的环境图像。codepen示例似乎缺少此关键元素（即

THREE.CubeTextureLoader（）

）。根据问题中的代码，它似乎最初是从中改编而来的，我相信它具有所需环境地图概念的必要元素。使用ThreeJS示例作为基线，并将

female02.obj

模型注入场景中，我们得出

改编自“three.js webgl-材质-立方体反射/r”