Javascript THREE.JS：如何正确使用卡通材质的法线贴图（如果可能）？
我现在正在我的网站上使用Three.js开发一个3D查看器，用于学习JavaScript并演示一些使用GLTFLoader和Blender对象的3D作品。 查看器是基本的，按预期运行，但我想尝试将gltf对象的StandardMaterial替换为ToonMaterial。从这个角度来看，我想我可以使用法线贴图，但我无法正确渲染它 这里有两张具有材料特性的试验对象图片：Javascript THREE.JS：如何正确使用卡通材质的法线贴图（如果可能）？,javascript,three.js,gltf,Javascript,Three.js,Gltf,我现在正在我的网站上使用Three.js开发一个3D查看器，用于学习JavaScript并演示一些使用GLTFLoader和Blender对象的3D作品。 查看器是基本的，按预期运行，但我想尝试将gltf对象的StandardMaterial替换为ToonMaterial。从这个角度来看，我想我可以使用法线贴图，但我无法正确渲染它 这里有两张具有材料特性的试验对象图片： 以下是我的流程： 将对象的初始材质保存在变量中 创建新的MeshToonMaterial并从初始材质指定贴图 将卡通材质指
以下是我的流程：
守则摘录：
/* ... */
let initialMaterial = '';
const threeTone = new THREE.DataTexture(
Uint8Array.from([0, 0, 0, 128, 128, 128, 255, 255, 255]),3,1,THREE.RGBFormat
);
/* ... function called by an onclick event to swap materials */
function toonAssign(){
scene.traverse( function ( child, ) {
if ( child.isMesh ) {
if (child.material.type == 'MeshToonMaterial') {
child.material = initialMaterial;
}
else {
let oldMaterial = child.material;
let toonMaterial = new THREE.MeshToonMaterial({
gradientMap: threeTone,
map: oldMaterial.map,
normalMap: oldMaterial.normalMap
});
child.material = toonMaterial;
child.material.needsUpdate = true;
}
}
} );
}
/* ... initial material come from the gltf object here */
let loader = new THREE.GLTFLoader(manager);
loader.load( modelName + '.gltf', function ( gltf ) {
gltf.scene.traverse( function ( child ) {
if ( child.isMesh ) {
child.castShadow = true;
child.receiveShadow = true;
defaultMaterial = child.material;
child.material.needsUpdate = true;
}
} );
scene.add( gltf.scene );
} );
/* ... */