so I'm having trouble with fixing the gaps between the walls when creating a maze in three.js I was hoping someone could help to find a solution for it
P.S.: the H stand for horizontal and V for vertical in the maze design layout
Here is the code I'm using:
"<!DOCTYPE html>
<html>
<head>
<title>3D Maze in Three.js</title>
<style>
body { margin: 0; }
canvas { display: block; }
</style>
</head>
<body>
<script type="module">
import * as THREE from 'https://unpkg.com/[email protected]/build/three.module.js';
import { PointerLockControls } from 'https://unpkg.com/[email protected]/examples/jsm/controls/PointerLockControls.js';
let camera, scene, renderer, controls;
let moveForward = false;
let moveLeft = false;
let moveBackward = false;
let moveRight = false;
let prevTime = performance.now();
const velocity = new THREE.Vector3();
const direction = new THREE.Vector3();
function init() {
scene = new THREE.Scene();
scene.background = new THREE.Color(0x87CEEB); // Blue sky
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 50, 0);
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
controls = new PointerLockControls(camera, document.body);
scene.add(controls.getObject());
document.body.addEventListener('click', () => {
controls.lock();
}, false);
document.addEventListener('keydown', onKeyDown);
document.addEventListener('keyup', onKeyUp);
createMaze();
}
function createMaze() {
const textureLoader = new THREE.TextureLoader();
const wallGeometry = new THREE.BoxGeometry(4, 4, 1); // Wall dimensions
const wallMaterial = new THREE.MeshStandardMaterial({
map: textureLoader.load('Brick/Brick_Color.jpg'),
aoMap: textureLoader.load('Brick/Brick_Ambient occlusion.jpg'),
normalMap: textureLoader.load('Brick/Brick_Normal.jpg'),
roughnessMap: textureLoader.load('Brick/Brick_Roughness.jpg')
});
// ... Texture wrapping settings ...
// Explicit maze layout with orientations
const mazeLayout = [
"HVVVVVVVVVVVVVVVVVVVH",
"H H H H",
"H VVV V VVV V VVVVV H",
"H H H H H H H H",
"H H VVVVV H H H H H H",
"H H H H H H H",
"H VVVVV H VVVVV VVVVH",
"H H H H H",
"VVVVVVVVVVVVVVVVVVVVV"
];
const floorSize = 200;
const wallSpacing = 4; // Adjust if needed
// Create walls based on the maze layout
mazeLayout.forEach((row, i) => {
row.split('').forEach((cell, j) => {
if (cell === 'H' || cell === 'V') {
const wall = new THREE.Mesh(wallGeometry, wallMaterial);
const isHorizontal = cell === 'H';
// Position without offset
const xPosition = (j - mazeLayout[0].length / 2) * wallSpacing;
const zPosition = (i - mazeLayout.length / 2) * wallSpacing;
wall.position.set(xPosition, 2, zPosition);
// Rotate wall if it's horizontal
if (isHorizontal) {
wall.rotation.y = Math.PI / 2;
// Since the wall is rotated, the x and z positions need to be swapped
wall.position.x += wallSpacing / 2;
wall.position.z += wallSpacing / 2;
} else {
// No rotation needed for vertical walls, but we still adjust the z position
wall.position.z += wallSpacing / 2;
}
scene.add(wall);
}
});
});
// Floor creation
const floorMaterial = new THREE.MeshStandardMaterial({
map: textureLoader.load('Cement/Cement_Color.jpg'),
//displacementMap: textureLoader.load('Cement/Cement_Displacement.jpg'),
normalMap: textureLoader.load('Cement/Cement_Normal.jpg'),
roughnessMap: textureLoader.load('Cement/Cement_Roughness.jpg')
});
floorMaterial.map.wrapS = THREE.RepeatWrapping;
floorMaterial.map.wrapT = THREE.RepeatWrapping;
floorMaterial.map.repeat.set(50, 50); // Adjust for texture size
//floorMaterial.displacementMap.wrapS = THREE.RepeatWrapping;
//floorMaterial.displacementMap.wrapT = THREE.RepeatWrapping;
//floorMaterial.displacementMap.repeat.set(50, 50);
floorMaterial.normalMap.wrapS = THREE.RepeatWrapping;
floorMaterial.normalMap.wrapT = THREE.RepeatWrapping;
floorMaterial.normalMap.repeat.set(50, 50);
floorMaterial.roughnessMap.wrapS = THREE.RepeatWrapping;
floorMaterial.roughnessMap.wrapT = THREE.RepeatWrapping;
floorMaterial.roughnessMap.repeat.set(50, 50);
const floorGeometry = new THREE.PlaneGeometry(floorSize, floorSize);
const floor = new THREE.Mesh(floorGeometry, floorMaterial);
floor.rotation.x = -Math.PI / 2;
floor.position.y = -0.5; // Slightly lower to prevent z-fighting with the walls
scene.add(floor);
// Add lighting (omitted for brevity)
// Ambient light to softly light the scene
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);
// Directional light to simulate sunlight
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
directionalLight.position.set(50, 50, 50);
scene.add(directionalLight);
}
function onKeyDown(event) {
switch (event.code) {
case 'ArrowUp':
case 'KeyW':
moveForward = true;
break;
case 'ArrowLeft':
case 'KeyA':
moveLeft = true;
break;
case 'ArrowDown':
case 'KeyS':
moveBackward = true;
break;
case 'ArrowRight':
case 'KeyD':
moveRight = true;
break;
}
}
function onKeyUp(event) {
switch (event.code) {
case 'ArrowUp':
case 'KeyW':
moveForward = false;
break;
case 'ArrowLeft':
case 'KeyA':
moveLeft = false;
break;
case 'ArrowDown':
case 'KeyS':
moveBackward = false;
break;
case 'ArrowRight':
case 'KeyD':
moveRight = false;
break;
}
}
function animate() {
requestAnimationFrame(animate);
const time = performance.now();
const delta = (time - prevTime) / 1000;
velocity.x -= velocity.x * 10.0 * delta;
velocity.z -= velocity.z * 10.0 * delta;
direction.z = Number(moveForward) - Number(moveBackward);
direction.x = Number(moveRight) - Number(moveLeft);
direction.normalize(); // this ensures consistent movements in all directions
if (moveForward || moveBackward) velocity.z -= direction.z * 400.0 * delta;
if (moveLeft || moveRight) velocity.x -= direction.x * 400.0 * delta;
controls.moveRight(-velocity.x * delta);
controls.moveForward(-velocity.z * delta);
prevTime = time;
renderer.render(scene, camera);
}
init();
animate();
</script>
</body>
</html>"
type here
I tried a lot of things none worked like putting rules when the walls need to be rotated