Three.js 中是否有内置的高度图函数？

Question

我目前正在使用Three.js中的JavaScript开发游戏。我想知道是否可以为我所拥有的墙壁添加高度地图，以使它们更加逼真（见图片）。一张带有2D墙壁的游戏设计图片。

我看到的所有教程都使用平面而不是矩形。我目前正在使用矩形，不想换成平面，但如果矩形无法解决问题，我也很乐意知道。

我目前正在使用NewObstacle()类来制作我的矩形：

const wallTexture = new THREE.TextureLoader();
const wallTextureTexture = new THREE.MeshBasicMaterial({
  map: wallTexture.load('wall_textures/wall_3.jfif')
})

class NewObstacle{
  constructor(sizeX, sizeY, sizeZ, xPos, yPos, zPos){
    this.sizeX = sizeX
    this.sizeY = sizeY
    this.sizeZ = sizeZ
    this.xPos = xPos
    this.yPos = yPos
    this.zPos = zPos
  }
  makeCube(){
    const cubeGeometry = new THREE.BoxGeometry(this.sizeX, this.sizeY, this.sizeZ)
    this.box = new THREE.Mesh(cubeGeometry, /*new THREE.MeshBasicMaterial({color:
0x505050})*/wallTextureTexture)
    this.box.material.transparent = true
    this.box.material.opacity = 1
    this.box.position.x = this.xPos
    this.box.position.y = this.yPos
    this.box.position.z = this.zPos
    scene.add(this.box)
  }
}

什么是实现高度图的最简单方法？

- Codeitfast

---

这是一个官方示例，使用位移贴图。您可以移动displacementScale滑块，以查看其工作原理。它基本上使用此图像，使白色部分大量位移，黑色部分略微位移。您可以通过单击右下角的< >图标查看源代码。 - M -

Answer 1

您可以在材质上使用“displacementMap”属性。 这篇文章中提到:

引用: 位移图是您映射到对象上的灰度纹理，用于在原本平坦的物体上创建真实的表面凸起和凹陷。

首先加载您的纹理:

const loader = new THREE.TextureLoader();
const displacement = loader.load('yourfile.extension');

接下来你需要创建材质（material）。我推荐使用MeshStandardMaterial。以下是定义材质的示例代码：

const material = new THREE.MeshStandardMaterial({
    color: 0xff0000, //Red
    displacementMap: displacement,
    displacementScale: 1
});

我们已经知道displacementMap将使用灰度图像在平面上创建凹陷和凸起，但是displacementScale是平面受到displacementMap影响的程度。

就这样！

- Anye