Question: I have code on JavaScript that uses node and three.js to make an interactive game. The issue I ' m encountering right now is I

I have code on JavaScript that uses node and three.js to make an interactive game. The issue I'm encountering right now is I want to make it so that when the main character touches a wall the camera and the character rotate as can be seen when touching the right wall. However I want to add holes in the walls and the roof but to do that i wanted to change the way collision detection works so I started working on the right wall first and for some reason, I can't get it to work at all. Can you help me find out the error to make it so that if there are no walls the character goes through?
Here's the code:
main.js:
const startMaterial = new THREE.MeshPhongMaterial({ color: 0x9000ff, flatShading: false });
function createStart(x, y, z){
const startGeo = new THREE.BoxGeometry(15,0.11,10);
const start = new THREE.Mesh(startGeo, startMaterial);
scene.add(start);
return start;
}
const wallMaterial = new THREE.MeshPhongMaterial({ color: 0x00ff00, flatShading: false });
const wallGeo = new THREE.BoxGeometry(0.1,10,10);
// Function to create walls
function createRWall(x, y, z){
const wall = new THREE.Mesh(wallGeo, wallMaterial);
wall.position.set(x +7.5, y +5, z);
scene.add(wall);
return [wall];
}
function createLWall(x, y, z){
const wall = new THREE.Mesh(wallGeo, wallMaterial);
wall.position.set(x -7.5, y +5, z);
scene.add(wall);
return [wall];
}
const playerLight = new THREE.PointLight(0xFFFFFF,1.5,10,2);
player.add(playerLight);
playerLight.position.set(0,0,0); // Center of the player
const lightHelper = new THREE.PointLightHelper(playerLight,0.5); // Visual helper with a radius of 0.5
scene.add(lightHelper);
const roofMaterial = new THREE.MeshPhongMaterial({
color: 0x00ff00,// Swampy green-blue color
shininess: 40,// Moderate shininess for specular highlights
specular: 0xffffff // White specular highlight
});
function createRoof(x, y, z){
const roofGeometry = new THREE.BoxGeometry(15,0.1,10);
const roof = new THREE.Mesh(roofGeometry, roofMaterial);
roof.position.set(x, y +10, z);
scene.add(roof);
return roof;
}
// Generate platforms and walls
const platforms =[];
const rWall =[];
const lWall =[];
const roofs =[];
const start =[];
start.push(createStart(0,0,0))
for (let i =0; i <500; i++){
platforms.push(createPlatform(0,0,-i *2));
// platforms.push(createPlatform(Math.random()*15-7.5,0,-i *2));
rWall.push(createRWall(0,0,-i *2));
lWall.push(createLWall(0,0,-i *2));
roofs.push(createRoof(0,0,-i *2));
}
// Raycaster for detecting platforms below player
const raycaster = new THREE.Raycaster();
const leftRaycaster = new THREE.Raycaster();
const rightRaycaster = new THREE.Raycaster();
const downVector = new THREE.Vector3(0,-1,0); // Downward direction
const rightVector = new THREE.Vector3(1,0,0); // Right direction
const leftVector = new THREE.Vector3(-1,0,0); // Left direction
// Player movement variables
let velocityY =9.81;
const gravity =-0.002;
const jumpStrength =0.15;
let isJumping = false;
let forwardSpeed =0.01;
const endPositionZ =-200; // Define end position where player stops
const gravityDirection = new THREE.Vector3(0,0,1); // Gravity pulls toward the wall
let side = null;
// Track if the game has started
let gameStarted = false;
// Check start platform
function checkStartBelow(){
raycaster.set(player.position, downVector);
const intersects = raycaster.intersectObjects(start);
// Return true if a platform is detected close below the player
return intersects.length >0 && intersects[0].distance <=1;
}
// Check if there's a platform below the player
function checkPlatformBelow(){
raycaster.set(player.position, downVector);
const intersects = raycaster.intersectObjects(platforms);
// Return true if a platform is detected close below the player
return intersects.length >0 && intersects[0].distance <=1;
}
// Function to check for wall collisions on the right
function checkPlatformRight(){
raycaster.set(player.position, rightVector);
const intersects = raycaster.intersectObjects(rWall);
// Return true if a platform is detected close below the player
return intersects.length >0 && intersects[0].distance <=1;
}
// Function to check for wall collisions on the left
function checkPlatformLeft(){
raycaster.set(player.position, leftVector);
const intersects = raycaster.intersectObjects(platforms);
// Return true if a platform is detected close below the player
return intersects.length >0 && intersects[0].distance <=1;
}

Step by Step Solution

There are 3 Steps involved in it

1 Expert Approved Answer
Step: 1 Unlock blur-text-image
Question Has Been Solved by an Expert!

Get step-by-step solutions from verified subject matter experts

Step: 2 Unlock
Step: 3 Unlock

Students Have Also Explored These Related Programming Questions!