Jump to content

How to set scene background transparent?


Recommended Posts

  • 1 year later...
38 minutes ago, Wink said:

@Temechon, I just downloaded the zip file and it doesn't have a div canvasZone and when I try to run it in chrome I get an error "Paused on exception: 'TypeError: Cannot read property 'style' of null'.".

So it seems someone/you edited the html in Playground, how do you do that?

The canvasZone element is just a div wrapped around the canvas element in the PG to seperate the editor area and the canvas area.

As for more examples of clearColor and background

See this (Using the body tag); http://www.babylonjs-playground.com/#1CSC6K#0

Or this (Using the canvasZone element); http://www.babylonjs-playground.com/#1CSC6K#1

But, since the canvas is also just a HTML element, you don't actually need any wrapping div, the css can be applied directly to the canvas element :)
See this; http://www.babylonjs-playground.com/#1CSC6K#2

Link to comment
Share on other sites


So it seems there is a "bug" in "Get .zip" button of PG as the canvasZone isn't in resulting file, but I do see it in index and index.css when I use dev tools in chrome.

And I discovered the third option, using canvas element directly.

Link to comment
Share on other sites

@Wink I believe the "Get .zip" downloads a predefined example scene, the html simply contains a canvas, etc, and not actual html from the PG,
so as the canvasZone is specific to the PG, to help with the split between the editor and the canvas, it isn't actually in the example scene that is downloaded :) 

Link to comment
Share on other sites

@Wink No this is not a bug, maybe a features request by you.  Yes, it is an messy, unoptimized code, probably done by a trainee of babylonjs - but it is still not a bug :) 

Its made to be the simpleness solution for a index.html file  - a webgl startup file
https://doc.babylonjs.com/tutorials/Creating_a_Basic_Scene (*no css file etc.)

i can right click with the mouse on the blue area - the rendering area of the playground and a dialog pops up 
Save Picture as ...
Untersuchen ( I forgot how its called in your language )<<<Click on it

window (Dev Tools):
you can now move  with the mouse in the playground and  (at least on Chrome) it will show you the different html tags (and more info) you see (hopefully)  the div id="canvasZone" is wrapping the <canvas id="renderCanvas">

I don't know, the one who's coded it, thought it's better to do it this way, when something works -, it is good. Job done.

Note: (*You can also change values in the Chrome Dev Window, dragging elements around etc. ) 

Hope this helps.


Link to comment
Share on other sites

This is a special case, everything else will work.

How its currently done, it is perfect! 

For Everything else, - Someone has to sit down and go through all the documentation of the libraries, / or find a better solution to make a optimization, i have a very basic understanding of

playground  basics

But theirs is no way that i do more then this, be course of my time management. real life sucks.

If you get more into detail, feel free to contribute



Link to comment
Share on other sites


so it seems you catch fire to contribute. 
Copy Paste in the a Playground use latest Chrome ONLY 

ALT KEY for dragging element. 

$("x-splitbox > [splitter]").remove(),$("#jsEditor").css("opacity",".9"),$("#editorButton").hover(function(){$("#jsEditor").fadeTo("slow",.1)},function(){$("#jsEditor").fadeTo("slow",1)});var elm=$("#canvasZone");elm.insertBefore(elm.prev()),$("#editorButton").trigger("click"),setTimeout(function(){$("#editorButton").trigger("click")},100),setTimeout(function(){$("newButton").trigger("click"),createNewScript()},150),setTimeout(function(){$("newButton").trigger("click"),loadScriptFromIndex(4)},200),function(e){e.fn.drags=function(o){o=e.extend({handle:"",cursor:"move"},o);var t=this;t.css("cursor",o.cursor).on("mousedown",function(o){var n=t.outerWidth(),r=t.outerHeight(),i=t.offset().top+r-o.pageY,c=t.offset().left+n-o.pageX;1===o.which&&(e(window).on("keydown",function(o){18==o.witch&&console.log("ja"),e(window).on("mousemove",function(o){t.addClass("drag"),e(".drag").offset({top:o.pageY+i-r,left:o.pageX+c-n})})}),e(window).on("keyup",function(t){e(window).on("mouseup",function(o){1===o.which&&(e("#jsEditor").removeClass("drag"),e(window).off("mouseup mousemove"))}),o.preventDefault()}))})}}(jQuery);var createScene=function(){var e=new BABYLON.Scene(engine);$("#jsEditor").drags({},function(e){});new BABYLON.ArcRotateCamera("camera",.5*Math.PI,1,15,BABYLON.Vector3.Zero(),e),new BABYLON.HemisphericLight("light1",new BABYLON.Vector3(0,1,0),e);return e};

version with some notes


Good Luck
Thank you.

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