Merge pull request #3 from forge-gfx/duck-fireplace

Set fireplace as background in the environment example

examples/envmap/index.html

@@ -4,19 +4,24 @@
   <meta charset="utf-8">
   <title>Forge • Environment Mapping</title>
   <style>
+    body {
+      margin: 0;
+    }
+
     label {
       font-family: sans-serif;
       font-size: 20px;
       position: absolute;
-      margin: 1rem auto;
       color: white;
       cursor: pointer;
-      width: 100%;
+      padding: 10px;
+      border-radius: 10px;
+      display: block;
+      width: 100px;
+      left: calc(50% - 50px);
+      top: 10px;
       text-align: center;
-    }
+      background-color: black;
-
-    body {
-      margin: 0;
     }
   </style>
 </head>
@@ -40,36 +45,39 @@
 
     const scene = new THREE.Scene();
     const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
-
+    camera.position.y = 0.5;
     const renderer = new THREE.WebGLRenderer();
-    renderer.setClearColor(new THREE.Color(0x3b5272), 1.0);
+    renderer.setClearColor(new THREE.Color(0x1b2037), 1.0);
     renderer.setSize(window.innerWidth, window.innerHeight);
     document.body.appendChild(renderer.domElement)
 
     // Explicitly create a ForgeRenderer to render environment maps
     const forge = new ForgeRenderer({ renderer });
 
-    const background = new SplatMesh({ url: "https://d28zzqy0iyovbz.cloudfront.net/a58b478d/scene.compressed.ply" });
+    const splatURL = await getAssetFileURL("fireplace.spz");
-
+    const background = new SplatMesh({ url: splatURL });
-    background.position.set(5, -10, -10);
     background.quaternion.set(1, 0, 0, 0);
+    background.position.set(0.5, 0, -1);
+    background.scale.setScalar(0.5);
     scene.add(background);
+
+    const background2 = new SplatMesh({ url: splatURL });
+    background2.quaternion.set(1, 0, 0, 0);
+    background2.rotation.y = Math.PI;
+    background2.position.set(-0.5, 0, 0.0);
+    background2.scale.setScalar(0.5);
+    scene.add(background2);
+
     // Make sure background is loaded before rendering env map
     await background.initialized;
-
+    await background2.initialized;
-    // Add light to make the duck pop out a bit more
-    const rectLight = new THREE.RectAreaLight(0xffffff, 3, 2, 2);
-    rectLight.position.set(0, 1, 1);
-    rectLight.lookAt(0, 0, 0);
-    scene.add(rectLight)
 
     // Add rubber duck
     const gltfLoader = new GLTFLoader();
     const modelURL = await getAssetFileURL('rubberduck.glb');
     const gltf = await gltfLoader.loadAsync(modelURL);
     const duck = gltf.scene;
-    duck.position.set(0, -0.2, -1);
+    duck.position.set(0, 0.45, -0.4);
-    duck.scale.set(3, 3, 3);
     scene.add(duck);
 
     let renderedEnvMap = false;
@@ -88,7 +96,7 @@
           scene,
           // World center to render from
           worldCenter: duck.position,
-          // Hide the donut so we don't obscure the environment
+          // Hide the duck so we don't obscure the environment
           hideObjects: [duck],
           // Not needed in normal use, guards against "first render" issues
           update: true,
@@ -98,8 +106,8 @@
               // Set some reflectivity in the materials of the duck
               obj.material.envMap = envMap;
               obj.material.original_color = obj.material.color.clone();
-              obj.material.metalness = 0.2;
+              obj.material.metalness = 0.0;
-              obj.material.roughness = 0.1;
+              obj.material.roughness = 0.2;
             }
           });
       }
@@ -109,12 +117,11 @@
     window.toggleMetal = function toggleMetal(el) {
       const metal = el.checked;
       for (let obj of duck.children) {
-        obj.material.color.set(metal ? 0xAAAAAA : obj.material.original_color);
+        obj.material.metalness = metal ? 1.0 : 0.0;
-        obj.material.metalness = metal ? 1.0 : 0.2;
+        obj.material.roughness = metal ? 0.02 : 0.2;
-        obj.material.roughness = metal ? 0.02 : 0.1;
       }
     }
   </script>
 </body>
 
-</html>
+</html>