Sign in to follow this  
webGLmmk

Creating my own module.

Recommended Posts

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

@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.

Share this post


Link to post
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.

Guest
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.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.