Well, been on html 5 apis and about two days ago stumbled on babylon js for 3d on html 5 using webgl; but the issue is that it is a new technology and not much work has been done with it and also not much videos tutorials as expected on it. So with three days using the technology, I have been able to try a little with the physics engine.
I want to rotate box 2 after adding the physics state but I can't do that. I can only rotate the object before adding the physics state.
I know in modern games, even objects on air can rotate and yet fall due to gravity. What can I do about this, will I have to remove the physics property, rotate object and re rotate the object. Below is my code:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
html, body {
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#renderCanvas {
width: 100%;
height: 100%;
touch-action: none;
}
</style>
<script src="../js/babylon.2.0.js"></script>
<script src="../js/hand-1.3.8.js"></script>
<script src="../js/cannon.js"></script> <!-- optional physics engine -->
<!-- <script src="../js/Oimo.js"></script> New physics engine -->
</head>
<body>
<canvas id="renderCanvas"></canvas>
<script type="text/javascript">
// Get the canvas element from our HTML below
var canvas = document.querySelector("#renderCanvas");
// Load the BABYLON 3D engine
var MyScene = function(){
console.log("MyScene Activated: Trying to test Object Oriented Javascript With Babylon js")
};
MyScene.prototype.engine = new BABYLON.Engine(canvas, true);
MyScene.prototype.createScene = function(){
// Now create a basic Babylon Scene object
var scene = new BABYLON.Scene(this.engine);
scene.enablePhysics(null,new BABYLON.CannonJSPlugin());
scene.setGravity(new BABYLON.Vector3(0,-10,0));
// Change the scene background color to green.
scene.clearColor = new BABYLON.Color3(200, 1, 0.3);
var camera = new BABYLON.ArcRotateCamera("camera",1,1.4,53,new BABYLON.Vector3(0,0,0),scene);
// This attaches the camera to the canvas
camera.attachControl(canvas, false);
// This creates a light, aiming 0,1,0 - to the sky.
var light = new BABYLON.PointLight("light1", new BABYLON.Vector3(0, 0, 10), scene);
// Dim the light a small amount
light.intensity = .5;
MyScene.prototype.ball = BABYLON.Mesh.CreateSphere("sphere1", 16, 2, scene);
MyScene.prototype.ball.position.y = 10;
MyScene.prototype.ball.setPhysicsState({ impostor : BABYLON.PhysicsEngine.BoxImpostor, friction : 0.5 , mass: 10, restitution : 0.7});
MyScene.prototype.box1 = BABYLON.Mesh.CreateBox("box1",3,scene);
MyScene.prototype.box1.position.x = 3;
MyScene.prototype.box1.scaling.x = 1;
MyScene.prototype.box1.position.y = -6;
MyScene.prototype.box1.setPhysicsState({ impostor : BABYLON.PhysicsEngine.BoxImpostor, friction : 0.5 , mass: 10, restitution : 0.7});
MyScene.prototype.box2 = BABYLON.Mesh.CreateBox("box2",3,scene);
MyScene.prototype.box2.position.x = 6;
MyScene.prototype.box2.position.y = 10;
MyScene.prototype.box2.setPhysicsState({ impostor : BABYLON.PhysicsEngine.BoxImpostor, friction : 0.5 , mass: 10, restitution : 0.7});
MyScene.prototype.box3 = BABYLON.Mesh.CreateBox("box3",3,scene);
MyScene.prototype.box3.position.x = 1;
MyScene.prototype.box3.setPhysicsState({ impostor : BABYLON.PhysicsEngine.BoxImpostor, friction : 0.5 , mass: 10, restitution : 0.7});
MyScene.prototype.ground = BABYLON.Mesh.CreateBox("box",50,scene);
MyScene.prototype.ground.position.y = -10;
MyScene.prototype.ground.scaling.y = 0.1;
MyScene.prototype.ground.setPhysicsState({ impostor : BABYLON.PhysicsEngine.BoxImpostor, friction : 0.5 , mass: 0, restitution : 0.7});
// Leave this function
return scene;
};
MyScene.prototype.getEngine = function(){
return this.engine;
};
MyScene.prototype.scale = function(){
counter = 0;
while(counter <= 10){
MyScene.prototype.box2.rotate(BABYLON.Axis.X,counter,BABYLON.Space.LOCAL);
MyScene.prototype.box2.rotate(BABYLON.Axis.Y,counter,BABYLON.Space.LOCAL);
MyScene.prototype.box2.rotate(BABYLON.Axis.Z,counter,BABYLON.Space.LOCAL);
++counter;
}
}
MyScene.prototype.pos = function(){
this.box1.position.x += 0.2;
this.box1.scaling.x += 0.2;
this.box2.position.x += 0.2;
this.box2.scaling.x += 0.2;
this.box3.position.x += 0.2;
this.box3.scaling.x += 0.2;
};
var Myscene = new MyScene();
var scene = Myscene.createScene();
// Register a render loop to repeatedly render the scene
Myscene.getEngine().runRenderLoop(function () {
scene.render();
Myscene.scale();
});
// Watch for browser/canvas resize events
window.addEventListener("resize", function () {
Myscene.getEngine().resize();
});
</script>
</body>
</html>
