3DMLoader for Three.js

[fraguada (Luis Fraguada)]

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.

• Example
• Code
• Three.js Editor

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 (Willem Derks)]

Hi Luis,

This is awesome!

-Willem

[SherifTarabishy]

@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 (Luis Fraguada)]

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

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 (Luis Fraguada)]

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

[Willem (Willem Derks)]

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.

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

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 (Luis Fraguada)]

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 (Luis Fraguada)]

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

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

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 (Willem Derks)]

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 (Luis Fraguada)]

@Willem

So am I correct to deduce from looking at the code that any curve is converted to a polyline?

Correct.

[dimcic (Milos Dimcic)]

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 (Luis Fraguada)]

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 (Milos Dimcic)]

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 (Luis Fraguada)]

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. three.js/3DMLoader.js at dev · mrdoob/three.js · GitHub)

rhino

three.js

[mkarimi (Morteza Karimi)]

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 (Luis Fraguada)]

@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 (Morteza Karimi)]

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.

[MonkeyFace]

Hi @fraguada I am getting the error you mention due to missing render meshes…

THREE.3DMLoader: ObjectType_Brep has no associated mesh geometry.

Here is the salient code for how the breps are created…

public static Brep[] StepToBrep(byte[] file)
{
	// import the step file to a new 3dm document
	FileIO.SaveByteArrayToTempFile(file, stpName);			
	RhinoDoc doc = RhinoDoc.CreateHeadless(null);
	doc.Import(FileIO.GetTempFilePath(stpName));

	// extract breps
	var rhinoObjs = doc.Objects.FindByObjectType(ObjectType.Brep);
	var breps = new List<Brep>();
	foreach (var item in rhinoObjs) 
	{
		var brep = (Brep)item.Geometry;
		brep.EnsurePrivateCopy(); // decouples the brep from the document object which otherwise can cause it to fail to serialize to json
		brep.Compact();
		breps.Add(brep);
	}

	// return breps
	return breps.ToArray();
}

Do you know if it is possible to obtain render meshes for them given this code is running in a Compute instance?

[Willem (Willem Derks)]

Hi,

Did you find and try RhinoObject.CreateMeshes() already?

RhinoObject.CreateMeshes Method