3DMLoader for Three.js

Three.js r120 was just released with the first version of a 3DMLoader which uses the rhino3dm.js library. The three.js editor also supports loading rhino 3dm files.

The first version was focused on getting all of the mechanics of loading rhino3dm.js in place and converting some important types like BREPs, Meshes, Extrusions, Points, Point Clouds, Curves, Dots, and Lights. Blocks are also supported, but do not take advantage of instancing (yet). There is also basic material support.

In the next version there should be support for more complete materials, textures, and a revision of the object conversion.

The easiest way to try this is to point your browser at the three.js editor and go to File->Import and select a Rhino file. If the Rhino file has no lights, I recommend you add a Directional Light in the three.js editor (Add->Directional Light).

15 Likes

Hi Luis,

This is awesome!

-Willem

1 Like

@fraguada This is awesome!
I have a question, if I end up having “rhino3dm.js” and “rhino3dm.wasm” in a repo, while not using npm, is there a way to know which version of those files I have?

@SherifTarabishy I’m not sure that this info is embedded in the ‘compiled’ libraries for js and py. I’ll check further and let you know. I the meantime, I’ve added an issue here: https://github.com/mcneel/rhino3dm/issues/307

1 Like

Wow - this is really impressive! Well done.

However - I would recommend to change the demo a little bit: The points of the point cloud / control points appear as (ugly) black squares. It would most likely look better if those were displayed as little spheres instead (and not black, but maybe yellow, blue, red, grey for example).

Will tweak the point styling in the next release. Thanks for the suggestion!

1 Like

Hi Luis,

I’m trying to setup example files for our developer and find that not all curvetypes are supported.
Rhino file:
test_curves.3dm (42.3 KB)
image

imported in https://threejs.org/editor/
image

It looks like polycurves are not supported yet.

Is there some documentation or can you point me to the code where I can find what types of curves should already supported?

EDIT @Luis I fount this code , but I’m not sure if I an make sense of it.

Further test makes it appear as if the curves are not rendered.
I exploded 1 curve as a test, and that does show up, bot I found that some curve object are selectable but not visible. Maybe due to the 100 point limit?

All in all very promising as it will eliminate a time bottleneck in our current coversion from Rhino to web!

Thanks
-Willem

1 Like

Thanks for the report. I’ll test this out next week and let you know what I find. It sounds like something we can tune up.

1 Like

@Willem, When the curve is a PolyCurve, the curveToPoints method is called recursively.


In this case, I didn’t specify a point limit, and the resulting points were 0.
By changing this to some value, we get the polycurves:

Unfortunately it has 500 vertices! We’ll have to work a bit to clean this up to avoid so many points. I’ll commit this to our fork and set up a PR to the three.js repo sometime this week.

Here is the full file:

Hi @fraguada

Thanks for the update!
So am I correct to deduce from looking at the code that any curve is converted to a polyline?
In that case I might -for now- create polylines myself to control the conversion.

Anyway I’m following with great interest and hope our developer will have soon time to implement this.

-Willem

Correct.

1 Like

Hi Luis @fraguada,

for some reason, I am not getting the Breps. Any thoughts?
I simply made 3 files, one with a standard box (extrusion), one where I transformed the box into a mesh, and one with one polysurface and one surface inside.

The box_mesh is the only one that gets imported into the https://threejs.org/editor/

The other two load the objects successfuly…(the brep files results in 3 objects, and cube in 1):
image
image

However I do not see anything…only this colorful axis system:

image [box.3dm|attachment]

Does this have to do with lights or material or something like that? Is the mesh flipped maybe?

box.3dm (36.2 KB)
box_mesh.3dm (40.3 KB)
brep.3dm (49.2 KB)

The 3dmLoader relies on the render meshes of breps and extrusions. If you created a brep box in Rhino but never displayed it in a shaded mode, it won’t have a render mesh.

1 Like

Thanks Luis @fraguada,

I was trying to create the files too fast, so I actually have not switched to the shaded mode. I have another important question. If I add Custom User Data to my Rhino Objects, could I get that data somehow to three.js over the 3dmloader? If it is possible, would I have to expand/customize the 3dmloader? And if yes, where would that code go?

Thanks
Milos

this depends on how you are adding the data.
I do access the user data on the object attributes ( attributes.getUserStrings() ) and add it to the resulting three.js object .userData object (i.e. https://github.com/mrdoob/three.js/blob/dev/examples/jsm/loaders/3DMLoader.js#L495)

rhino

three.js

1 Like

Hi @fraguada
Is there any way you can capture the warnings regarding the missing mesh?

.parse(onError()) does not capture this which sounds right but it would be nice to have like an onWarn() callback.

@mkarimi What else would be useful to capture? The warning says most of what we know: the object type is an Extrusion, and that there is no mesh associated with it. This means it was either created in Rhino, but never got a render mesh, or it was created by some other scripted method which didn’t bother to generate a render mesh. This warning is thrown here: three.js/3DMLoader.js at dev · mrdoob/three.js · GitHub

I understand that @fraguada . I think the warning message are clear too. I was just proposing to add an onWarn() function to 3DMLoader.parse() to make retrieving these warnings easier.
.parse ( buffer : ArrayBuffer, onLoad : Function, onProgress : Function, onError : Function , onWarn : Function)

The reason I’m asking this is that I like to show these warnings on the UI and without such a utility I have to hijack the console.warn() to retrieve these warnings.

1 Like