有沒有內置Three.js高度圖function？

Question

我目前正在 JavaScript 和 Three.js 中開發一款游戲。我很好奇我是否可以在牆壁上添加高度 map，使它們更逼真（見圖）。 帶有 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

您可以在材質上使用displacementMap屬性。

這篇文章指出：

置換貼圖是您 map 對象的灰度紋理，以在原本平坦的 object 上創建真實的表面起伏（高程和凹陷）。

首先加載你的紋理：

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

應該這樣做！