3DMLoader for Three.js

fraguada · September 13, 2020, 8:23am

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.