浏览代码

3dmLoader updates

Added null checking for extrusions, modified example, updated docs, updated library
Luis Fraguada 4 年之前
父节点
当前提交
9f87ab4346

+ 74 - 13
docs/examples/en/loaders/3DMLoader.html

@@ -12,15 +12,15 @@
 
 		<p class="desc">
 			A loader for Rhinoceros 3d files and objects. <br /><br />
-			Rhinoceros is a 3D modeler used to create, edit, analyze, document, render, animate, and translate NURBS curves, surfaces, solids, point clouds, as well as polygon meshes and SubD objects.
+			Rhinoceros is a 3D modeler used to create, edit, analyze, document, render, animate, and translate NURBS curves, surfaces, breps, extrusions, point clouds, as well as polygon meshes and SubD objects.
 			[link:https://github.com/mcneel/rhino3dm rhino3dm.js] is compiled to WebAssembly from the open source geometry library [link:https://github.com/mcneel/opennurbs openNURBS].
-			Currently uses rhino3dm.js 0.13.0
+			The loader currently uses <a href="https://www.npmjs.com/package/rhino3dm/v/0.15.0-beta">rhino3dm.js 0.15.0-beta.</a>
 		</p>
 
 		<h2>Supported Conversions</h2>
 
 		<p>
-			[name] loads the following objects to a respective three.js type:
+			The [name] converts Rhino objects to the following three.js types:
 		</p>
 
 		<table>
@@ -42,7 +42,7 @@
 			</tr>
 			<tr>
 				<td>Curve</td>
-				<td>[page:Line Line] <sup>1</sup></td>
+				<td>[page:Line Line] <sup> 1</sup></td>
 			</tr>
 			<tr>
 				<td>Mesh</td>
@@ -50,15 +50,15 @@
 			</tr>
 			<tr>
 				<td>Extrusion</td>
-				<td>[page:Mesh Mesh] <sup> 2</sup></td>
+				<td>[page:Mesh Mesh]<sup> 2</sup></td>
 			</tr>
 			<tr>
 				<td>BREP</td>
-				<td>[page:Object3D Object3D] <sup>2, 3</sup></td>
+				<td>[page:Mesh Mesh]<sup> 2</sup></td>
 			</tr>
 			<tr>
 				<td>SubD</td>
-				<td>[page:Mesh Mesh] <sup>4</sup></td>
+				<td>[page:Mesh Mesh]<sup> 3</sup></td>
 			</tr>
 			<tr>
 				<td>InstanceReferences</td>
@@ -80,19 +80,26 @@
 				<td>SpotLight</td>
 				<td>[page:SpotLight SpotLight]</td>
 			</tr>
+			<tr>
+				<td>File3dm</td>
+				<td>[page:Object3D Object3D]<sup> 4</sup></td>
+			</tr>
 		</table>
 
 		<p><i>
 			<sup>1</sup> NURBS curves are discretized to a hardcoded resolution.
 		</i></p>
 		<p><i>
-			<sup>2</sup> Types which are based on BREPs and NURBS surfaces are represented with their "Render Mesh".
+			<sup>2</sup> Types which are based on BREPs and NURBS surfaces are represented with their "Render Mesh". Render meshes might not be associated with these objects if they have not been displayed in an appropriate display mode in Rhino (i.e. "Shaded", "Rendered", etc), or are created programmatically, for example, via Grasshopper or directly with the rhino3dm library.
+		</i></p>
+		<p><i>
+			<sup>3</sup> SubD objects are represented by subdividing their control net.
 		</i></p>
 		<p><i>
-			<sup>3</sup> BREPS are converted to an Object3D with it's children array populated with BREP Faces
+			<sup>4</sup> Whether a Rhino Document (File3dm) is loaded or parsed, the returned object is an [page:Object3D Object3D] with all Rhino objects (File3dmObject) as children.
 		</i></p>
 		<p><i>
-			<sup>4</sup> SubD objects are represented by subdividing their control net.
+			<sup>5</sup> All resulting three.js objects have useful properties from the Rhino object (i.e. layer index, name, etc.) populated in their userData object.
 		</i></p>
 
 		<h2>Code Example</h2>
@@ -101,8 +108,9 @@
 		// Instantiate a loader
 		const loader = new Rhino3dmLoader();
 
-		// Specify path to a folder containing WASM/JS libraries.
-		loader.setLibraryPath( '/examples/jsm/libs/rhino3dm/' );
+		// Specify path to a folder containing WASM/JS libraries or a CDN.
+		//loader.setLibraryPath( '/path_to_library/rhino3dm/' );
+		loader.setLibraryPath( 'https://cdn.jsdelivr.net/npm/[email protected]/' );
 
 		// Load a 3DM file
 		loader.load(
@@ -161,13 +169,66 @@
 		[page:Function onError] — (optional) A function to be called if an error occurs during loading. The function receives error as an argument.<br />
 		</p>
 		<p>
-		Begin loading from url and call the <em>onLoad</em> function with the geometry.
+		Begin loading from url and call the <em>onLoad</em> function with the resulting Object3d.
+		</p>
+
+		<h3>[method:null parse]( [param:ArrayBuffer buffer], [param:Function onLoad], [param:Function onProgress], [param:Function onError] )</h3>
+		<p>
+		[page:ArrayBuffer buffer] — An ArrayBuffer representing the Rhino <em>File3dm</em> document.<br />
+		[page:Function onLoad] — A function to be called after the loading is successfully completed.<br />
+		[page:Function onError] — (optional) A function to be called if an error occurs during loading. The function receives error as an argument.<br />
+		</p>
+		<p>
+		Parse a File3dm ArrayBuffer and call the <em>onLoad</em> function with the resulting Object3d.
+		See <a href="https://github.com/mcneel/rhino-developer-samples/tree/7/rhino3dm/js/SampleParse3dmObjects">this example</a> for further reference.
 		</p>
 
+		<code>
+		import rhino3dm from 'https://cdn.jsdelivr.net/npm/[email protected]/rhino3dm.module.js'
+
+		// Instantiate a loader
+		const loader = new Rhino3dmLoader();
+
+		// Specify path to a folder containing WASM/JS libraries or a CDN.
+		loader.setLibraryPath( 'https://cdn.jsdelivr.net/npm/[email protected]/' );
+
+		rhino3dm().then(async m => {
+
+			console.log('Loaded rhino3dm.');
+			const rhino = m; // global
+			
+			// create Rhino Document and add a point to it
+			const doc = new rhino.File3dm();
+			const ptA = [0, 0, 0];
+			const point = new rhino.Point( ptA );
+			doc.objects().add( point, null );
+
+			// create a copy of the doc.toByteArray data to get an ArrayBuffer
+			const buffer = new Uint8Array( doc.toByteArray() ).buffer;
+
+			loader.parse( buffer, function ( object ) {
+
+				scene.add( object );
+			
+			} );
+
+		})
+
+		</code>
+
 		<h3>[method:this setLibraryPath]( [param:String value] )</h3>
 		<p>
 		[page:String value] — Path to folder containing the JS and WASM libraries.
 		</p>
+		<code>
+		// Instantiate a loader
+		const loader = new Rhino3dmLoader();
+
+		// Specify path to a folder containing the WASM/JS library:
+		loader.setLibraryPath( '/path_to_library/rhino3dm/' );
+		// or from a CDN:
+		loader.setLibraryPath( 'https://cdn.jsdelivr.net/npm/[email protected]/' );
+		</code>
 
 		<h3>[method:this setWorkerLimit]( [param:Number workerLimit] )</h3>
 		<p>

文件差异内容过多而无法显示
+ 0 - 0
examples/jsm/libs/rhino3dm/rhino3dm.js


文件差异内容过多而无法显示
+ 8 - 0
examples/jsm/libs/rhino3dm/rhino3dm.module.js


二进制
examples/jsm/libs/rhino3dm/rhino3dm.wasm


+ 12 - 5
examples/jsm/loaders/3DMLoader.js

@@ -469,6 +469,8 @@ Rhino3dmLoader.prototype = Object.assign( Object.create( Loader.prototype ), {
 			case 'SubD':
 			case 'Brep':
 
+			if ( obj.geometry === null ) return;
+
 				var geometry = loader.parse( obj.geometry );
 
 				if ( geometry.attributes.hasOwnProperty( 'color' ) ) {
@@ -1168,9 +1170,14 @@ Rhino3dmLoader.Rhino3dmWorker = function () {
 
 				}
 
-				mesh.compact();
-				geometry = mesh.toThreejsJSON();
-				faces.delete();
+				if ( mesh.faces().count > 0) {
+
+					mesh.compact();
+					geometry = mesh.toThreejsJSON();
+					faces.delete();
+
+				}
+
 				mesh.delete();
 
 				break;
@@ -1234,7 +1241,7 @@ Rhino3dmLoader.Rhino3dmWorker = function () {
 
 		}
 
-		if ( Array.isArray( geometry ) === false || geometry.length > 0 ) {
+		if ( geometry ) {
 
 			var attributes = extractProperties( _attributes );
 			attributes.geometry = extractProperties( _geometry );
@@ -1261,7 +1268,7 @@ Rhino3dmLoader.Rhino3dmWorker = function () {
 
 		} else {
 
-			console.warn( 'THREE.3DMLoader: Object has no associated mesh geometry.' );
+			console.warn( `THREE.3DMLoader: ${objectType.constructor.name} has no associated mesh geometry.` );
 
 		}
 

+ 24 - 1
examples/webgl_loader_3dm.html

@@ -5,6 +5,25 @@
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 		<link type="text/css" rel="stylesheet" href="main.css">
+		<style>
+			#loader {
+                border: 5px solid #f3f3f3; /* Light grey */
+                border-top: 5px solid #3d3d3d; /* Grey */
+                border-radius: 50%;
+                width: 40px;
+                height: 40px;
+                animation: spin 1s linear infinite;
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                z-index: 2;
+            }
+
+            @keyframes spin {
+                0% { transform: rotate(0deg); }
+                100% { transform: rotate(360deg); }
+            }
+		</style>
 	</head>
 
 	<body>
@@ -12,6 +31,7 @@
 			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - Rhino 3DM loader
 		</div>
 
+		<div id="loader"></div>
 		<script type="module">
 
 			import * as THREE from '../build/three.module.js';
@@ -46,13 +66,16 @@
 				scene.add( directionalLight );
 
 				const loader = new Rhino3dmLoader();
-				loader.setLibraryPath( 'jsm/libs/rhino3dm/' );
+				loader.setLibraryPath( 'https://cdn.jsdelivr.net/npm/[email protected]/' );
 
 				loader.load( 'models/3dm/Rhino_Logo.3dm', function ( object ) {
 
 					scene.add( object );
 					initGUI( object.userData.layers );
 
+					// hide spinner
+					document.getElementById('loader').style.display = 'none';
+
 				} );
 
 				const width = window.innerWidth;

部分文件因为文件数量过多而无法显示