My room has walls but when I walk using w,a,s,d , I dont collide. You can try here: Babylon.js OBJ Loader Example
This is my html code, Please guide me what is wrong in my code ?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Babylon.js OBJ Loader Example</title>
<style>
body {
margin: 0;
overflow: hidden;
}
canvas {
width: 100%;
height: 100%;
display: block;
}
</style>
</head>
<body>
<canvas id="renderCanvas"></canvas>
<!-- Babylon.js CDN -->
<script src="https://cdn.babylonjs.com/babylon.js"></script>
<!-- Babylon.js OBJ File Loader Extension -->
<script src="https://cdn.babylonjs.com/loaders/babylon.objFileLoader.min.js"></script>
<script>
// Get the canvas element
var canvas = document.getElementById("renderCanvas");
// Generate the Babylon.js engine
var engine = new BABYLON.Engine(canvas, true);
// Create the scene
var createScene = function () {
// Create the scene
var scene = new BABYLON.Scene(engine);
// Add a point light to the scene
var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(20, 20, 100), scene);
// Add an Arc Rotate Camera to the scene
var camera = new BABYLON.FreeCamera("Camera", new BABYLON.Vector3(0, 1, -5), scene);
camera.setTarget(BABYLON.Vector3.Zero());
camera.attachControl(canvas, false);
// Enable collisions
scene.collisionsEnabled = true;
camera.checkCollisions = true;
camera.applyGravity = true;
// Create a ground mesh
var ground = BABYLON.MeshBuilder.CreateGround("ground", { width: 10, height: 10 }, scene);
ground.checkCollisions = true;
// Load the OBJ model along with its MTL file and textures
BABYLON.SceneLoader.ImportMesh("", "scenes/", "tourmodel.obj", scene, function (newMeshes) {
if (newMeshes && newMeshes.length > 0) {
// Set the target of the camera to the center of the imported mesh
var boundingInfo = newMeshes[0].getBoundingInfo();
var center = boundingInfo.boundingBox.centerWorld;
camera.position = new BABYLON.Vector3(center.x, center.y + 1, center.z - 5);
} else {
console.error("Failed to import meshes.");
}
}, null, function (scene, message, exception) {
console.error(message, exception);
}, ".obj");
// Move the light with the camera
scene.registerBeforeRender(function () {
light.position = camera.position;
});
return scene;
}
// Call the createScene function
var scene = createScene();
// Register a render loop to repeatedly render the scene
engine.runRenderLoop(function () {
scene.render();
});
// Resize the Babylon.js engine when the window is resized
window.addEventListener("resize", function () {
engine.resize();
});
// Keydown event listener for camera movement
window.addEventListener("keydown", function (event) {
switch (event.key) {
case "w":
// Move the camera forward one step
scene.activeCamera.position.addInPlace(scene.activeCamera.getDirection(BABYLON.Axis.Z).scale(1));
break;
case "s":
// Move the camera backward one step
scene.activeCamera.position.subtractInPlace(scene.activeCamera.getDirection(BABYLON.Axis.Z).scale(1));
break;
case "a":
// Move the camera to the left one step
scene.activeCamera.position.subtractInPlace(scene.activeCamera.getDirection(BABYLON.Axis.X).scale(1));
break;
case "d":
// Move the camera to the right one step
scene.activeCamera.position.addInPlace(scene.activeCamera.getDirection(BABYLON.Axis.X).scale(1));
break;
}
});
</script>
</body>
</html>