webgl_modifier_curve.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Verge3D webgl - curve modifier</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="info">
      <a href="https://www.soft8soft.com/verge3d" target="_blank" rel="noopener">Verge3D</a> webgl - curve modifier
    </div>

    <!-- Import maps polyfill -->
    <!-- Remove this when import maps will be widely supported -->
    <script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>

    <script type="importmap">
      {
        "imports": {
          "v3d": "../build/v3d.module.js",
          "v3d/addons/": "./jsm/"
        }
      }
    </script>

    <script type="module">
      import * as v3d from 'v3d';
      import { TransformControls } from 'v3d/addons/controls/TransformControls.js';
      import Stats from 'v3d/addons/libs/stats.module.js';
      import { Flow } from 'v3d/addons/modifiers/CurveModifier.js';
      import { FontLoader } from 'v3d/addons/loaders/FontLoader.js';
      import { TextGeometry } from 'v3d/addons/geometries/TextGeometry.js';

      const ACTION_SELECT = 1, ACTION_NONE = 0;
      const curveHandles = [];
      const mouse = new v3d.Vector2();

      let stats;
      let scene,
        camera,
        renderer,
        rayCaster,
        control,
        flow,
        action = ACTION_NONE;

      init();
      animate();

      function init() {

        scene = new v3d.Scene();

        camera = new v3d.PerspectiveCamera(
          40,
          window.innerWidth / window.innerHeight,
          1,
          1000
        );
        camera.position.set(2, 2, 4);
        camera.lookAt(scene.position);

        const initialPoints = [
          { x: 1, y: 0, z: -1 },
          { x: 1, y: 0, z: 1 },
          { x: -1, y: 0, z: 1 },
          { x: -1, y: 0, z: -1 },
        ];

        const boxGeometry = new v3d.BoxGeometry(0.1, 0.1, 0.1);
        const boxMaterial = new v3d.MeshBasicMaterial();

        for (const handlePos of initialPoints) {

          const handle = new v3d.Mesh(boxGeometry, boxMaterial);
          handle.position.copy(handlePos);
          curveHandles.push(handle);
          scene.add(handle);

        }

        const curve = new v3d.CatmullRomCurve3(
          curveHandles.map((handle) => handle.position)
        );
        curve.curveType = 'centripetal';
        curve.closed = true;

        const points = curve.getPoints(50);
        const line = new v3d.LineLoop(
          new v3d.BufferGeometry().setFromPoints(points),
          new v3d.LineBasicMaterial({ color: 0x00ff00 })
        );

        scene.add(line);

        //

        const light = new v3d.DirectionalLight(0xffaa33);
        light.position.set(- 10, 10, 10);
        light.intensity = 1.0;
        scene.add(light);

        const light2 = new v3d.AmbientLight(0x003973);
        light2.intensity = 1.0;
        scene.add(light2);

        //

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

          const geometry = new TextGeometry('Hello Verge3D!', {
            font: font,
            size: 0.2,
            height: 0.05,
            curveSegments: 12,
            bevelEnabled: true,
            bevelThickness: 0.02,
            bevelSize: 0.01,
            bevelOffset: 0,
            bevelSegments: 5,
          });

          geometry.rotateX(Math.PI);

          const material = new v3d.MeshStandardMaterial({
            color: 0x99ffff
          });

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

          flow = new Flow(objectToCurve);
          flow.updateCurve(0, curve);
          scene.add(flow.object3D);

        });

        //

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

        renderer.domElement.addEventListener('pointerdown', onPointerDown);

        rayCaster = new v3d.Raycaster();
        control = new TransformControls(camera, renderer.domElement);
        control.addEventListener('dragging-changed', function(event) {

          if (!event.value) {

            const points = curve.getPoints(50);
            line.geometry.setFromPoints(points);
            flow.updateCurve(0, curve);

          }

        });

        stats = new Stats();
        document.body.appendChild(stats.dom);

        window.addEventListener('resize', onWindowResize);

      }

      function onWindowResize() {

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

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

      }

      function onPointerDown(event) {

        action = ACTION_SELECT;
        mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
        mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;

      }

      function animate() {

        requestAnimationFrame(animate);

        if (action === ACTION_SELECT) {

          rayCaster.setFromCamera(mouse, camera);
          action = ACTION_NONE;
          const intersects = rayCaster.intersectObjects(curveHandles, false);
          if (intersects.length) {

            const target = intersects[0].object;
            control.attach(target);
            scene.add(control);

          }

        }

        if (flow) {

          flow.moveAlongCurve(0.001);

        }

        render();

      }

      function render() {

        renderer.render(scene, camera);

        stats.update();

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