master

分支 (1)

管理

管理

master

verge3d-code-examples
/
webgl_furnace_test.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Verge3D white furnace test</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">
  </head>
  <body>

    <div id="container">
      <div id="info">
        <a href="https://www.soft8soft.com/verge3d" target="_blank" rel="noopener">Verge3D</a> -
        <a href="https://google.github.io/filament/Filament.md.html#toc4.7.2" target="_blank" rel="noopener">White Furnace</a> energy conservation test by <a href="https://jsantell.com/" target="_blank" rel="noopener">Jordan Santell</a>
      </div>
    </div>

    <script type="module">

      import * as v3d from '../build/v3d.module.js';

      let scene, camera, renderer, radianceMap;

      function init() {

        const width = window.innerWidth;
        const height = window.innerHeight;
        const aspect = width / height;

        // renderer

        renderer = new v3d.WebGLRenderer({ antialias: true });
        renderer.setSize(width, height);
        renderer.setPixelRatio(window.devicePixelRatio);
        document.body.appendChild(renderer.domElement);

        window.addEventListener('resize', onResize, false);

        document.body.addEventListener('mouseover', function() {

          scene.traverse(function(child) {

            if (child.isMesh) child.material.color.setHex(0xaaaaff);

          });

        });

        document.body.addEventListener('mouseout', function() {

          scene.traverse(function(child) {

            if (child.isMesh) child.material.color.setHex(0xffffff);

          });

        });

        // scene

        scene = new v3d.Scene();

        // camera

        camera = new v3d.PerspectiveCamera(40, aspect, 1, 30);
        camera.position.set(0, 0, 18);

      }

      function createObjects() {

        const geometry = new v3d.SphereBufferGeometry(0.4, 32, 32);

        for (let x = 0; x <= 10; x ++) {

          for (let y = 0; y <= 10; y ++) {

            const material = new v3d.MeshPhysicalMaterial({
              roughness: x / 10,
              metalness: y / 10,
              color: 0xffffff,
              envMap: radianceMap,
              envMapIntensity: 1,
              reflectivity: 1
            });

            const mesh = new v3d.Mesh(geometry, material);
            mesh.position.x = x - 5;
            mesh.position.y = 5 - y;
            scene.add(mesh);

          }

        }

      }

      function createEnvironment() {

        return new Promise(function(resolve) {

          const envScene = new v3d.Scene();
          envScene.background = new v3d.Color(0xcccccc);

          const pmremGenerator = new v3d.PMREMGenerator(renderer);
          radianceMap = pmremGenerator.fromScene(envScene).texture;
          pmremGenerator.dispose();

          scene.background = radianceMap;

          resolve();

        });

      }

      function onResize() {

        const width = window.innerWidth;
        const height = window.innerHeight;

        camera.aspect = width / height;
        camera.updateProjectionMatrix();

        renderer.setSize(width, height);

      }

      function animate() {

        renderer.setAnimationLoop(render);

      }

      function render() {

        renderer.render(scene, camera);

      }

      Promise.resolve()
        .then(init)
        .then(createEnvironment)
        .then(createObjects)
        .then(animate);

    </script>
  </body>
</html>