在 Three.js 中，是否可以创建一种包含多个纹理的材质（着色器？），每个纹理都有自己的细节，将它们混合在一起并分配给几何体？我想使用箔压花或局部紫外线上光等多种精加工技术来模拟纸张表面。
我想要实现的是一种具有以下特性的材料：
所有单独层的原因是我想单独控制它们（替换不同的纹理并在运行时更改值）。除了“图像”层之外，我不确定其他层应该使用什么混合值来实现逼真的模拟。
为了说明应用于纸张的整理技术，请查看以下照片（由 PrintHouse Corporation 提供）：
Blind embossing (pattern) & gold foil debossing (logo, title)
Silver foil debossing (logo) and spot UV varnish (photos)
Spot UV varnish (lines)
这有可能吗？我找不到任何使用如此复杂材料的 Three.js 示例。如果您能给我指出一个或解释如何以编程方式处理此问题，我将不胜感激。
正如评论所说，您可以使用自定义着色器来完成此操作。您只需要考虑如何在着色器中自己组合不同的层。 举个例子，您可以在 js 中设置着色器，如下所示：
blurTexture360 = new THREE.TextureLoader().load(imgURLBlur);
unblurTexture360 = new THREE.TextureLoader().load(imgURLUnblur);
highlight1Texture360 = new THREE.TextureLoader().load(imgURLHighlight1);
highlight2Texture360 = new THREE.TextureLoader().load(imgURLHighlight2);
blurTexture360.magFilter = THREE.LinearFilter;
blurTexture360.minFilter = THREE.LinearFilter;
const shader = THREE.ShaderLib.equirect;
uniforms = {
u_resolution: { type: "v2", value: resolution },
u_blur: { type: "t", value: blurTexture360 },
u_unblur: { type: "t", value: unblurTexture360 },
u_highlight1: { type: "t", value: highlight1Texture360 },
u_highlight2: { type: "t", value: highlight2Texture360 },
u_mix: { type: "f", value: 0.0 },
u_highlightAmt: { type: "f", value: 0.0 },
u_highlight1Bool: { type: "f", value: 1.0 },
u_highlight2Bool: { type: "f", value: 1.0 }
};
let material360 = new THREE.ShaderMaterial({
uniforms: uniforms,
vertexShader: shader.vertexShader,
fragmentShader: fragmentShader(),
depthWrite: false,
side: THREE.BackSide
});
然后把制服放在别处
uniforms.u_highlightAmt.value -= 0.05;
这是当 u_highlight1Bool 或 u_highlight2Bool 设置为 1 或 0 时设置不同纹理的示例。希望这为您提供了一个使用逻辑影响着色器代码的示例。
function fragmentShader() {
return `
uniform sampler2D u_blur;
uniform sampler2D u_unblur;
uniform sampler2D u_highlight1;
uniform sampler2D u_highlight2;
uniform vec2 u_resolution;
uniform float u_mix;
uniform float u_highlight1Bool;
uniform float u_highlight2Bool;
uniform float u_highlightAmt;
varying vec3 vWorldDirection;
#define RECIPROCAL_PI2 0.15915494309189535
#define RECIPROCAL_PI 0.3183098861837907
vec2 equirectUv( in vec3 dir ) {
// dir is assumed to be unit length
float u = atan( dir.z, dir.x ) * RECIPROCAL_PI2 + 0.5;
float v = asin( clamp( dir.y, - 1.0, 1.0 ) ) * RECIPROCAL_PI + 0.5;
return vec2( u, v );
}
void main() {
vec3 direction = normalize( vWorldDirection );
vec2 sampleUV = equirectUv( direction );
vec4 blur = texture2D(u_blur, sampleUV);
vec4 unblur = texture2D(u_unblur, sampleUV);
vec4 highlight1 = texture2D(u_highlight1, sampleUV);
vec4 highlight2 = texture2D(u_highlight2, sampleUV);
blur = mapTexelToLinear( blur );
unblur = mapTexelToLinear( unblur );
highlight1 = mapTexelToLinear(highlight1);
highlight2 = mapTexelToLinear(highlight2);
vec4 highlight = (highlight1*u_highlight1Bool) + (highlight2 * u_highlight2Bool);
vec4 ret = mix(blur, unblur, u_mix);
float thresh = ceil(highlight.r - 0.09) * u_highlightAmt;
ret = mix(ret,highlight,thresh);
gl_FragColor = ret;
}
`;
我从这里的代码中得到了这个：https://glitch.com/edit/#!/hostileterrain94?path=script%2F ThreeSixtyEnv.js%3A202%3A0它的记录不是很好，但如果您想了解它在更广泛的项目中是如何存在的，请随意查看。我并不认为这真的很有效，但我知道它可以完成工作。