camera not initialised problem in a two viewer

[benoit-1842]

I have all those codes in my folder.  I have tried a lot of stuff but I am stucked !!!!  What I want to do is to visualize my model in two viewports...  I have used that with a different code before, but now it doesn't work it's always saying that my camera is not defined....  

 

Thanx in advance to the community,

 

Benoit

 

https://drive.google.com/folderview?id=0B_ZBy6q5jS8xZnQwTlQ3WTI3OUk&usp=sharing

[Dad72]

try:

var Basic = (function () {    function Basic(scene) {        // backgournd color        scene.clearColor = new BABYLON.Color3(.1, .1, .1);        //light        var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);           // Camera 1 (right side)	var camera1 = new BABYLON.ArcRotateCamera("camera1", 0, Math.PI/2, 20, new BABYLON.Vector3(0, 7, 0), scene);	scene.activeCameras.push(camera1); 	// Camera 2 (left side)	var camera2 = new BABYLON.ArcRotateCamera("camera2", -Math.PI/2, Math.PI/2, 20, new BABYLON.Vector3(0, 7, 0), scene);	scene.activeCameras.push(camera2); 	// Viewports	camera1.viewport = new BABYLON.Viewport(0.5, 0, 0.5, 1.0); // right	camera2.viewport = new BABYLON.Viewport(0.0, 0, 0.5, 1.0); // left 	// Camera control		scene.activeCameras[0] = camera1;	scene.activeCameras[0].attachControl(canvas, true);    }

[benoit-1842]

It's still shooting the error

 

Thanx for the help....

 

Benoit

[Dad72]

You might not try to duplicate this in the playground.

 

Here too you have errors

 

Ini.prototype.iniCamera = function () { if (this.scene.activeCamera) { this.scene.activeCamera.attachControl(this.canvas); } };

 

corect:

 

this.scene.activeCamera => this.scene.activeCameras[0]

and this.scene.activeCamera.attachControl => this.scene.activeCameras[0].attachControl(this.canvas);

[benoit-1842]

Thanx for helping, but I stil got this camera error.....  weird !!!

 

Merci,

 

Benoit

[benoit-1842]

Here's an update file.......

 

https://drive.google.com/folderview?id=0B_ZBy6q5jS8xZ09RTVIzaVNEMTA&usp=sharing

[Dad72]

You have copied wrong. watch online 29 and 30. have you understand what you copy? the error is obvious.

 

var Ini = (function () {    function Ini() {        var _this = this;        this.canvas = document.getElementById("canvas");        if (!BABYLON.Engine.isSupported()) {            window.alert('Browser not supported');        } else {            this.engine = new BABYLON.Engine(this.canvas, true);            this.scene = new BABYLON.Scene(this.engine);            this.main = new Main(this.scene);            window.addEventListener("resize", function () {                return _this.engine.resize();            });            // Assets, assets manager            // var assets = new Assets(this.scene);            // assets.bind(Constant.EVENT_ASSETS_MANAGEMENT, (event) => this.assetsAreLoaded(event));            this.scene.executeWhenReady(function () {                return _this.iniCamera();            });            this.engine.runRenderLoop(function () {                return _this.mainLoop();            });        }    }		this.scene.activeCamera => this.scene.activeCameras[0]and this.scene.activeCamera.attachControl => this.scene.activeCameras[0].attachControl(this.canvas);            }    };    Ini.prototype.mainLoop = function () {        var container = document.getElementById("fps");        container.innerHTML = "babylon.js : " + this.engine.getFps().toFixed(0) + " fps" + "<br>";        this.main.loop();        this.scene.render();    };    return Ini;})();

Look here how I did.

http://www.babylonjs-playground.com/#1IG874#13

[benoit-1842]

Sorry about my mistake   !!!!!!!   But now when I lauch it they say basic not defined.....  This thing is tough !!!!

 

Thanx,

 

Benoit

[benoit-1842]

Here's my main.js file

 

function Main(scene) {

        this.frame = 0;

        this.dummies = [];

        this.scene = scene;

// error is here ===> with that basic

        var basic = new Basic(scene); 

 

        console.log(DataJson.data.length);

        console.log(DataJson.data.Data.length);

 

        var index = 0;

 

        for (var prop in DataJson.data.Data[0]) {

            // result += objName + "." + prop + " = " + obj[prop] + "\n";

            if (prop == "time")

                continue;

 

            if (index == 3) {

                console.log(prop);

                var mesh = BABYLON.Mesh.CreateBox("", 0.2, scene);

            } else if (prop == "FootRight") {

                var mesh = BABYLON.Mesh.CreateBox("", .1, scene);

            } else if (prop == "FootLeft") {

                var mesh = BABYLON.Mesh.CreateBox("", .1, scene);

            } else if (prop == "HandRight") {

                var mesh = BABYLON.Mesh.CreateBox("", .1, scene);

            } else if (prop == "HandLeft") {

                var mesh = BABYLON.Mesh.CreateBox("", .1, scene);

            } else {

                var mesh = BABYLON.Mesh.CreateBox("", .05, scene);

            }

 

            var q = new BABYLON.Quaternion();

 

            q.x = DataJson.data.Data[0][prop].qx;

            q.y = DataJson.data.Data[0][prop].qy;

            q.z = DataJson.data.Data[0][prop].qz;

            q.w = DataJson.data.Data[0][prop].qw;

 

            mesh.rotationQuaternion = q;

 

            mesh.position.x = DataJson.data.Data[0][prop].x;

            mesh.position.y = DataJson.data.Data[0][prop].y;

            mesh.position.z = DataJson.data.Data[0][prop].z;

            this.dummies.push(mesh);

            index++;

        }

    }

    Main.prototype.loop = function () {

        var index = 0;

        for (var prop in DataJson.data.Data[this.frame]) {

            if (prop == "time")

                continue;

            this.dummies[index].position.x = DataJson.data.Data[this.frame][prop].x;

            this.dummies[index].position.y = DataJson.data.Data[this.frame][prop].y;

            this.dummies[index].position.z = DataJson.data.Data[this.frame][prop].z;

 

            var q = new BABYLON.Quaternion();

 

            q.x = DataJson.data.Data[this.frame][prop].qx;

            q.y = DataJson.data.Data[this.frame][prop].qy;

            q.z = DataJson.data.Data[this.frame][prop].qz;

            q.w = DataJson.data.Data[this.frame][prop].qw;

 

            this.dummies[index].rotationQuaternion = q;

 

            index++;

        }

 

        this.frame++;

 

        console.log(this.frame);

    };

    return Main;

})();

//# sourceMappingURL=Main.js.map

[Dad72]

This can be

var basic = new Basic.Basic(scene);

I'm not sure that you are using prototyping system correctly.

 

 

[benoit-1842]

Yeah I think I am struggling right now....  I always have error like scene not defined basic not defined etc....

 

thanx for helping me,

 

Benoit

[Dad72]

Here is something closer to what you had to do.
 

var Main = Main || {};(function (){    Main.scene = function()	{        var _this = this;		this.container = document.getElementById("fps");		        this.canvas = document.getElementById("canvas"); 		this.engine = null;		this.scene = null;				//.... = null		    };		Main.scene.prototype.Load = function()	{		if (!BABYLON.Engine.isSupported()) {            window.alert('Browser not supported');        }		else {            this.engine = new BABYLON.Engine(this.canvas, true);            this.scene = new BABYLON.Scene(this.engine);            this.Mesh();            window.addEventListener("resize", function () {                _this.engine.resize();            });			            this.scene.executeWhenReady(function () {                _this.Basic();            });			            this.engine.runRenderLoop(function () {               				_this.container.innerHTML = "babylon.js : " + _this.engine.getFps().toFixed(0) + " fps" + "<br>";				_this.loop();				_this.scene.render();            });        }	};			Main.scene.prototype.Mesh = function()	{        		this.frame = 0;        this.dummies = [];		        var index = 0;        for (var prop in DataJson.data.Data[0]) {            // result += objName + "." + prop + " = " + obj[prop] + "\n";            if (prop == "time")                continue;            if (index == 3) {                console.log(prop);                var mesh = BABYLON.Mesh.CreateBox("", 0.2, scene);            } else if (prop == "FootRight") {                var mesh = BABYLON.Mesh.CreateBox("", .1, scene);            } else if (prop == "FootLeft") {                var mesh = BABYLON.Mesh.CreateBox("", .1, scene);            } else if (prop == "HandRight") {                var mesh = BABYLON.Mesh.CreateBox("", .1, scene);            } else if (prop == "HandLeft") {                var mesh = BABYLON.Mesh.CreateBox("", .1, scene);            } else {                var mesh = BABYLON.Mesh.CreateBox("", .05, scene);            }            var q = new BABYLON.Quaternion();            q.x = DataJson.data.Data[0][prop].qx;            q.y = DataJson.data.Data[0][prop].qy;            q.z = DataJson.data.Data[0][prop].qz;            q.w = DataJson.data.Data[0][prop].qw;            mesh.rotationQuaternion = q;            mesh.position.x = DataJson.data.Data[0][prop].x;            mesh.position.y = DataJson.data.Data[0][prop].y;            mesh.position.z = DataJson.data.Data[0][prop].z;            this.dummies.push(mesh);            index++;        }    };			Main.scene.prototype.Basic() {        // backgournd color        this.scene.clearColor = new BABYLON.Color3(.1, .1, .1);        //light        var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), this.scene);        //camera        this.camera = new BABYLON.ArcRotateCamera("Camera", 0, 1, -15, new BABYLON.Vector3(0, 0, 0), this.scene);        this.camera.setPosition(new BABYLON.Vector3(5, 5, 5));        this.camera.lowerBetaLimit = 5;        this.camera.upperBetaLimit = (Math.PI / 2) * .95;   		// Camera 1 (right side)		var camera1 = new BABYLON.ArcRotateCamera("camera1", 0, Math.PI/2, 20, new BABYLON.Vector3(0,7,0), this.scene);		this.scene.activeCameras.push(camera1);	 		// Camera 2 (left side)		var camera2 = new BABYLON.ArcRotateCamera("camera2", -Math.PI/2, Math.PI/2, 20, new BABYLON.Vector3(0,7,0), this.scene);		this.scene.activeCameras.push(camera2);	 		// Viewports		camera1.viewport = new BABYLON.Viewport(0.5, 0, 0.5, 1.0); // right		camera2.viewport = new BABYLON.Viewport(0.0, 0, 0.5, 1.0); // left	 		// Camera control			this.scene.activeCameras[0] = camera1;		this.scene.activeCameras[0].attachControl(this.canvas, true);    };	    Main.scene.prototype.loop = function ()	{        var index = 0;        for (var prop in DataJson.data.Data[this.frame]) {            if (prop == "time")                continue;            this.dummies[index].position.x = DataJson.data.Data[this.frame][prop].x;            this.dummies[index].position.y = DataJson.data.Data[this.frame][prop].y;            this.dummies[index].position.z = DataJson.data.Data[this.frame][prop].z;            var q = new BABYLON.Quaternion();            q.x = DataJson.data.Data[this.frame][prop].qx;            q.y = DataJson.data.Data[this.frame][prop].qy;            q.z = DataJson.data.Data[this.frame][prop].qz;            q.w = DataJson.data.Data[this.frame][prop].qw;            this.dummies[index].rotationQuaternion = q;            index++;        }        this.frame++;        console.log(this.frame);    };		})();

Use in HTML: 

var myScene = new Main.scene();myScene .Load();

[benoit-1842]

thanx right now my head hurts I will give it a try later but I would like to thank you

 

Merci,

 

Benoit

[benoit-1842]

Where I should put the html script inside my html...  Like after the <div>, <body> ?  I really don't know....

 

Thanx a lot,

 

Benoit

[Dad72]

If you do not know this, I think you should read the tutorial on how to program HTML5 and Javascript.

 

already,  you use HTML 4  : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> ????????

 

Why? You want to use the HTML5 canvas Balide No?

 

I feel that you do not even have basic HTML programming. You should start there I think.

 

Then learn Javascript and then start learning the use of Babylon. There are tutorials available in the documentation.

 

Nobody will do the work in your place and that's what I started to do and you do not seem to understand. I think I will not help you as well.

 

[benoit-1842]

Yeah you are right in a certain way....  I try the best I can to use the babylon.js potential a little bit too fast....  It's just I am confuse with everything I found...  Since I am using babylon.js (3 months now) I never had to use html...  I was always using the same template an index and a localhost....  It's the first time I am face to face with the html inside babylon.js...  I just have a good idea of what I want to produce.  But I must say that I am eager to learn and I think you are right, I should learn html to be more fluent in babylon.js.....  I know javascript fairly well now, but I must confess that's the first time I will use html in a babylon.js context.....

 

Thanx a lot for your insight,

 

Benoit

[Dad72]

I prefer to steer directly on track to you. HTML is very easy to learn, in 2 weeks, you should have the basics.

 

Do not try to go too fast. 

 

Good luck anyway. 

[benoit-1842]

Hi Dad72....  I would like to say that I want to excuse myself to have rush myself into babylon.js and asking stupid question.......  I pass the week doing tutorials and I am presently reading a book call HTML 5 games.  I would like to say too that I am very proud because without rushing things I have made work the code you have send to me.  There was error and with some hard work I solved the problem.....  Now I just have to continue my work in the good direction....

 

Merci beaucoup Dad72 de m'avoir donne d'une certaine un petit coup de pied en quelque part parce que c'est qu'en informatique on est beaucoup plus productif et heureux lorsqu'on comprend nos instruments et nos outils....

 

Benoit 

[Dad72]

No problem. 

 

Ne vous excusez pas. ce n’est pas grave. 

[benoit-1842]

merci beaucoup de repondre....  Ca me fait du bien d'entendre ca.......

 

Benoit

[GameMonetize]

Il n'y a jamais de mauvaise question Benoit:)

[benoit-1842]

Merci de cette reponse a la vorlon !!!!!!!!!  Donc rapidement j'ai une petite question (j'en ai toujours  !!!!) : j'ai de la difficulte a avoir un gros plan rapproche avec ce code....Je ne sais pas quelle variable change.....  P-E que tu peux m'aider.....  Last post in French....  But is it me or the forum is almost 50 % from country from the francophonie ?

 

Merci,

 

Benoit

 

var Main = Main || {};

 

(function ()

{

 

    Main.scene = function()

{

         _this = this;

this.container = document.getElementById("fps");

        this.canvas =  document.getElementById("canvas"); 

this.engine = null;

this.scene = null;

//.... = null

 

    };

 

Main.scene.prototype.Load = function()

{

if (!BABYLON.Engine.isSupported()) {

            window.alert('Browser not supported');

        }

else {

console.log(this.canvas);

            this.engine = new BABYLON.Engine(this.canvas, true);

 

            this.scene = new BABYLON.Scene(this.engine);

 

            this.Mesh();

 

            window.addEventListener("resize", function () {

                _this.engine.resize();

            });

 

            this.scene.executeWhenReady(function () {

                _this.Basic();

_this.engine.runRenderLoop(function () {               

_this.container.innerHTML = "babylon.js : " + _this.engine.getFps().toFixed(0) + " fps" + "<br>";

_this.loop();

_this.scene.render();

            });

            });

 

            

        }

};

 

Main.scene.prototype.Mesh = function()

{        

this.frame = 0;

        this.dummies = [];

        var index = 0;

 

        for (var prop in DataJson.data.Data[0]) {

            // result += objName + "." + prop + " = " + obj[prop] + "\n";

            if (prop == "time")

                continue;

 

            if (index == 3) {

                console.log(prop);

                var mesh = BABYLON.Mesh.CreateBox("", 0.2, this.scene);

            } else if (prop == "FootRight") {

                var mesh = BABYLON.Mesh.CreateBox("", .1, this.scene);

            } else if (prop == "FootLeft") {

                var mesh = BABYLON.Mesh.CreateBox("", .1, this.scene);

            } else if (prop == "HandRight") {

                var mesh = BABYLON.Mesh.CreateBox("", .1, this.scene);

            } else if (prop == "HandLeft") {

                var mesh = BABYLON.Mesh.CreateBox("", .1, this.scene);

            } else {

                var mesh = BABYLON.Mesh.CreateBox("", .05, this.scene);

            }

 

           

 

            mesh.position.x = DataJson.data.Data[0][prop].x;

            mesh.position.y = DataJson.data.Data[0][prop].y;

            mesh.position.z = DataJson.data.Data[0][prop].z;

            this.dummies.push(mesh);

            index++;

        }

    };

 

Main.scene.prototype.Basic = function() {

        // backgournd color

        this.scene.clearColor = new BABYLON.Color3(.1, .1, .1);

 

        //light

        var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), this.scene);

 

        //camera

        this.camera = new BABYLON.ArcRotateCamera("Camera", 1,0.8, 35, new BABYLON.Vector3(15, 15, 15), this.scene);

        this.camera.setPosition(new BABYLON.Vector3(0, 15, -30));

 

        this.camera.lowerBetaLimit = 5;

        this.camera.upperBetaLimit = (Math.PI / 2) * .95;

   

// Camera 1 (right side)

var camera1 = new BABYLON.ArcRotateCamera("camera1", 0, Math.PI/2, 20, new BABYLON.Vector3(0,7,0), this.scene);

this.scene.activeCameras.push(camera1);

 

// Camera 2 (left side)

var camera2 = new BABYLON.ArcRotateCamera("camera2", -Math.PI/2, Math.PI/2, 20, new BABYLON.Vector3(0,7,0), this.scene);

this.scene.activeCameras.push(camera2);

 

// Viewports

camera1.viewport = new BABYLON.Viewport(0.5, 0, 0.5, 1.0); // right

camera2.viewport = new BABYLON.Viewport(0.0, 0, 0.5, 1.0); // left

 

// Camera control

this.scene.activeCameras[0] = camera1;

this.scene.activeCameras[0].attachControl(this.canvas, true);

    };

 

    Main.scene.prototype.loop = function ()

{

        var index = 0;

        for (var prop in DataJson.data.Data[this.frame]) {

            if (prop == "time")

                continue;

            this.dummies[index].position.x = DataJson.data.Data[this.frame][prop].x;

            this.dummies[index].position.y = DataJson.data.Data[this.frame][prop].y;

            this.dummies[index].position.z = DataJson.data.Data[this.frame][prop].z;

 

            

 

            index++;

        }

 

        this.frame++;

 

        console.log(this.frame);

    };

 

})();

[Dad72]

Le code est difficilement lisible comme ca. il faudrait utiliser la balise BBCode "<" ">" pour y voir plus claire ou le mettre sur le playground pour mieux le debugger.

Et j'ai pas vraiment compris la question par "avoir un gros plan rapprocher".

 

Est oui on peut dire qu'il y a beaucoup de français ici (pour les 50% je sais pas, mais on est pas loin), mais il y a aussi des anglais, américain, allemand, chinois, indien (j'en oublie surement)..... bref, c'est international d'ou le faites que l'on écrit avec la langue internationale. mais il m'arrive moi aussi d’écrire en français quand j'ai du mal a me faire comprendre en anglais.

[benoit-1842]

Hi !!!!  What i am trying to do, it's to have my model in each viewport center to the screen. Right now they are at the bottom of my screen.  I want to have them bigger and at the center of the viewport.  A little bit like in Blender when you are in camera view and the model is all what you can see in the camera view when you press 0....

 

here's the file of my work :https://drive.google.com/folderview?id=0B_ZBy6q5jS8xbkVBUlpDTHhrUEk&usp=sharing

 

Thanx,

 

Benoit