master

分支 (1)

管理

管理

master

verge3d-code-examples
/
webxr_ar_paint.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Verge3D ar - paint</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <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> ar - paint<br/>(Chrome Android 81+)
    </div>

    <script type="module">

      import * as v3d from '../build/v3d.module.js';
      import { TubePainter } from './jsm/misc/TubePainter.js';
      import { ARButton } from './jsm/webxr/ARButton.js';

      let container;
      let camera, scene, renderer;
      let controller, painter;

      const cursor = new v3d.Vector3();

      init();
      animate();

      function init() {

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

        scene = new v3d.Scene();

        camera = new v3d.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 20);

        //

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

        //

        document.body.appendChild(ARButton.createButton(renderer));

        // model

        const light = new v3d.HemisphereLight(0xffffff, 0xbbbbff, 1);
        light.position.set(0, 1, 0);
        scene.add(light);

        //

        painter = new TubePainter();
        painter.setSize(0.4);
        painter.mesh.material.side = v3d.DoubleSide;
        scene.add(painter.mesh);

        //

        function onSelectStart() {

          this.userData.isSelecting = true;
          this.userData.skipFrames = 2;

        }

        function onSelectEnd() {

          this.userData.isSelecting = false;

        }

        controller = renderer.xr.getController(0);
        controller.addEventListener('selectstart', onSelectStart);
        controller.addEventListener('selectend', onSelectEnd);
        controller.userData.skipFrames = 0;
        scene.add(controller);

        //

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

      }

      function onWindowResize() {

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

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

      }

      //

      function handleController(controller) {

        const userData = controller.userData;

        cursor.set(0, 0, - 0.2).applyMatrix4(controller.matrixWorld);

        if (userData.isSelecting === true) {

          if (userData.skipFrames >= 0) {

            // TODO(mrdoob) Revisit this

            userData.skipFrames --;

            painter.moveTo(cursor);

          } else {

            painter.lineTo(cursor);
            painter.update();

          }

        }

      }

      function animate() {

        renderer.setAnimationLoop(render);

      }

      function render() {

        handleController(controller);

        renderer.render(scene, camera);

      }

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