添加像 Sketchfab.com 这样的 3D 背景

Question

在 Shetchfab.com 中，您可以为 3d 对象添加 3d background environment。

我正在制作此页面，其中我使用 x3dom 在标签框中显示 .x3d 对象。

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

如何在旋转环境中添加像 Sketchfab 这样的背景？有人可以帮我解决这个问题吗？

Answer 1

旋转背景通常称为 "cubemap"（尽管该名称可用于两者，纹理类型及其在 3D 中的使用/可视化方式）。

在 X3DOM 中，您应该可以使用这样的背景（在 Scene 元素内）：

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

还有一个X3DOM节点，用于整合此类纹理贴图以获得反射material，它被称为"ComposedCubeMapTexture"： https://doc.x3dom.org/author/CubeMapTexturing/ComposedCubeMapTexture.html

我没有找到实时在线示例，但让一个示例正常工作应该很简单 - 这里有一些代码： https://github.com/x3dom/x3dom/blob/master/test/regression-suite/test/cases/cubemap/cubemap.html

结果应如下所示： http://testing.x3dom.org/test/reference/cubemap_0.png

添加像 Sketchfab.com 这样的 3D 背景

Adding 3D background like Sketchfab.com

x3d

x3dom

html5-canvas