master

分支 (1)

管理

管理

master

verge3d-code-examples
/
webgl_geometry_text_shapes.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Verge3D webgl - simple text from json</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">
    <style>
      body {
        background-color: #f0f0f0;
        color: #444;
      }
      a {
        color: #08f;
      }
    </style>
  </head>
  <body>
    <div id="info">
      <a href="https://www.soft8soft.com/verge3d" target="_blank" rel="noopener">Verge3D</a> webgl - simple text from json fonts
    </div>

    <script type="module">

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

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

      let camera, scene, renderer;

      init();
      animate();

      function init() {

        camera = new v3d.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
        camera.position.set(0, - 400, 600);

        scene = new v3d.Scene();
        scene.background = new v3d.Color(0xf0f0f0);

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

          const color = 0x006699;

          const matDark = new v3d.LineBasicMaterial({
            color: color,
            side: v3d.DoubleSide
          });

          const matLite = new v3d.MeshBasicMaterial({
            color: color,
            transparent: true,
            opacity: 0.4,
            side: v3d.DoubleSide
          });

          const message = "   Verge3D\nSimple text.";

          const shapes = font.generateShapes(message, 100);

          const geometry = new v3d.ShapeBufferGeometry(shapes);

          geometry.computeBoundingBox();

          const xMid = - 0.5 * (geometry.boundingBox.max.x - geometry.boundingBox.min.x);

          geometry.translate(xMid, 0, 0);

          // make shape (N.B. edge view not visible)

          const text = new v3d.Mesh(geometry, matLite);
          text.position.z = - 150;
          scene.add(text);

          // make line shape (N.B. edge view remains visible)

          const holeShapes = [];

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

            const shape = shapes[i];

            if (shape.holes && shape.holes.length > 0) {

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

                const hole = shape.holes[j];
                holeShapes.push(hole);

              }

            }

          }

          shapes.push.apply(shapes, holeShapes);

          const lineText = new v3d.Object3D();

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

            const shape = shapes[i];

            const points = shape.getPoints();
            const geometry = new v3d.BufferGeometry().setFromPoints(points);

            geometry.translate(xMid, 0, 0);

            const lineMesh = new v3d.Line(geometry, matDark);
            lineText.add(lineMesh);

          }

          scene.add(lineText);

        }); //end load function

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

        const controls = new OrbitControls(camera, renderer.domElement);
        controls.target.set(0, 0, 0);
        controls.update();

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

      } // end init

      function onWindowResize() {

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

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

      }

      function animate() {

        requestAnimationFrame(animate);

        render();

      }

      function render() {

        renderer.render(scene, camera);

      }

    </script>

  </body>
</html>