3DMLoader for Three.js

fraguada · August 27, 2020, 6:02am

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

Willem · August 27, 2020, 8:59am

Hi Luis,

This is awesome!

-Willem

SherifTarabishy · August 28, 2020, 5:52am

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

fraguada · August 28, 2020, 6:36am

@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

ore · August 28, 2020, 7:57am

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

fraguada · August 28, 2020, 8:14am

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

Willem · September 4, 2020, 12:23pm

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)

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

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.

github.com

mrdoob/three.js/blob/2327f4efd4b6713fd4820d50a26e5432c6ea9b69/examples/jsm/loaders/3DMLoader.js#L1054


				// console.log(`${property}: ${object[property]}`);

			}

		}

		return result;

	}

	function curveToPoints( curve, pointLimit ) {

		var pointCount = pointLimit;
		var rc = [];
		var ts = [];

		if ( curve instanceof rhino.LineCurve ) {

			return [ curve.pointAtStart, curve.pointAtEnd ];

		}

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

fraguada · September 5, 2020, 10:03am

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.

fraguada · September 8, 2020, 5:57am

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

github.com

mrdoob/three.js/blob/dev/examples/jsm/loaders/3DMLoader.js#L1086



		}

		if ( curve instanceof rhino.PolyCurve ) {

			var segmentCount = curve.segmentCount;

			for ( var i = 0; i < segmentCount; i ++ ) {

				var segment = curve.segmentCurve( i );
				var segmentArray = curveToPoints( segment );
				rc = rc.concat( segmentArray );
				segment.delete();

			}

			return rc;

		}

		if ( curve instanceof rhino.NurbsCurve && curve.degree === 1 ) {

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:

Willem · September 9, 2020, 7:23pm

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

fraguada · September 9, 2020, 8:21pm

Correct.

dimcic · November 13, 2020, 4:26pm

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

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

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

fraguada · November 13, 2020, 8:58pm

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.

dimcic · November 19, 2020, 5:24pm

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

fraguada · November 20, 2020, 12:58pm

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

mkarimi · March 19, 2021, 6:55pm

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.

fraguada · March 21, 2021, 11:01pm

@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

mkarimi · March 26, 2021, 4:14pm

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.