是否有内置的Three.js高度映射函数

Question

我目前正在Three.js中用JavaScript开发一款游戏。我很好奇是否可以在墙上添加一个高度图，使其更逼真(见图(。带有2D墙壁的游戏设计图像。

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

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

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影响的程度。

那就行了！