master

分支 (1)

管理

管理

master

verge3d-code-examples
/
webgl_clipping_intersection.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Verge3D webgl - clipIntersection</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>

    <script type="module">

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

      import { GUI } from './jsm/libs/dat.gui.module.js';

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

      let camera, scene, renderer;

      const params = {
        clipIntersection: true,
        planeConstant: 0,
        showHelpers: false
      };

      const clipPlanes = [
        new v3d.Plane(new v3d.Vector3(1, 0, 0), 0),
        new v3d.Plane(new v3d.Vector3(0, - 1, 0), 0),
        new v3d.Plane(new v3d.Vector3(0, 0, - 1), 0)
      ];

      init();
      render();

      function init() {

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

        scene = new v3d.Scene();

        camera = new v3d.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 200);

        camera.position.set(- 1.5, 2.5, 3.0);

        const controls = new OrbitControls(camera, renderer.domElement);
        controls.addEventListener('change', render); // use only if there is no animation loop
        controls.minDistance = 1;
        controls.maxDistance = 10;
        controls.enablePan = false;

        const light = new v3d.HemisphereLight(0xffffff, 0x080808, 1.5);
        light.position.set(- 1.25, 1, 1.25);
        scene.add(light);

        // const helper = new v3d.CameraHelper(light.shadow.camera);
        // scene.add(helper);

        //

        const group = new v3d.Group();

        for (let i = 1; i <= 30; i += 2) {

          const geometry = new v3d.SphereBufferGeometry(i / 30, 48, 24);

          const material = new v3d.MeshLambertMaterial({

            color: new v3d.Color().setHSL(Math.random(), 0.5, 0.5),
            side: v3d.DoubleSide,
            clippingPlanes: clipPlanes,
            clipIntersection: params.clipIntersection

          });

          group.add(new v3d.Mesh(geometry, material));

        }

        scene.add(group);

        // helpers

        const helpers = new v3d.Group();
        helpers.add(new v3d.PlaneHelper(clipPlanes[0], 2, 0xff0000));
        helpers.add(new v3d.PlaneHelper(clipPlanes[1], 2, 0x00ff00));
        helpers.add(new v3d.PlaneHelper(clipPlanes[2], 2, 0x0000ff));
        helpers.visible = false;
        scene.add(helpers);

        // gui

        const gui = new GUI();

        gui.add(params, 'clipIntersection').name('clip intersection').onChange(function(value) {

          const children = group.children;

          for (let i = 0; i < children.length; i++) {

            children[i].material.clipIntersection = value;

          }

          render();

        });

        gui.add(params, 'planeConstant', - 1, 1).step(0.01).name('plane constant').onChange(function(value) {

          for (let j = 0; j < clipPlanes.length; j ++) {

            clipPlanes[j].constant = value;

          }

          render();

        });

        gui.add(params, 'showHelpers').name('show helpers').onChange(function(value) {

          helpers.visible = value;

          render();

        });

        //

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

      }

      function onWindowResize() {

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

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

        render();

      }

      function render() {

        renderer.render(scene, camera);

      }

    </script>

  </body>
</html>