网格组不可见 Three.JS ColladaLoader

Posted

技术标签:

【中文标题】网格组不可见 Three.JS ColladaLoader【英文标题】:Mesh Groups not visible Three.JS ColladaLoader 【发布时间】:2013-03-02 12:38:34 【问题描述】:

Sketchup 允许制作组件以促进几何图形的重复使用。例如,可以将一个汽车车轮制成一个组件,并且该组件的 4 个实例可以用于汽车的 4 个车轮。

问题是如何将每个重复使用的组件放入自己单独的 THREE.Object3d 实例中(然后可以旋转、定位,...即单独控制)

即如何将汽车的 4 个***分别检索为 4 个独立的 THREE.Object3D 实例。

为此,我从sketchup 中导出了一个DAE,并使用Three.js ColladaLoader 加载它。但是,Three.js 不会呈现分组的几何图形。同一 dae 中未分组的几何图形渲染正常。

尝试了一些解决方法,例如将 dae 导入 belnder 并使用 three.js blender exporter 进一步导出到 .obj 和 JSON。使用这些解决方法,分组信息会丢失。

我正在尝试深入研究 ColladaLoader.js 代码,看看是否有解决方案。

This *** question 看起来很相似(用于搅拌机而不是 Sketchup)并且有一个答案,但答案不是我想要的。

顺便说一句,DAE 中的分组和未分组几何的示例可以在下面的 sn-p 中看到。

<library_visual_scenes>
    <visual_scene id="ID1">
        <node name="SketchUp">
            <instance_geometry url="#ID19"> <!-- UN-GROUPED GEOMETRY -->
                <bind_material>
                    <technique_common>
                        <instance_material symbol="Material2" target="#ID6">
                            <bind_vertex_input semantic="UVSET0" input_semantic="TEXCOORD" input_set="0" />
                        </instance_material>
                    </technique_common>
                </bind_material>
            </instance_geometry>
            <node id="ID2" name="wheel1">  <!-- A RE-USE OF A COMPONENT -->
                <matrix>1.0000000 0.0000000 0.0000000 7.0639700 0.0000000 1.0000000 0.0000000 0.0000000 0.0000000 0.0000000 1.0000000 0.0000000 0.0000000 0.0000000 0.0000000 1.0000000</matrix>
                <instance_node url="#ID3" />
            </node>
        </node>
    </visual_scene>
</library_visual_scenes>

上面的DAE sn-p 只展示了一个组件的重用。组件的实际几何形状出现在&lt;library_nodes&gt; 下的dae 中。

</library_visual_scenes>
<library_nodes>
    <node id="ID3" name="WheelComponent">
        <instance_geometry url="#ID4"> <!-- GEOMETRY OF A GROUP (COMPONENT) -->
            <bind_material>
                <technique_common>
                ...

将不胜感激。

【问题讨论】:

【参考方案1】:

问题已解决。这是发生了什么:

加载场景 (collada.scene.children[0]) 中的对象似乎被缩放了 0.025 倍。即按比例缩小。这不是问题,因为在设置正确的缩放、相机距离等之后,物体就会变得可见......

此时,Sketchup 对象(非 Sketchup 组件)可见,但 Sketchup 组件不可见。

原因是sketchup 组件和组被进一步按相同的因子 0.025 缩放。即,与不是组件的对象相比,组件按因子 0.025 缩放。

这意味着与非组件相比,组件的渲染尺寸要小得多。

解决方法很简单。

加载 collada 后,遍历所有组件以及非组件并将它们的比例设置为 1。还有一件事要做。此时组件是可见的,但它们没有出现在正确的位置。这可以通过将位置以与它们放大的相同比例相乘来解决。即将组件内所有对象的位置乘以 (1/0.025)

【讨论】:

以上是关于网格组不可见 Three.JS ColladaLoader的主要内容,如果未能解决你的问题,请参考以下文章

Three.js建模基础

Three.js - 视图宽度

Three.js 3D建模必备基础

根据当前相机确定网格是不是在视口上可见

Three.js - 推开然后在“鼠标移动”上恢复元素位置

使用Three.js 心得系列一 如何创建三维网格三使用Three.js 心得系列三 Three.js 如何加载GlTF文件