是否有内置的 Three.js 高度图功能？

Question

我目前正在 JavaScript、Three.js 开发一款游戏。我很好奇我是否可以在墙壁上添加高度贴图，使它们更逼真（见图）。 An image of the game design with the wall that is 2D.

我看到的所有教程都使用平面而不是矩形。我目前正在使用矩形，宁愿不切换，但如果没有矩形的解决方案，我很乐意知道。

我目前正在使用 class 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

您可以在 material 上使用 displacementMap 属性。

This 文章指出：

Displacement maps are grayscale textures you map to objects to create true surface relief (elevations and depressions) on an otherwise flat object.

首先加载你的纹理：

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

接下来创建 material。我建议使用 MeshStandardMaterial。这就是您定义 material:

的方式

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

我们已经知道displacementMap要用灰度图在平面上做凹凸，但是displacementScale是多该平面受到 displacementMap.

的影响

应该可以！

是否有内置的 Three.js 高度图功能？

Is there a built-in Three.js heightmap function?

javascript

three.js

heightmap