spark/examples/envmap/index.html at main · sparkjsdev/spark · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Spark • Environment Mapping</title>
  <style>
    body {
      margin: 0;
    }

    label {
      font-family: sans-serif;
      font-size: 20px;
      position: absolute;
      color: white;
      cursor: pointer;
      padding: 10px;
      border-radius: 10px;
      display: block;
      width: 100px;
      left: calc(50% - 50px);
      top: 10px;
      text-align: center;
      background-color: black;
    }
  </style>
</head>

<body>
  <label><input type="checkbox" onchange="toggleMetal(this)" autocomplete="off"> Plastic</label>
  <script type="importmap">
    {
      "imports": {
        "three": "../js/vendor/three/build/three.module.js",
        "three/addons/": "/examples/js/vendor/three/examples/jsm/",
        "@sparkjsdev/spark": "../../dist/spark.module.js"
      }
    }
  </script>
  <script type="module">
    import * as THREE from "three";
    import { SplatMesh, SparkRenderer, PackedSplats } from "@sparkjsdev/spark";
    import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
    import { getAssetFileURL } from "../js/get-asset-url.js";

    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(0x1b2037), 1.0);
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    window.addEventListener('resize', onWindowResize, false);
    function onWindowResize() {
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
      renderer.setSize(window.innerWidth, window.innerHeight);
    }

    const spark = new SparkRenderer({ renderer });
    scene.add(spark);

    const splatURL = await getAssetFileURL("fireplace.spz");
    const packedSplats = new PackedSplats({ url: splatURL });
    const background = new SplatMesh({ packedSplats });
    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({ packedSplats });
    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 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.45, -0.4);
    scene.add(duck);

    const offline = new SparkRenderer({ renderer });
    const envMap = await offline.renderEnvMap({
      scene,
      // World center to render from
      worldCenter: duck.position,
      // Hide the duck so we don't obscure the environment
      hideObjects: [duck],
    });
    for (let obj of duck.children) {
      // Set some reflectivity in the materials of the duck
      obj.material.envMap = envMap;
      obj.material.metalness = 1.0;
      obj.material.roughness = 0.02;
    }

    let lastTime;
    let renderedEnvMap = false;
    renderer.setAnimationLoop(function animate(time) {
      const deltaTime = time - (lastTime || time);
      lastTime = time;
      renderer.render(scene, camera);
      duck.rotation.y += deltaTime / 2500;
    });

    // Toggles between normal duck and metal duck
    window.toggleMetal = function toggleMetal(el) {
      const metal = el.checked;
      for (let obj of duck.children) {
        obj.material.metalness = metal ? 0.0 : 1.0;
        obj.material.roughness = metal ? 0.2 : 0.02;
      }
    }
  </script>
</body>

</html>