master

分支 (1)

管理

管理

master

verge3d-code-examples
/
webxr_vr_handinput_profiles.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Verge3D vr - handinput - profiles</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> vr - handinput - profiles<br/>
      (Oculus Browser with #webxr-hands flag enabled)
    </div>

    <script type="module">

      import * as v3d from '../build/v3d.module.js';
      import { OrbitControls } from './jsm/controls/OrbitControls.js';
      import { VRButton } from './jsm/webxr/VRButton.js';
      import { XRControllerModelFactory } from './jsm/webxr/XRControllerModelFactory.js';
      import { XRHandModelFactory } from './jsm/webxr/XRHandModelFactory.js';

      let container;
      let camera, scene, renderer;
      let hand1, hand2;
      let controller1, controller2;
      let controllerGrip1, controllerGrip2;

      const currentHandModel = {
        left: 0,
        right: 0
      };

      const handModels = {
        left: null,
        right: null
      };

      let controls;

      init();
      animate();


      function init() {

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

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

        camera = new v3d.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 10);
        camera.position.set(0, 1.6, 3);

        controls = new OrbitControls(camera, container);
        controls.target.set(0, 1.6, 0);
        controls.update();

        const floorGeometry = new v3d.PlaneBufferGeometry(4, 4);
        const floorMaterial = new v3d.MeshStandardMaterial({ color: 0x222222 });
        const floor = new v3d.Mesh(floorGeometry, floorMaterial);
        floor.rotation.x = - Math.PI / 2;
        floor.receiveShadow = true;
        scene.add(floor);

        scene.add(new v3d.HemisphereLight(0x808080, 0x606060));

        const light = new v3d.DirectionalLight(0xffffff);
        light.position.set(0, 6, 0);
        light.castShadow = true;
        light.shadow.camera.top = 2;
        light.shadow.camera.bottom = - 2;
        light.shadow.camera.right = 2;
        light.shadow.camera.left = - 2;
        light.shadow.mapSize.set(4096, 4096);
        scene.add(light);

        //

        renderer = new v3d.WebGLRenderer({ antialias: true });
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.outputEncoding = v3d.sRGBEncoding;
        renderer.shadowMap.enabled = true;
        renderer.xr.enabled = true;

        container.appendChild(renderer.domElement);

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

        // controllers

        controller1 = renderer.xr.getController(0);
        scene.add(controller1);

        controller2 = renderer.xr.getController(1);
        scene.add(controller2);

        const controllerModelFactory = new XRControllerModelFactory();
        const handModelFactory = new XRHandModelFactory().setPath("./models/fbx/");

        // Hand 1

        controllerGrip1 = renderer.xr.getControllerGrip(0);
        controllerGrip1.add(controllerModelFactory.createControllerModel(controllerGrip1));
        scene.add(controllerGrip1);

        hand1 = renderer.xr.getHand(0);
        scene.add(hand1);

        handModels.left = [
          handModelFactory.createHandModel(hand1, "boxes"),
          handModelFactory.createHandModel(hand1, "spheres"),
          handModelFactory.createHandModel(hand1, "oculus", { model: "lowpoly" }),
          handModelFactory.createHandModel(hand1, "oculus")
        ];

        handModels.left.forEach(model => {

          model.visible = false;
          hand1.add(model);

        });

        handModels.left[currentHandModel.left].visible = true;

        function cycleHandModel(hand) {

          handModels[hand][currentHandModel[hand]].visible = false;
          currentHandModel[hand] = (currentHandModel[hand] + 1) % handModels[hand].length;
          handModels[hand][currentHandModel[hand]].visible = true;

        }

        hand1.addEventListener('pinchend', evt => {

          cycleHandModel(evt.handedness);

        });

        // Hand 2

        controllerGrip2 = renderer.xr.getControllerGrip(1);
        controllerGrip2.add(controllerModelFactory.createControllerModel(controllerGrip2));
        scene.add(controllerGrip2);

        hand2 = renderer.xr.getHand(1);
        scene.add(hand2);

        handModels.right = [
          handModelFactory.createHandModel(hand2, "boxes"),
          handModelFactory.createHandModel(hand2, "spheres"),
          handModelFactory.createHandModel(hand2, "oculus", { model: "lowpoly" }),
          handModelFactory.createHandModel(hand2, "oculus")
        ];
        handModels.right.forEach(model => {

          model.visible = false;
          hand2.add(model);

        });

        handModels.right[currentHandModel.right].visible = true;

        window.handModels = handModels;

        hand2.addEventListener('pinchend', evt => {

          cycleHandModel(evt.handedness);

        });

        //
        window.hands = [hand1, hand2];

        const geometry = new v3d.BufferGeometry().setFromPoints([new v3d.Vector3(0, 0, 0), new v3d.Vector3(0, 0, - 1)]);

        const line = new v3d.Line(geometry);
        line.name = 'line';
        line.scale.z = 5;

        controller1.add(line.clone());
        controller2.add(line.clone());

        //

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

      }

      function onWindowResize() {

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

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

      }
      //

      function animate() {

        renderer.setAnimationLoop(render);

      }

      function render() {

        renderer.render(scene, camera);

      }

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