3DMLoader for Three.js

fraguada · November 20, 2020, 7:31pm

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, 9:01am

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:39pm

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:59am

@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:28pm

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, 1:10pm

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