Jump to content

How to put a babylon animation on html form


Recommended Posts

Do you mean a transparent background ?


The scene is cleared each frame with scene.clearColor() which is given a Color3 argument.

Don't know if we can pass an alpha or a Color4 instead ...


The html canvas element can be cleared with a transparent color of course. 

Link to comment
Share on other sites

Like this?




That should do the trick, eh?  I was lazy and used absolute positioning - a cop-out compared to tables and CSS fixed-right magic, etc.  But I DID use percentages for canvas placement and sizing - a wise thing in my opinion... for good window resizing. 


There's probably better ways, but, I'll let you figure those out.  Just view the source of that page... grab whatever you need.


Do people really use <font> elements these days?  ;)  I think someone needs to brush-up on their html/css skills.  Ahem.  :)

Link to comment
Share on other sites

My pleasure... I'm glad that worked for your needs. 


It's none of my business... but... can I ask what part of the world you live-in?  (only if you want to tell).   Just... general area is fine... no need for gps coords.  :)


By the way, those 3 boxes are dark on the bottom... due to the way a hemisphericLight works.  A single up-aiming hemi light can light-up all sides of a scene... except the bottom.


To make a hemi light illuminate the bottom of the boxes...


light.groundColor = new BABYLON.Color3(0.3, 0.3, 0.3);  // low powered gray light


Increase those numbers or color them as wanted, of course.


See the new BABYLON.Vector3(0, 1, 0) in the hemisphericLight constructor?  That is a "direction" and not a location.  That is saying... make this light shine in a straight-upward direction... and then the sky bounces the light back down to the scene. 


So, now you see... that the .groundColor lighting... actually aims in the same direction as the hemi's main light direction.  In this case, both (hemi bulbs) aim up.  Weird, eh?  (yawn) 


All in all, the hemi light works great... it's my favorite.  :)  HemisphericLights are the only light type that uses a .groundColor property.  Our other 3 light-types don't need it, because they don't work as hard as the hemi light works.  ;)  Be well!

Link to comment
Share on other sites



I think you have another thread that talks about Blender animations, right?  Besides... I have zero experience in that, but... you might want to go here or use the standard forum search...  and search for...


blender animation 


(maybe do it with quotes around it)  There's lots of people talking about Blender animations.  :)  Be well.

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