Adding 3D background like Sketchfab.com

Question

In Shetchfab.com you can add a 3d background environment for your 3d objects.

Im making this page where i show an .x3d object in a tag frame using x3dom.

<x3d height='500px'>
    <scene id="mainScene">
         <Inline id="inlineBox" nameSpaceName="dcm" url="juicecarton.x3d" />
    </scene>                                        
</x3d>

How do i add a background like Sketchfab with the rotating environment ? Can someone help me out with this?

Answer 1

The rotating background is often called a "cubemap" (although that name can be used for both, the kind of texture and the way it is being used / visualized in 3D).

In X3DOM, you should be able to use a background like this (inside the Scene element):

<Background id='back1' 
        backUrl='"./ocean_3_back.jpg"' bottomUrl='"./ocean_3_bottom.jpg"'
        frontUrl='"./ocean_3_front.jpg"' leftUrl='"./ocean_3_left.jpg"'
        rightUrl='"./ocean_3_right.jpg"' topUrl='"./ocean_3_top.jpg"'>
</Background>

There's also an X3DOM node for integrating such texture maps to obtain a reflecting material, it's called "ComposedCubeMapTexture": https://doc.x3dom.org/author/CubeMapTexturing/ComposedCubeMapTexture.html

I didn't find a live online example, but it should be straightforward to get one working - here's some code: https://github.com/x3dom/x3dom/blob/master/test/regression-suite/test/cases/cubemap/cubemap.html

Result should look like this: http://testing.x3dom.org/test/reference/cubemap_0.png