Mesh Groups not visible Three.JS ColladaLoader

Question

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.

Kayo Kayo · Accepted Answer · 2013-03-17T05:21:53

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)

Mesh Groups not visible Three.JS ColladaLoader

1 Answers