Html 使用Three.js展开纹理

纹理splatting是否适用于Three.js或其他Javascript 3D渲染框架？如果是的话，我想看看关于大地形的示例甚至教程。如果它不起作用，有没有其他方法绘制大型地形图？ 谢谢。

接受挑战

首先，您可以编写一个顶点着色器，该着色器采用灰度图像并将其用作高度贴图，并包含一个可变的浮点（下面称为

vAmount

），以传递到片段着色器以确定在该点显示（混合）的纹理

uniform sampler2D bumpTexture;
uniform float bumpScale;

varying float vAmount;
varying vec2 vUV;

void main() 
{
    vUV = uv;
    vec4 bumpData = texture2D( bumpTexture, uv );

    vAmount = bumpData.r; // assuming map is grayscale it doesn't matter if you use r, g, or b.

    // move the position along the normal
    vec3 newPosition = position + normal * bumpScale * vAmount;

    gl_Position = projectionMatrix * modelViewMatrix * vec4( newPosition, 1.0 );
}

接下来是片段着色器，它可以包含不同高程所需的任何纹理，并且有一个名为

smoothstep

的强大内置函数，使平滑过渡更容易计算

此类片段着色器的代码示例：

uniform sampler2D oceanTexture;
uniform sampler2D sandyTexture;
uniform sampler2D grassTexture;
uniform sampler2D rockyTexture;
uniform sampler2D snowyTexture;

varying vec2 vUV;

varying float vAmount;

void main() 
{
    vec4 water = (smoothstep(0.01, 0.25, vAmount) - smoothstep(0.24, 0.26, vAmount)) * texture2D( oceanTexture, vUV * 10.0 );
    vec4 sandy = (smoothstep(0.24, 0.27, vAmount) - smoothstep(0.28, 0.31, vAmount)) * texture2D( sandyTexture, vUV * 10.0 );
    vec4 grass = (smoothstep(0.28, 0.32, vAmount) - smoothstep(0.35, 0.40, vAmount)) * texture2D( grassTexture, vUV * 20.0 );
    vec4 rocky = (smoothstep(0.30, 0.50, vAmount) - smoothstep(0.40, 0.70, vAmount)) * texture2D( rockyTexture, vUV * 20.0 );
    vec4 snowy = (smoothstep(0.50, 0.65, vAmount))                                   * texture2D( snowyTexture, vUV * 10.0 );
    gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0) + water + sandy + grass + rocky + snowy;
}  

然后可以使用

THREE.ShaderMaterial

将其用于给定网格。上述代码在上实现，并产生如下结果：

---

希望这能帮助你开始。快乐编码

这里有一些相关信息：谢谢，我试试看。