How to set scene background transparent?

[MasterK]

i set scene.clearColor = new BABYLON.Color4(**,**,**,0);

 

it doesn't work.

[Temechon]

It works on the playground ! : http://www.babylonjs-playground.com/#1MOTR8#1

[MasterK]

!!!!

how did u set the canvasZone in html????

i download the zip and cannot run normal.

[MasterK]

 

    <div id="canvasZone" style="background-color: #ff7fce;">

        <canvas id="renderCanvas"></canvas>

    </div>

 

it's ok... i should try more in my own case.

[Wink]

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

[aWeirdo]

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

[Wink]

@aWeirdo,

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.

[aWeirdo]

@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  

[Nabroski]

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



  

[Wink]

@Nabroski, thanks for the info, I guess its a feature request than, but it looks to be a bug to me. I say this because it is the only way to "export" an app from PG and I'd expect it to work locally

 

[Nabroski]

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

jzip
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
https://github.com/BabylonJS/Babylon.js/tree/master/Playground

https://doc.babylonjs.com/generals/how_to_start

 

[Wink]

I've created a pull request which adds a div canvasZone to the zipContent/index.html file, this will help some apps mentioned in this thread.

[aWeirdo]

Hi again @Wink

Why do you need a wrapping div ?

As i mentioned before, anything you want to do with it, can simply be done to the canvas element with same result :-)

[Wink]

I know, but existing PG apps are expecting canvasZone so I added it so they work when exporting via "Get .zip".

[Nabroski]

@Wink

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
http://www.babylonjs-playground.com/#1SVBY1#0

 

Good Luck
Thank you.

[Wink]

Thanks, but its Greek to me  

I don't understand how to use the ALT key to drag what?

[Nabroski]

ALT on your Keybord + Mouse to fire a drag event

Okay i see im the one who has to implement it  Nevermind