网格组不可见 Three.JS ColladaLoader [英] Mesh Groups not visible Three.JS ColladaLoader

问题描述

Sketchup 允许制作组件以促进几何体的重用.例如，可以将一个汽车车轮制成一个组件，并且该组件的 4 个实例可以用于汽车的 4 个车轮.

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

即如何将汽车的 4 个车轮中的每一个检索为 4 个独立的 THREE.Object3D 实例.

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

尝试了一些变通方法，例如将 dae 导入 belder 并使用three.js Blender 导出器进一步导出到 .obj 和 JSON.使用这些变通方法后，分组信息会丢失.

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

这个stackoverflow问题看起来很相似(对于blender草图)并有一个答案，但答案不是我想要的.

顺便说一句，DAE 中分组和未分组几何的示例可以在下面的代码段中看到.

<块引用>

<visual_scene id="ID1"><节点名称="SketchUp"><instance_geometry url="#ID19"><!-- 未分组的几何体--><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"><!-- 组件的重用--><矩阵GT; 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</矩阵><instance_node url="#ID3"/></visual_scene></library_visual_scenes>

上面的 DAE 片段仅显示了组件的重用.组件的实际几何形状出现在 下的 dae 中.

<块引用>

</library_visual_scenes><library_nodes><node id="ID3" name="WheelComponent"><instance_geometry url="#ID4"><!-- 组的几何(组件)--><bind_material><technique_common>...

将不胜感激任何帮助.

解决方案

问题已解决.这是发生的事情:

加载场景中的对象 (collada.scene.children[0]) 似乎按 0.025 的系数进行缩放.即缩小.这不是问题，因为在设置正确的缩放、相机距离等后对象变得可见......

此时，Sketchup 对象(那些不是 Sketchup 组件的对象)可见，但 Sketchup 组件 不可见.

原因是草图组件和组进一步按相同的系数 0.025 缩放.即，与不是组件的对象相比，组件按因子 0.025 缩放.

这意味着与非组件相比，组件呈现的尺寸要小得多.

解决方案很简单.

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

Sketchup allows making components to facilitate re-use of geometry. For instance, a car wheel can be made into a component and 4 instances of the component can be used for the 4 wheels of the car.

The question is how to put each re-used component into its own separate THREE.Object3d instance (which can then be rotated, positioned,... ie. controlled individually)

i.e. how to retrieve each of the 4 wheels of the car as 4 separate THREE.Object3D instances.

To do this, I exported a DAE from sketchup and loaded it using Three.js ColladaLoader. However grouped geometries are not rendered by Three.js. Ungrouped geometry within the same dae renders ok.

Tried some workarounds such as importing the dae into belnder and further exporting to .obj and JSON using three.js blender exporter. With these workarounds, grouping info gets lost.

I'm trying to dig into ColladaLoader.js code to see if a solution lies there.

This stackoverflow question seems similar (for blender instead of sketchup) and has one answer but the answer is not what I'm looking for.

BTW, an example of grouped and un-grouped geometry in a DAE can be seen in the bellow snippet.

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

The above DAE snippet shows only the re-use of a component. The actual geometry of the component appears in the dae under <library_nodes>.

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

Will appreciate any help.

解决方案

Issue re-solved. Here's what was happening:

Objects in the loaded scene (collada.scene.children[0]) seem to be scaled by factor of 0.025. i.e. scaled down. This isn't a problem because objects become visible after setting correct zoom, camera distance, etc...

At this point, Sketchup objects (those which are not Sketchup Components) are visible but Sketchup Components are not visible.

The reason was that sketchup components and groups are further scaled by the same factor 0.025. i.e. components are scaled by factor 0.025 compared to objects which are not components.

This means components were rendered much smaller in size compared to non-components.

The solution is simple.

After the collada is loaded, iterate through all components as well as non-components and set their scales to 1. There's still one more thing to be done. At this point the components are visible but they don't appear in their correct positions. This is solved by multiplying the positions in the same proportion by which they were scaled up. i.e. multiply the positions of all objects within the component by (1/0.025)

这篇关于网格组不可见 Three.JS ColladaLoader的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！