Actualmente estoy trabajando en un juego en JavaScript, en Three.js. Tengo curiosidad si puedo agregar un mapa de altura a las paredes que tengo para hacerlas más realistas (ver imagen). Una imagen del diseño del juego con la pared que es 2D .
Todos los tutoriales que he visto usan planos en lugar de rectángulos. Actualmente estoy usando rectángulos y preferiría no cambiar, pero si no hay una solución con los rectángulos, me encantaría saberlo.
Actualmente estoy usando la clase NewObstacle() para hacer mis rectángulos:
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) } }¿Cuál es la forma más fácil de implementar mapas de altura?
Puede usar la propiedad displacementMap en el material.
Este artículo dice:
Los mapas de desplazamiento son texturas en escala de grises que se asignan a los objetos para crear un verdadero relieve de superficie (elevaciones y depresiones) en un objeto que de otro modo sería plano.
Primero carga tu textura:
const loader = new THREE.TextureLoader(); const displacement = loader.load('yourfile.extension'); A continuación, crea el material. Recomiendo usar MeshStandardMaterial . Así definirías tu material:
const material = new THREE.MeshStandardMaterial({ color: 0xff0000, //Red displacementMap: displacement, displacementScale: 1 }); Ya sabemos que el mapa de displacementMap utilizará la imagen en escala de grises para crear depresiones y elevaciones en el plano, pero la escala de displacementScale es cuánto se ve afectado el plano por el mapa de displacementMap .
¡Deberias hacer eso!