Merge pull request #19316 from Mugen87/dev49

Examples: Make VRML demo more configurable.
mrdoob · May 8, 2020 · 31caca7 · 31caca7
2 parents 5a61bb3 + d3166af
commit 31caca7
Show file tree

Hide file tree

Showing 15 changed files with 80 additions and 68 deletions.
diff --git a/examples/models/vrml/test/creaseAngle.wrl → examples/models/vrml/creaseAngle.wrl b/examples/models/vrml/test/creaseAngle.wrl → examples/models/vrml/creaseAngle.wrl
@@ -3,7 +3,8 @@
 #Created by Cinema 4D
 
 DEF Plane Transform {
-  children [ 
+	scale 0.1 0.1 0.1
+  children [
     Shape {
       appearance DEF MAT_Mat Appearance {
         material Material {
@@ -40,11 +41,11 @@ DEF Plane Transform {
   ]
 }
 DEF Null Transform {
-  translation 0 -200 0
-  children [ 
+  translation 0 5 0
+  children [
     DEF Platonic Transform {
-      translation 0 400 0
-      children [ 
+			scale 0.02 0.02 0.02
+      children [
         Shape {
           appearance USE MAT_Mat
           geometry DEF FACESET_Platonic IndexedFaceSet {
@@ -83,4 +84,4 @@ DEF Null Transform {
       ]
     }
   ]
-}
+}
diff --git a/examples/models/vrml/test/crystal.wrl → examples/models/vrml/crystal.wrl b/examples/models/vrml/test/crystal.wrl → examples/models/vrml/crystal.wrl
diff --git a/examples/models/vrml/test/elevationGrid1.wrl → examples/models/vrml/elevationGrid1.wrl b/examples/models/vrml/test/elevationGrid1.wrl → examples/models/vrml/elevationGrid1.wrl
@@ -26,7 +26,7 @@
 # Note that avatarSize must be adjusted to match collision distance between camera and geometry, height of eye above ground, and highest distance that camera is able to walk over..
 NavigationInfo {
   avatarSize [ 0.1 0.1 4 ]
-  type [ "WALK" "ANY"  ] 
+  type [ "WALK" "ANY"  ]
 }
 # A height of 10m above the ElevationGrid ensures that the camera will fall and land on top of the ground while in WALK mode.
 # Be careful not to provide viewpoints that are beneath terrain or initially locked in a collision location, or else the camera will not be able to move.

diff --git a/examples/models/vrml/test/elevationGrid2.wrl → examples/models/vrml/elevationGrid2.wrl b/examples/models/vrml/test/elevationGrid2.wrl → examples/models/vrml/elevationGrid2.wrl
diff --git a/examples/models/vrml/test/extrusion1.wrl → examples/models/vrml/extrusion1.wrl b/examples/models/vrml/test/extrusion1.wrl → examples/models/vrml/extrusion1.wrl
diff --git a/examples/models/vrml/test/extrusion2.wrl → examples/models/vrml/extrusion2.wrl b/examples/models/vrml/test/extrusion2.wrl → examples/models/vrml/extrusion2.wrl
diff --git a/examples/models/vrml/test/extrusion3.wrl → examples/models/vrml/extrusion3.wrl b/examples/models/vrml/test/extrusion3.wrl → examples/models/vrml/extrusion3.wrl
diff --git a/examples/models/vrml/test/lines.wrl → examples/models/vrml/lines.wrl b/examples/models/vrml/test/lines.wrl → examples/models/vrml/lines.wrl
diff --git a/examples/models/vrml/test/map.gif → examples/models/vrml/map.gif b/examples/models/vrml/test/map.gif → examples/models/vrml/map.gif
diff --git a/examples/models/vrml/test/meshWithLines.wrl → examples/models/vrml/meshWithLines.wrl b/examples/models/vrml/test/meshWithLines.wrl → examples/models/vrml/meshWithLines.wrl
@@ -58,7 +58,7 @@ Viewpoint {
 	description   "Bottom View"
 }
 Transform {
-	scale         0.001 0.001 0.001
+	scale         0.1 0.1 0.1
 	children [
 Transform {
 	children [
@@ -105,7 +105,7 @@ material USE _material0
 }
 geometry IndexedFaceSet {
 solid FALSE
-coord USE _coord000000002EB30170 
+coord USE _coord000000002EB30170
 coordIndex [
  6,2,7,-1,
  2,3,7,-1,
@@ -119,7 +119,7 @@ material USE _material0
 }
 geometry IndexedFaceSet {
 solid FALSE
-coord USE _coord000000002EB30170 
+coord USE _coord000000002EB30170
 coordIndex [
  4,0,6,-1,
  0,2,6,-1,
@@ -133,7 +133,7 @@ material USE _material0
 }
 geometry IndexedFaceSet {
 solid FALSE
-coord USE _coord000000002EB30170 
+coord USE _coord000000002EB30170
 coordIndex [
  5,1,4,-1,
  1,0,4,-1,
@@ -147,7 +147,7 @@ material USE _material0
 }
 geometry IndexedFaceSet {
 solid FALSE
-coord USE _coord000000002EB30170 
+coord USE _coord000000002EB30170
 coordIndex [
  7,3,5,-1,
  3,1,5,-1,
@@ -161,7 +161,7 @@ material USE _material0
 }
 geometry IndexedFaceSet {
 solid FALSE
-coord USE _coord000000002EB30170 
+coord USE _coord000000002EB30170
 coordIndex [
  1,3,0,-1,
  3,2,0,-1,
@@ -349,4 +349,3 @@ point	[
 }
 	]
 }
-
diff --git a/...ples/models/vrml/test/meshWithTexture.wrl → examples/models/vrml/meshWithTexture.wrl b/...ples/models/vrml/test/meshWithTexture.wrl → examples/models/vrml/meshWithTexture.wrl
@@ -1,7 +1,7 @@
 #VRML V2.0 utf8
 
 DEF Plane001 Transform {
-  translation -6.849 25.21 0
+  scale 0.1 0.1 0.1
   rotation -1 0 0 -1.571
   children [
     Shape {

diff --git a/examples/models/vrml/test/pixelTexture.wrl → examples/models/vrml/pixelTexture.wrl b/examples/models/vrml/test/pixelTexture.wrl → examples/models/vrml/pixelTexture.wrl
diff --git a/examples/models/vrml/test/points.wrl → examples/models/vrml/points.wrl b/examples/models/vrml/test/points.wrl → examples/models/vrml/points.wrl
diff --git a/examples/models/vrml/simple.wrl b/examples/models/vrml/simple.wrl
diff --git a/examples/webgl_loader_vrml.html b/examples/webgl_loader_vrml.html
@@ -1,25 +1,15 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<title>three.js webgl - loaders - vrml loader</title>
+		<title>three.js webgl - loaders - VRML loader</title>
 		<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>
-			body {
-				color: #444;
-			}
-			a {
-				color: #08f;
-			}
-		</style>
 	</head>
 
 	<body>
 		<div id="info">
-		<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> -
-		vrml format loader test
-		<!--model from <a href="http://cs.iupui.edu/~aharris/webDesign/vrml/" target="_blank" rel="noopener">VRML 2.0 Tutorial</a>,-->
+		<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - VRML loader
 		</div>
 
 		<script type="module">
@@ -30,8 +20,31 @@
 
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { VRMLLoader } from './jsm/loaders/VRMLLoader.js';
-
-			var camera, scene, renderer, stats, controls;
+			import { GUI } from './jsm/libs/dat.gui.module.js';
+
+			var camera, scene, renderer, stats, controls, loader;
+
+			var params = {
+				asset: 'house'
+			};
+
+			var assets = [
+				'creaseAngle',
+				'crystal',
+				'house',
+				'elevationGrid1',
+				'elevationGrid2',
+				'extrusion1',
+				'extrusion2',
+				'extrusion3',
+				'lines',
+				'meshWithLines',
+				'meshWithTexture',
+				'pixelTexture',
+				'points',
+			];
+
+			var vrmlScene;
 
 			init();
 			animate();
@@ -52,12 +65,8 @@
 				camera.add( dirLight );
 				camera.add( dirLight.target );
 
-				var loader = new VRMLLoader();
-				loader.load( 'models/vrml/house.wrl', function ( object ) {
-
-					scene.add( object );
-
-				} );
+				loader = new VRMLLoader();
+				loadAsset( params.asset );
 
 				// renderer
 
@@ -70,7 +79,7 @@
 
 				controls = new OrbitControls( camera, renderer.domElement );
 				controls.minDistance = 1;
-				controls.maxDistance = 100;
+				controls.maxDistance = 200;
 				controls.enableDamping = true;
 
 				//
@@ -82,6 +91,41 @@
 
 				window.addEventListener( 'resize', onWindowResize, false );
 
+				//
+
+				var gui = new GUI( { width: 300 } );
+				gui.add( params, 'asset', assets ).onChange( function ( value ) {
+
+					if ( vrmlScene ) {
+
+						vrmlScene.traverse( function ( object ) {
+
+							if ( object.material ) object.material.dispose();
+							if ( object.material && object.material.map ) object.material.map.dispose();
+							if ( object.geometry ) object.geometry.dispose();
+
+						} );
+
+						scene.remove( vrmlScene );
+
+					}
+
+					loadAsset( value );
+
+				} );
+
+			}
+
+			function loadAsset( asset ) {
+
+				loader.load( 'models/vrml/' + asset + '.wrl', function ( object ) {
+
+					vrmlScene = object;
+					scene.add( object );
+					controls.reset();
+
+				} );
+
 			}
 
 			function onWindowResize() {