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

Question

我目前正在用 JavaScript、Three.js 开发一款游戏。我很好奇是否可以在墙上添加高度图，以使它们更加真实（见图）。带有 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)
  }
}

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

Answer 1

displacementMap您可以在材质上使用该属性。

这篇文章指出：

置换贴图是映射到对象的灰度纹理，用于在平坦的对象上创建真实的表面起伏（高程和凹陷）。

首先加载你的纹理：

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

接下来创建材质。我建议使用MeshStandardMaterial. 这就是您定义材料的方式：

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

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

应该这样做！