master

分支 (1)

管理

管理

master

verge3d-code-examples
/
webgl_materials_variations_standard.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Verge3D webgl - materials</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>
    <div id="info"><a href="https://www.soft8soft.com/verge3d" target="_blank" rel="noopener">Verge3D</a> - Standard Material Variations by <a href="http://clara.io/" target="_blank" rel="noopener">Ben Houston</a>.<br/><br/>
    Note: Every second sphere has an IBL environment map on it.</div>

    <script type="module">

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

      import Stats from './jsm/libs/stats.module.js';

      import { OrbitControls } from './jsm/controls/OrbitControls.js';
      import { RGBELoader } from './jsm/loaders/RGBELoader.js';

      let container, stats;

      let camera, scene, renderer;
      let particleLight;

      const loader = new v3d.FontLoader();
      loader.load('fonts/gentilis_regular.typeface.json', function(font) {

        init(font);
        animate();

      });

      function init(font) {

        container = document.createElement('div');
        document.body.appendChild(container);

        camera = new v3d.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 2500);
        camera.position.set(0.0, 400, 400 * 3.5);

        scene = new v3d.Scene();

        let hdrCubeRenderTarget = null;

        // Materials

        let imgTexture = new v3d.TextureLoader().load("textures/planets/moon_1024.jpg");
        imgTexture.wrapS = imgTexture.wrapT = v3d.RepeatWrapping;
        imgTexture.anisotropy = 16;
        imgTexture = null;

        new RGBELoader()
          .setDataType(v3d.UnsignedByteType)
          .setPath('textures/equirectangular/')
          .load('pedestrian_overpass_1k.hdr', function(hdrEquirect) {

            hdrCubeRenderTarget = pmremGenerator.fromEquirectangular(hdrEquirect);
            hdrEquirect.dispose();
            pmremGenerator.dispose();

            const bumpScale = 1;
            const cubeWidth = 400;
            const numberOfSphersPerSide = 5;
            const sphereRadius = (cubeWidth / numberOfSphersPerSide) * 0.8 * 0.5;
            const stepSize = 1.0 / numberOfSphersPerSide;

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

            let index = 0;

            for (let alpha = 0; alpha <= 1.0; alpha += stepSize) {

              for (let beta = 0; beta <= 1.0; beta += stepSize) {

                for (let gamma = 0; gamma <= 1.0; gamma += stepSize) {

                  // basic monochromatic energy preservation
                  const diffuseColor = new v3d.Color().setHSL(alpha, 0.5, gamma * 0.5 + 0.1);

                  const material = new v3d.MeshStandardMaterial({
                    map: imgTexture,
                    bumpMap: imgTexture,
                    bumpScale: bumpScale,
                    color: diffuseColor,
                    metalness: beta,
                    roughness: 1.0 - alpha,
                    envMap: index % 2 === 0 ? null : hdrCubeRenderTarget.texture
                  });

                  index ++;

                  const mesh = new v3d.Mesh(geometry, material);

                  mesh.position.x = alpha * 400 - 200;
                  mesh.position.y = beta * 400 - 200;
                  mesh.position.z = gamma * 400 - 200;

                  scene.add(mesh);

                }

              }

              index ++;

            }

            scene.background = hdrCubeRenderTarget.texture;

          });

        function addLabel(name, location) {

          const textGeo = new v3d.TextBufferGeometry(name, {

            font: font,

            size: 20,
            height: 1,
            curveSegments: 1

          });

          const textMaterial = new v3d.MeshBasicMaterial({ color: 0xffffff });
          const textMesh = new v3d.Mesh(textGeo, textMaterial);
          textMesh.position.copy(location);
          scene.add(textMesh);

        }

        addLabel("+roughness", new v3d.Vector3(- 350, 0, 0));
        addLabel("-roughness", new v3d.Vector3(350, 0, 0));

        addLabel("-metalness", new v3d.Vector3(0, - 300, 0));
        addLabel("+metalness", new v3d.Vector3(0, 300, 0));

        addLabel("-diffuse", new v3d.Vector3(0, 0, - 300));
        addLabel("+diffuse", new v3d.Vector3(0, 0, 300));

        particleLight = new v3d.Mesh(new v3d.SphereBufferGeometry(4, 8, 8), new v3d.MeshBasicMaterial({ color: 0xffffff }));
        scene.add(particleLight);

        // Lights

        scene.add(new v3d.AmbientLight(0x222222));

        const directionalLight = new v3d.DirectionalLight(0xffffff, 1);
        directionalLight.position.set(1, 1, 1).normalize();
        scene.add(directionalLight);

        const pointLight = new v3d.PointLight(0xffffff, 2, 800);
        particleLight.add(pointLight);

        //

        renderer = new v3d.WebGLRenderer({ antialias: true });
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        container.appendChild(renderer.domElement);

        renderer.outputEncoding = v3d.sRGBEncoding;
        renderer.toneMapping = v3d.ACESFilmicToneMapping;
        renderer.toneMappingExposure = 0.75;

        //

        const pmremGenerator = new v3d.PMREMGenerator(renderer);
        pmremGenerator.compileEquirectangularShader();

        //

        stats = new Stats();
        container.appendChild(stats.dom);

        const controls = new OrbitControls(camera, renderer.domElement);
        controls.minDistance = 200;
        controls.maxDistance = 2000;

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

      }

      function onWindowResize() {

        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();

        renderer.setSize(window.innerWidth, window.innerHeight);

      }

      //

      function animate() {

        requestAnimationFrame(animate);

        render();
        stats.update();

      }

      function render() {

        const timer = Date.now() * 0.00025;

        //camera.position.x = Math.cos(timer) * 800;
        //camera.position.z = Math.sin(timer) * 800;

        camera.lookAt(scene.position);

        particleLight.position.x = Math.sin(timer * 7) * 300;
        particleLight.position.y = Math.cos(timer * 5) * 400;
        particleLight.position.z = Math.cos(timer * 3) * 300;

        renderer.render(scene, camera);

      }

    </script>

  </body>
</html>