Jump to content

FreeCamera collision problem with box.


Recommended Posts


First of all I would like to say, you guys have done awesome job and hope you will add more features. I really appreciate the team for developing such a nice lightweight engine, its pretty awesome.


I am facing a problem in camera collision with box. I have used FreeCamera so that I can have a FPS kind of effect. For that I made a ground, box. While I am going near to the box somehow the camera is going little inside the box.



Here is my html code:


<!DOCTYPE html>
    <meta charset="utf-8" />
    <script src="js/babylon.js"></script>
    <script src="js/hand.minified-1.2.js"></script>
    <script src="js/customeCode.js"></script>
    <script src="js/Oimo.js"></script>
    <script src="js/cannon.js"></script>
        html, body {
             width: 100%;
             height: 100%;
             padding: 0;
             margin: 0;
             overflow: hidden;
        #renderCanvas {
    <canvas id="renderCanvas"></canvas>





Here is my js Code:


/// <referance path "/js/babylon.js"/>
"use strict";
var canvas;
var engine;
document.addEventListener("DOMContentLoaded", startBabylonJS, false);
function startBabylonJS() {
        if (BABYLON.Engine.isSupported()) {
                   var canvas = document.getElementById("renderCanvas");
                   var engine = new BABYLON.Engine(canvas, true);
                   var createScene = function () {
                   var scene = new BABYLON.Scene(engine);
                   //Camera Setting
                   var camera = new BABYLON.FreeCamera("freeCam", new BABYLON.Vector3(0,3,-10),scene);
                   camera.checkCollisions = true;
                   camera.applyGravity = true;
                   //Adding point light
                   var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(20, 20, 10), scene);
                   // Directional Light
                   var dirLight = new BABYLON.DirectionalLight("directionalLight", new BABYLON.Vector3(-1, -2, -1), scene);
                   dirLight.position = new BABYLON.Vector3(120, 40, 20);
                   dirLight.intensity = 0.5;
                   //Create box
                   var box = BABYLON.Mesh.CreateBox("cube",2,scene);
                   box.position.y += 2;
                   box.checkCollisions = true;
                   //Create ground
                   var ground = BABYLON.Mesh.CreateGround("floor",200,200,12,scene);
                   ground.checkCollisions = true
                    // Move the light with the camera
                   scene.registerBeforeRender(function () {
                   dirlight.position = camera.position;
                   light.position = camera.position;
                   //Attach Control
                  //Key Control
                  if (scene.activeCamera.keysUp) {
                           scene.activeCamera.keysUp.push(90); // Z
                           scene.activeCamera.keysUp.push(87); // W
                           scene.activeCamera.keysDown.push(83); // S
                           scene.activeCamera.keysLeft.push(65); // A
                           scene.activeCamera.keysLeft.push(81); // Q
                           scene.activeCamera.keysRight.push(69); // E
                           scene.activeCamera.keysRight.push(68); // D
               return scene;
        var scene = createScene();
        engine.runRenderLoop(function () {


Is there something wrong in my code?

I have also attached some images for better understanding.








Link to comment
Share on other sites

Hello somnath and welcome to the forum!


Your code seems okay. I don't see any (important) obvious flaws. If you want people to check your problem out it's always helpful to create a playground at http://www.babylonjs-playground.com that shows what's going wrong and that people can play around with. I did that for you (this time ;)): http://www.babylonjs-playground.com/#174NZJ


Here's what I fixed/changed:

  • a little typo in dirLight in the registerBeforeRender (was dirlight before, but that was not the problem)
  • removed the changed key definitions because they mess up typing in the playground (but not a problem)
  • reduced the camera.speed value to be able to control the camera and see the problem better
  • added a rough configuration for the elipsoid:
camera.ellipsoid = new BABYLON.Vector3(1, 1, 1);

This defines what size your camera has when calculating the collisions. Setting this makes the camera stop before "walking into" the cube and seemed to fix the problem.


I hope that I could help. Let us know if that worked for you and if you have any other question and of course don't forget to keep us up to date with your progress and what you have created :D

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...