Setting Background Cubemap & Transparent Background

Tagged: background, environment, transparent

This topic has 5 replies, 3 voices, and was last updated 6 years, 10 months ago by brice.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts
2017-12-29 at 12:48 am #1477
brice
Participant
Hello,
i come from Three.js, when i setted my background i used that :
```
app.scene.background = new v3d.CubeTextureLoader()
    .setPath( 'textures/cubemap/sky/' )
    .load( [ 'posx.jpg', 'negx.jpg', 'posy.jpg', 'negy.jpg', 'posz.jpg', 'negz.jpg' ] );
```
In Blender/V3D, i don’t find the way for setting a cubemap environment, how it can be done with V3D please (inside Blender) ?

Also, when i wanted to set my Background transparent in Three.js, i only had to do this : `app.renderer.setClearColor(0xffffff,0);
app.scene.background = null;`
and i could see the HTML document behind the 3D canvas, with V3D it still remains a black background and i can’t see behind the canvas What is the way for setting a transparent background please ?
Thank you for replies
2017-12-29 at 12:57 am #1481
brice
Participant
Ok, for transparent background i missed that : { alpha: true } in app.
```
var app = new v3d.App('container', { alpha: true }, 
        new v3d.SimplePreloader({ container: 'container' }));
```
and it works !

…but when i toggle to Fullscreen mode, the black background is back
2017-12-30 at 12:33 am #1492

Will Welker
Customer

I haven’t done much with transparent backgrounds.
Do you want to see other elements of your webpage behind the V3D app?
If you succeed in getting your background to be transparent then lose it on full screen, there may be a bug (many bugs are fixed with each release).

2017-12-30 at 12:41 am #1493

brice
Participant

Sometimes it could be interresting to display the 3D App in overlay of the Webpage, so transparent is needed. Yes you right about losing it on Fullscreen, in that case it should be advisable to hide the toggle FullscreenMode button and display the 3d canvas with css position:fixed centered on the screen.

2018-01-03 at 8:22 pm #1532

Mikhail Luzyanin
Staff

brice wrote:

In Blender/V3D, i don’t find the way for setting a cubemap environment, how it can be done with V3D please (inside Blender) ?

You can find how to setup a cubemap in one of our example inside SDK. For example in the e_learing application. Here’s a screenshot from that application, pay attention to settings that highlighted with red.

Attachments:
You must be logged in to view attached files.
Co-founder and lead graphics specialist at Soft8Soft.

2018-01-03 at 9:01 pm #1536

brice
Participant

Hello Pigeon, thank you for your reply, i will take a look in this demo app for world environment map texture.

In Three.js, with materials, i used to set the envMap property for setting env reflexion to a material ( to a MeshPhongMaterial for example ), with v3d, i tested to export a mesh with a Blender material and tried to set an envMap on it but with v3d it’s a MeshNodeMaterial who has been exported, i tried to set an envMap to this MeshNodeMaterial but no effect on it… (there is no documentation about MeshNodeMaterial by the way ), for setting an envMap to a MeshNodeMaterial it must be done inside Blender in the node editor isn’t it ? how can you set an envMap to a material ? Thank you
Author

Posts