storytold/spark
2
0
Fork 0
mirror of https://github.com/storytold/spark.git synced 2026-10-09 00:09:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
Set fireplace as background in the environment example
This commit is contained in:
Diego Marcos
2025-05-26 17:31:56 -07:00
committed by GitHub
parent 5c18c9d294 270b98b574
commit b4257bcd64
1 changed files with 33 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/envmap/index.html
+33 -26
View File
@@ -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;
}
body {
margin: 0;
background-color: black;
}
</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" });
background.position.set(5, -10, -10);
const splatURL = await getAssetFileURL("fireplace.spz");
const background = new SplatMesh({ url: splatURL });
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;
// 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)
await background2.initialized;
// 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.scale.set(3, 3, 3);
duck.position.set(0, 0.45, -0.4);
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.roughness = 0.1;
obj.material.metalness = 0.0;
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.2;
obj.material.roughness = metal ? 0.02 : 0.1;
obj.material.metalness = metal ? 1.0 : 0.0;
obj.material.roughness = metal ? 0.02 : 0.2;
}
}
</script>
</body>
</html>
</html>