Creating my own module.

webGLmmk · August 3, 2016

I'm trying to include a constructor i've put in another file. There's something module related I'm not getting here. I have this constructor that works fine in the main html file. When i try to load it in an external file in the head, it won't work.

This is just a normal...JavaScript constructor. Im trying to create star objects, and later on planet objects, etc, for a space scene. Not having trouble with the code itself, just creating the module. This is my new point of progression.

Starting with the html file:

<head>
<!-- ....  -->
        <script src="js/hand.minified-1.2.js"></script>
        <script src="js/cannon.js"></script>
        <script src="js/oimo.js"></script>
        <script src="js/babylon.js" ></script>
        <script src="js/star.js" ></script>
</head>
<body>
    <canvas id="renderCanvas"></canvas>
    <script>
       /*...babylon stuff*/

      //star instances
	var star1 = new Star(new BABYLON.Vector3(500, 500, 1000));
	var star2 = new Star(new BABYLON.Vector3(0, -100, 200));
	var star3 = new Star(new BABYLON.Vector3(-600, 200, 1200));

      /* ... more babylon stuff ...*/


    </script>
</body>
</html>

Here's star.js. Entirely whats in the file, basically just the Star constructor. When i put it directly in the script tag in the html file, it works. I"ve also tried putting the script tag in the body.

var Star = function (position) {
	this.sphere = BABYLON.Mesh.CreateSphere("sphere1", 50, 100, scene);
	this.mat = new BABYLON.StandardMaterial("white", scene);
	this.mat.diffuseTexture = new BABYLON.Texture("textures/suntexture.jpg", scene);
	this.mat.specularColor = new BABYLON.Color3(0, 0, 0);
	this.sphere.material = this.mat;
	this.sphere.position = position;
	

	this.particleSystem = new BABYLON.ParticleSystem("particles", 15000, scene);
	this.particleSystem.particleTexture = new BABYLON.Texture("textures/fireflare.jpg", scene);
	this.particleSystem.emitter = this.sphere;
	this.particleSystem.color1 = new BABYLON.Color4(0.984, 0.337, 0.047, 1);
	this.particleSystem.color2 = new BABYLON.Color4(0.984, 0.757, 0.047, 1);
	this.particleSystem.minSize = 8;
	this.particleSystem.maxSize = 30;
	this.particleSystem.minLifeTime = 0.5;
	this.particleSystem.maxLifeTime = 0.8;
	this.particleSystem.emitRate = 15000;
	this.particleSystem.direction1 = new BABYLON.Vector3(-120, -120, -120);
	this.particleSystem.direction2 = new BABYLON.Vector3(120, 120, 120);
	this.particleSystem.minAngularSpeed = 0;
	this.particleSystem.maxAngularSpeed = Math.PI;
	this.particleSystem.minEmitPower = 1;
	this.particleSystem.maxEmitPower = 3;
	this.particleSystem.updateSpeed = 0.01;
	this.particleSystem.start();
};

I've read all about modules, but putting them in practice is another thing...and its a seemingly endless topic. I'm trying to refresh myself but I could spend countless hours in convoluted Google results. Posting here is more relevant to what I'm trying to accomplish. Please dont send me to StackOverflow

grazie

JohnK · August 3, 2016

What errors are you getting in the console? Here is a guess - you are trying to call the star function before it is loaded.

Try putting this stuff


       /*...babylon stuff*/

      //star instances
	var star1 = new Star(new BABYLON.Vector3(500, 500, 1000));
	var star2 = new Star(new BABYLON.Vector3(0, -100, 200));
	var star3 = new Star(new BABYLON.Vector3(-600, 200, 1200));

      /* ... more babylon stuff ...*/

Into a function called by window.onload. Something like

<script>
Window.onload = main;

function main() {
       /*...babylon stuff*/

      //star instances
	var star1 = new Star(new BABYLON.Vector3(500, 500, 1000));
	var star2 = new Star(new BABYLON.Vector3(0, -100, 200));
	var star3 = new Star(new BABYLON.Vector3(-600, 200, 1200));

      /* ... more babylon stuff ...*/

}


    </script>

Having a problem editing above code window.onload shouls NOT start with a capital.

webGLmmk · August 4, 2016

@JohnK

You're on track with it being a scope issue. Someone on stack overflow helped me after all :). Sorry Stack Overflow, I'll never talk smack about you again

http://stackoverflow.com/questions/38748121/creating-a-module-for-babylon-js-scene

Important to understand about putting a constructor in an external file-- put scene as a parameter in the constructor.

	var Star = function (position, scene) {
		this.sphere = BABYLON.Mesh.CreateSphere("sphere1", 50, 100, scene);
		this.mat = new BABYLON.StandardMaterial("white", scene);
		this.mat.diffuseTexture = new BABYLON.Texture("textures/suntexture.jpg", scene);

                
                 // ...
	};

Babylon.js constructors and properties like createSphere() and Texture, etc, have "scene" passed into them. So if you put the constructor in another file without passing scene in, you'll have an error and the page won't load, because it won't know what scene is.

Then when you create an instance in your main script file or html file, pass in scene.

	var star1 = new Star(new BABYLON.Vector3(500, 500, 1000), scene);

If you've built part of Babylon.js, this may seem pretty obvious. But there have to be a few people like me that have looked through the source code and don't get the significance until it's immediately relevant. NOW i understand why scene is passed in to new class instances, and why you see (BABYLON) passed in as a parameter when you look in the modules. (though I"m still pretty fuzzy about all the encapsulation and why "var BABYLON;" needs to be created each time. )

It also works if you put scene in the global scope, outside of createScene(){ /* ..*/}. I'm not at the point where doing that would create a problem, but I may as well start understanding encapsulation better.

Sign In

Creating my own module.

Recommended Posts

webGLmmk

Link to comment

Share on other sites

JohnK

Link to comment

Share on other sites

webGLmmk

Link to comment

Share on other sites

Join the conversation

Recently Browsing 0 members

Browse

Activity