From 7277ac11a87a556ab6b3fb21b184b9bc1b1399e6 Mon Sep 17 00:00:00 2001
From: Leon van Kammen <leonvankammen@gmail.com>
Date: Thu, 4 May 2023 17:00:55 +0200
Subject: [PATCH] update documentation

---
 example/assets/style.css               |  9 +++++++++
 example/threejs/parser_only/index.html | 14 ++++++++------
 example/threejs/sandbox/index.html     | 18 ++++++++++--------
 3 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/example/assets/style.css b/example/assets/style.css
index fa7d9b2..c6f7521 100644
--- a/example/assets/style.css
+++ b/example/assets/style.css
@@ -79,4 +79,13 @@ a#source{
   font-weight: bold;
   font-family: sans-serif;
   text-decoration: underline;
+  z-index:2000;
+}
+
+.render {
+  position:absolute;
+  top:0;
+  left:0;
+  right:0;
+  bottom:0;
 }
diff --git a/example/threejs/parser_only/index.html b/example/threejs/parser_only/index.html
index f899ab1..3dcbea8 100644
--- a/example/threejs/parser_only/index.html
+++ b/example/threejs/parser_only/index.html
@@ -57,7 +57,7 @@
 			let stats, statsMesh;
 
 			const parameters = {
-				light: 1.0,
+				env: 1.0,
 			};
 
 			init();
@@ -79,7 +79,8 @@
 						//model.dispose()
 					}
 					gltf.scene.position.y = 1.5
-					gltf.scene.position.z = -1
+					gltf.scene.position.z = -4
+					gltf.scene.rotation.y = -0.5
 					gltf.scene.scale.x = gltf.scene.scale.y = gltf.scene.scale.z = 1;
 
 					const maxAnisotropy = renderer.capabilities.getMaxAnisotropy();
@@ -138,6 +139,7 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.outputEncoding = THREE.sRGBEncoding;
 				renderer.xr.enabled = true;
+        renderer.domElement.className = "render"
 				document.body.appendChild( renderer.domElement );
 
 				document.body.appendChild( VRButton.createButton( renderer ) );
@@ -187,11 +189,11 @@
 				// GUI
 
 				function onChange() {
-						renderer.toneMappingExposure = parameters.light;
+						renderer.toneMappingExposure = parameters.env;
 				}
 
 				const gui = new GUI( { width: 300 } );
-				gui.add( parameters, 'light', 0.2, 3.0, 0.1 ).onChange( onChange );
+				gui.add( parameters, 'env', 0.2, 3.0, 0.1 ).onChange( onChange );
 				gui.domElement.style.visibility = 'hidden';
 
 				const group = new InteractiveGroup( renderer, camera );
@@ -200,7 +202,7 @@
 				const mesh = new HTMLMesh( gui.domElement );
 				mesh.position.x = - 0.75;
 				mesh.position.y = 1.5;
-				mesh.position.z = - 0.5;
+				mesh.position.z = 0.3;
 				mesh.rotation.y = Math.PI / 4;
 				mesh.scale.setScalar( 2 );
 				group.add( mesh );
@@ -215,7 +217,7 @@
 				statsMesh = new HTMLMesh( stats.dom );
 				statsMesh.position.x = - 0.75;
 				statsMesh.position.y = 2;
-				statsMesh.position.z = - 0.6;
+				statsMesh.position.z = 0.3;
 				statsMesh.rotation.y = Math.PI / 4;
 				statsMesh.scale.setScalar( 2.5 );
 				group.add( statsMesh );
diff --git a/example/threejs/sandbox/index.html b/example/threejs/sandbox/index.html
index 77bc405..46affae 100644
--- a/example/threejs/sandbox/index.html
+++ b/example/threejs/sandbox/index.html
@@ -59,7 +59,7 @@
 			let stats, statsMesh;
 
 			const parameters = {
-				light: 1.0,
+				env: 1.0,
 			};
 
 			init();
@@ -78,6 +78,7 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.outputEncoding = THREE.sRGBEncoding;
 				renderer.xr.enabled = true;
+        renderer.domElement.className = "render"
 				document.body.appendChild( renderer.domElement );
 
 				document.body.appendChild( VRButton.createButton( renderer ) );
@@ -94,12 +95,12 @@
           loaders: [ GLTFLoader ],   // which assets to check for fragments?
         })
 
-        // decorate env fragment
+        // optional: extend env fragment
         xrfragment.env = (xrf,v,mesh,model,scene,renderer,THREE) => {
           xrf(v,mesh,model,scene,renderer,THREE)
         }
 
-        // decorate non-xrfragment custom property 
+        // optional: extend non-xrfragment custom property 
         xrfragment.name = (xrf,v,mesh,model,scene,renderer,THREE) => {
           console.log("hello custom property 'name'")
         }
@@ -113,7 +114,8 @@
 						//model.dispose()
 					}
 					gltf.scene.position.y = 1.5
-					gltf.scene.position.z = -1
+					gltf.scene.position.z = -4
+					gltf.scene.rotation.y = -0.5
 					gltf.scene.scale.x = gltf.scene.scale.y = gltf.scene.scale.z = 1;
 
 					const maxAnisotropy = renderer.capabilities.getMaxAnisotropy();
@@ -177,11 +179,11 @@
 				// GUI
 
 				function onChange() {
-						renderer.toneMappingExposure = parameters.light;
+						renderer.toneMappingExposure = parameters.env;
 				}
 
 				const gui = new GUI( { width: 300 } );
-				gui.add( parameters, 'light', 0.2, 3.0, 0.1 ).onChange( onChange );
+				gui.add( parameters, 'env', 0.2, 3.0, 0.1 ).onChange( onChange );
 				gui.domElement.style.visibility = 'hidden';
 
 				const group = new InteractiveGroup( renderer, camera );
@@ -190,7 +192,7 @@
 				const mesh = new HTMLMesh( gui.domElement );
 				mesh.position.x = - 0.75;
 				mesh.position.y = 1.5;
-				mesh.position.z = - 0.5;
+				mesh.position.z = 0.3;
 				mesh.rotation.y = Math.PI / 4;
 				mesh.scale.setScalar( 2 );
 				group.add( mesh );
@@ -205,7 +207,7 @@
 				statsMesh = new HTMLMesh( stats.dom );
 				statsMesh.position.x = - 0.75;
 				statsMesh.position.y = 2;
-				statsMesh.position.z = - 0.6;
+				statsMesh.position.z = 0.3;
 				statsMesh.rotation.y = Math.PI / 4;
 				statsMesh.scale.setScalar( 2.5 );
 				group.add( statsMesh );