Jump to content

Scene neither loading on Sandbox nor on index.html file


Recommended Posts

Helloo Everyone... I am new to BabylonJS. 
but unfortunately my experience is not getting very good..
i m trying to load my .babylon file in Sandbox or in Visual Studio index.html file. 
but i m not getting any results. when i am trying to load in Sandbox i m getting errors shown in the image attached below.

Anyhow i have added the MIME types in Web Config file in Visual Studio. Any help will be appreciated. 



Link to comment
Share on other sites

Hi Abdullah, welcome to the forum, and sorry to hear you are having problems.

I think I have seen this problem before, and it is caused by NOT having access to the BABYLON Materials Library.  I am going to request some assistance from @davrous for this... perhaps he has some advice.  Meantime, check this list...


If you are using any of those materials in your project, try including their JS files... via <script> elements... in the same way as you include babylon.js, hand.js, etc.  I think those material JS files need to be "included" into your project (if used on a material).

  See the...

<script src="../dist/babylon.diffuseEmissiveMaterial.js"></script>


When we work with these fancy materials in our playground, the materials library files are automatically included.  But in non-playground scenes, you will need to manually include any library materials that you use in your scene.  Not sure about Materials Library => Sandbox.  Perhaps Davrous will have some words about that.

No promises, but it is worth trying.  Hope this helps.  Please report results, thanks.  Be well.

Link to comment
Share on other sites

Actually i guess i forget to tell you something that i have .babylon files exported from Blender. And want to use that meshes in my scene.
So are above mentioned guidelines also for them??? 

And if i want to work with keyboard inputs ..is there also any library for them??? Because inputs are also not working.. i am trying the same code of inputs as shown in playground but it isn't working. 

i need help on early basis... @Wingnut 
So it will be good for me if you do some help as soon as possible. 

Thanks, Be well

Link to comment
Share on other sites

Thx JC.  But with failed material texture load, won't it fall-back to checkerboard texture?  Maybe not, for Sandbox.

Or is ball.png a refmap used in a shader?  Maybe no fallback to checkerboard for failed shader refmaps.  But... hmm... should be.

Abdullah... does the scene have good light?  Good camera?  Inputs should activate automatically, I think.  Make sure you have attached the camera to the canvas.

ANY mesh seen?  Does scene.meshes have length (in your home version)?  You could iterate through all scene.meshes and set each mesh.showBoundingBox = true;  *shrug*  Just some ideas. 

But JC is correct, I think.  First step... get ball.png to load with scene.

Link to comment
Share on other sites

yeah, @JCPalmer i m also selecting .PNG files.

but i have also tried without any texture. it Means i am not using any texture. just a simple .babylon file. 

And @Wingnut if you are saying about camera then i don't think that's a problem. but i will surely recheck it.  

Anyhow i have downloaded the import meshes file from playgorund and then run it on my PC. And it was giving the same result as was on playgorund. but then i loaded my .babylon file in the code and run it again but my meshes were not showing. 

so i guess it is the problem of .babylon file.


Link to comment
Share on other sites

I think we will need more than just a picture of a console log.  An export log file, .blend, or .babylon.  I doubt this has anything to a missing materials library, since you cannot directly cause the need for one using the Blender JSON exporter.

Probably not even Blender related as well.  I assume you can run the demo scenes on this machine.  Something looks wrong with that screen shot.  Sandbox has sceneloader logging turned on.  Here is Sandbox with on of my test scenes.  It errors, because of a missing sound file, but clearly shows the .babylon producer tag info before doing anything.


Link to comment
Share on other sites

There is no producer tag in .babylon files.  Your exporter is way out of date.  I exported ball from blend.  It made no textures & loaded in sandbox fine (though it failed to produce a scene loader audit trail).

Same thing with racket, except you only get a black scene.  Probably a light issue.


Change to 5.0.7 exporter.  Good luck.


Link to comment
Share on other sites

@Abdullah : I would not bother trying to put the zip file in the Blender "addons" directory.

Just open Blender then: File -> User Preferences -> Install From File. Activate the new addon, then "Save User Settings"

If I have older versions I usually remove those first.

as @JCPalmer : says above - no need to unzip the files - Blender will handle it

cheers, gryff :)

Link to comment
Share on other sites

@Abdullah : Well in the Sandbox you are probably using the camera defined in the .babylon file (the one that comes from Blender) whereas in your index file you are using a camera you define - and it is a long way from your table.

Try this instead:

var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 10, BABYLON.Vector3.Zero(), scene);

Also if you want to change the size of the table use:

table.scaling = new BABYLON.Vector3(34, 34, 34);

You are also making the light follow the camera - better to use: 

light.parent = camera;

As the "scene.registerBeforeRender" function will be called before every frame.

And finally, the normals of your table mesh are screwed up - particularly the table legs. Recalculate Normal Outside in Blender.

cheers, gryff :)




Link to comment
Share on other sites

Hi A!  This is quite simple.


I will leave you to do keypress events, and adjustments to directionAndMagnitude variable.  You can see that variable used in animation function line 30.  Our addInPlace() is a wonderful feature for doing... vector3 + vector3  .

Continuing the tour... you can easily see the impact and clear handlers in lines 37-52.

Lines 54-72 are actionManager code.  There are enter and exit intersect triggers that are registered on both paddles (racquets).  There are also executeCode actions that target the onImpact(meshEvent) and onClear(meshEvent) handler functions.  Notice that the meshEvent is sent to the handler functions... automatically.  (Thanks to Deltakosh making it so.)  :)

I use data from the meshEvent object... in lines 40, 41, 49, 50.   It is handy.   A reference to sphere might be stored on it, but I didn't feel like looking for it. 

Instead, I did a direct ref to "sphere" in lines 44 and 51.   I would have rather used meshEvent.intersectingMesh.scaling, and not sphere.scaling. 

Perhaps I have more things to learn and/or contributions to make to BJS framework.  :)

Try to learn to use your browser F12 dev tools object inspector feature... and it will be easy to view all the data (arriving at the handlers) on the meshEvent object.  Using object inspectors is a fast-track to learning. 

Most times, you can simply do console.log(meshEvent)... and then open your dev tools JS console, and click on the word "OBJECT".  It should open your browser object inspector.

Hope this helps.  Use playground search, docs search, and forum search to find information and demos about 'keypress'.  Good luck!   Be patient with yourself.  :)

Link to comment
Share on other sites

thanx @Wingnut... 

i think i have'nt told you everything. Actually i know how to add key events and i have also added some in my code.

actually i don't want to move the ball just right .. i want to move the ball like a table tennis ball. i have applied physics imposter on my sphere ball .. and i have set linear velocity .  

and my actual question is that i want to move the ball continuously with linear velocity untill i press some key and decrease or increase its velocity. 

actually i want that when ball touch racket then a force should apply on ball which will have increase or decrease  speed . and i want to do it like that  

when ball touches racket a key will be pressed which will add or sub velocity of the ball by some factor may be constant. and if key is not pressed then ball should with the speed it was moving before. 

So kindly inform me if you understand my question and have any solution.

anyhow i have used applyimpulse. but i guess i have not used ot correctly. 

Link to comment
Share on other sites

Hi again.  Ok, let's call it "boost" (speed increase) and "brake" (speed decrease). 

Although I do not know how to do it, you could increase/decrease the paddle restitution value.

Somewhere global, set var paddleDefaultRestitution = 0.9);  Also make sure both your paddles have initial restitution of 0.9

Now... inside that render loop...

// paddle 1 boost/brake/normal
if (paddle1BoostKeyPressed) { paddle1.impostor.setRestitution(paddleDefaultRestitution + .3) }  // boost
else if (paddle1BrakeKeyPressed) { paddle1.impostor.setRestitution(paddleDefaultRestitution - .3) }  // brake
else { paddle1.impostor.setRestitution(paddleDefaultRestitution) }  // return to normal restitution

// paddle 2 boost/brake/normal
if (paddle2BoostKeyPressed) { paddle2.impostor.setRestitution(paddleDefaultRestitution + .3) }  // boost
else if (paddle2BrakeKeyPressed) { paddle2.impostor.setRestitution(paddleDefaultRestitution - .3) }  // brake
else { paddle2.impostor.setRestitution(paddleDefaultRestitution) }  // return to normal restitution

I do not know if there is a .setRestitution() function in OimoJS or CannonJS.  I'm sure there is... but you will need to study their API's to learn how to change an impostor's restitution "on the fly".  Maybe others will comment and tell us how to do it.

But, do you understand the "theory", here?  I hope so.  We don't change the ball speed.  Instead, we make the paddles more/less "bounce-powerful".  This is a signal to the physics engine... to change the bounce-off-the-paddle speed.  This is just an idea... not a very good one.  

The "paddle-swapping" and "impostor-swapping" ideas... further below... might be easier/wiser.  :)

Adjusting ball.linearVelocity for boost and brake IS possible, but difficult.  You MUST wait for the ball to impact the paddle FIRST, and then boost or brake.  If you apply boost or brake at the same time as impact happens, the ball may go THROUGH the paddle, or get stuck IN the paddle.  It is because you have confused the physics engine.  It is best to allow the physics engine to freely calculate its own velocities.

I have a little helper idea.  If you make THREE paddle1's and THREE paddle2's... you could swap them out when the keys are pressed. 

So, you would have 6 paddles.  Paddle1 and paddle2 with weak restitution, paddle1 and paddle2 with normal restitution, and paddle1 and paddle2 with powerful restitution.  Secretly change the paddles... QUICKLY, depending upon which keys are pressed.  *shrug*.  You could also quickly re-create the physicsImpostor (with different restitution value) for a paddle... upon key presses. 

The render loop code will be somewhat the same as shown above.  Instead of changing the restitution, you would change-out the paddles or change-out the physics impostors.  Use the same if-then-else render loop structure... just use different { actions }. 

I'm not a pro.  I could have said wrong things.  I am only a hobby-level BJS user.

These are some ideas... not necessarily GOOD ideas.  :)   Perhaps others will comment with better wisdom.  Good luck, stay in touch. 

Link to comment
Share on other sites

Helloo Everyone.. 
i am stuck on the collision.

i want to increase or decrease the speed of ball when it collides with racquet. 

i am sharing my code. in which sphere is my ball and r1 and r2 are the raquets. 

r1 moving keys are  UHJK and for r2 are WASD. So kindly have a look and guide me please. 

@Wingnut @gryff @JCPalmer



Link to comment
Share on other sites

Hi A.  Okay, into the playground we go. 


I hope you don't mind my temporary-publishing of racket2 and racket3 files.  You could do the same.  Free github accounts are easy to get.  With my free account, I created a folder named 'misc' and I can drag-and-drop files into it (be sure to hit commit button at bottom of github page, after drag-drop). 

You can do the same, if you wish.  Do not create the 'master' folder inside 'misc'... but still use /master in the path, just like I did.

ANYWAY, I removed all .checkCollisions.  Those are ONLY for BabylonJS built-in colliders/ellipsoids, and not used with physics engines.

Also, I temporarily disabled your textures... no big deal.

See that "function" at the end of line 78?  Sometimes that is called a callback function.  Notice that I put the entire racket3 loader... inside the callback function of racket2 loader?  Strange, huh?  I finish BOTH callback functions...  in lines 104 - 105.

Notice in the #1 version of this playground, I did not do that.  In the #2 version, I was TRYING to stop some "r1 is undefined" and "r2 is undefined" console errors.  Those errors happen when WASD keys are pressed, or when UHJK keys are pressed.  I don't know why that is happening.  Perhaps others will help us.

In summary, you have some physics impacts happening, here.  Good, eh?  The scene is working... a little bit.  :) 

This scene is small sized.  The .radius value in camera line 5... is only 10 units.  It might be wise to make the table and racquets larger.  Physics engines work better... with larger mesh.  I think you should make the table/racquets 5-10 times larger.

Abdullah, will you be using Q and E keys = boost/brake for r2, and Y and I keys = boost/brake for r1?  :)

Perhaps something like (in semi-pseudo code)...

if (keypress === E) {  // increase restitution
   r2.physicsImpostor = new BABYLON.PhysicsImpostor(r2, BABYLON.PhysicsImpostor.BoxImpostor, { mass: 0, restitution: 1.0 }, scene);

if (keypress === Q) {  // decrease restitution
   r2.physicsImpostor = new BABYLON.PhysicsImpostor(r2, BABYLON.PhysicsImpostor.BoxImpostor, { mass: 0, restitution: 0.6 }, scene);

Be sure to set/return restitution to normal, if no boost or brake keys are pressed.

 r2.physicsImpostor = new BABYLON.PhysicsImpostor(r2, BABYLON.PhysicsImpostor.BoxImpostor, { mass: 0, restitution: 0.8 }, scene);

Okay, all this should help, somewhat.  What you are trying to do... can be difficult.  Physics engines can be can be difficult to control.

If you wish to make your physics impostors PERFECTLY "fit" your racquets, you will need to use the CannonJS physics engine, and use MeshImpostor.  OimoJS does NOT currently have a MeshImposter available.  But, so far, your Oimo BoxImpostors are working quite well.

Good luck, have fun, be well.

Forum friends, can you help us with the r1/r2 undefined errors... in the keypresses?  It is a JS scope issue.  r1 and r2 are globalized variables, but possibly incorrectly globalized.  Thanks!

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