master

分支 (1)

管理

管理

master

verge3d-code-examples
/
webgl_geometry_normals.html

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

    <script type="module">

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

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

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

      let container, stats, gui;
      let camera, scene, renderer;
      let mesh, geometry;

      const geometries = [
        new v3d.BoxBufferGeometry(200, 200, 200, 2, 2, 2),
        new v3d.CircleBufferGeometry(200, 32),
        new v3d.CylinderBufferGeometry(75, 75, 200, 8, 8),
        new v3d.IcosahedronBufferGeometry(100, 1),
        new v3d.OctahedronBufferGeometry(200, 0),
        new v3d.PlaneBufferGeometry(200, 200, 4, 4),
        new v3d.RingBufferGeometry(32, 64, 16),
        new v3d.SphereBufferGeometry(100, 12, 12),
        new v3d.TorusBufferGeometry(64, 16, 12, 12),
        new v3d.TorusKnotBufferGeometry(64, 16)
      ];

      const options = {
        Geometry: 0
      };

      const material = new v3d.MeshBasicMaterial({ color: 0xfefefe, wireframe: true, opacity: 0.5 });

      init();
      animate();

      function addMesh() {

        if (mesh !== undefined) {

          scene.remove(mesh);
          geometry.dispose();

        }

        geometry = geometries[options.Geometry];

        // scale geometry to a uniform size

        geometry.computeBoundingSphere();

        const scaleFactor = 160 / geometry.boundingSphere.radius;
        geometry.scale(scaleFactor, scaleFactor, scaleFactor);

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

        const vertexNormalsHelper = new VertexNormalsHelper(mesh, 10);
        mesh.add(vertexNormalsHelper);

      }

      function init() {

        container = document.getElementById('container');

        camera = new v3d.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
        camera.position.z = 500;

        scene = new v3d.Scene();

        addMesh();

        //

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

        //

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

        //

        const geometries = {
          BoxBufferGeometry: 0,
          CircleBufferGeometry: 1,
          CylinderBufferGeometry: 2,
          IcosahedronBufferGeometry: 3,
          OctahedronBufferGeometry: 4,
          PlaneBufferGeometry: 5,
          RingBufferGeometry: 6,
          SphereBufferGeometry: 7,
          TorusBufferGeometry: 8,
          TorusKnotBufferGeometry: 9
        };

        gui = new GUI({ width: 350 });
        gui.add(options, 'Geometry', geometries).onChange(function() {

          addMesh();

        });

        //

        const controls = new OrbitControls(camera, renderer.domElement);
        controls.enableZoom = false;

        //

        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() {

        renderer.render(scene, camera);

      }

    </script>

  </body>
</html>