javascript
/
three.js
镜像来自 https://github.com/tazdij/three.js.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460
							<!DOCTYPE html>
<html lang="en">

<head>
  <title>three.js webxr hands - press button</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://threejs.org" target="_blank" rel="noopener">three.js</a>  vr - handinput - press button<br />
    (Oculus Browser 15.1+)
  </div>

  <script type="module">

    import * as THREE from '../build/three.module.js';
    import { VRButton } from './jsm/webxr/VRButton.js';
    import { XRControllerModelFactory } from './jsm/webxr/XRControllerModelFactory.js';
    import { OculusHandModel } from './jsm/webxr/OculusHandModel.js';
    import { createText } from './jsm/webxr/Text2D.js';

    import { World, System, Component, TagComponent, Types } from "https://ecsy.io/build/ecsy.module.js";

    class Object3D extends Component { }

    Object3D.schema = {
      object: { type: Types.Ref }
    };

    class Button extends Component { }

    Button.schema = {
      // button states: [resting, pressed, fully_pressed, recovering]
      currState: { type: Types.String, default: 'resting' },
      prevState: { type: Types.String, default: 'resting' },
      pressSound: { type: Types.Ref, default: null },
      releaseSound: { type: Types.Ref, default: null },
      restingY: { type: Types.Number, default: null },
      surfaceY: { type: Types.Number, default: null },
      recoverySpeed: { type: Types.Number, default: 0.4 },
      fullPressDistance: { type: Types.Number, default: null },
      action: { type: Types.Ref, default: () => { } }
    }

    class ButtonSystem extends System {
      init(attributes) {
        this.renderer = attributes.renderer;
        this.soundAdded = false;
      }

      execute(delta, time) {
        let buttonPressSound, buttonReleaseSound;
        if (this.renderer.xr.getSession() && !this.soundAdded) {
          let xrCamera = this.renderer.xr.getCamera(camera);

          const listener = new THREE.AudioListener();
          xrCamera.add(listener);

          // create a global audio source
          buttonPressSound = new THREE.Audio(listener);
          buttonReleaseSound = new THREE.Audio(listener);

          // load a sound and set it as the Audio object's buffer
          const audioLoader = new THREE.AudioLoader();
          audioLoader.load('sounds/button-press.ogg', function (buffer) {
            buttonPressSound.setBuffer(buffer);
          });
          audioLoader.load('sounds/button-release.ogg', function (buffer) {
            buttonReleaseSound.setBuffer(buffer);
          });
          this.soundAdded = true;
        }

        this.queries.buttons.results.forEach(entity => {
          var button = entity.getMutableComponent(Button);
          var buttonMesh = entity.getComponent(Object3D).object;
          // populate restingY
          if (button.restingY == null) {
            button.restingY = buttonMesh.position.y;
          }
          if (buttonPressSound) {
            button.pressSound = buttonPressSound;
          }
          if (buttonReleaseSound) {
            button.releaseSound = buttonReleaseSound;
          }

          if (button.currState == 'fully_pressed' && button.prevState != 'fully_pressed') {
            button.pressSound?.play();
            button.action();
          }
          if (button.currState == 'recovering' && button.prevState != 'recovering') {
            button.releaseSound?.play();
          }

          // preserve prevState, clear currState
          // FingerInputSystem will update currState
          button.prevState = button.currState;
          button.currState = 'resting';
        });
      }
    }

    ButtonSystem.queries = {
      buttons: {
        components: [Button]
      }
    }

    class Pressable extends TagComponent { }

    class FingerInputSystem extends System {
      init(attributes) {
        this.hands = attributes.hands;
      }

      execute(delta, time) {
        this.queries.pressable.results.forEach(entity => {
          var button = entity.getMutableComponent(Button);
          let object = entity.getComponent(Object3D).object;
          let pressingDistances = [];
          this.hands.forEach(hand => {
            if (hand && hand.intersectBoxObject(object)) {
              let pressingPosition = hand.getPointerPosition();
              pressingDistances.push(button.surfaceY - object.worldToLocal(pressingPosition).y);
            }
          });
          if (pressingDistances.length == 0) { // not pressed this frame
            if (object.position.y < button.restingY) {
              object.position.y += button.recoverySpeed * delta;
              button.currState = "recovering";
            } else {
              object.position.y = button.restingY;
              button.currState = "resting";
            }
          } else {
            button.currState = "pressed";
            let pressingDistance = Math.max(pressingDistances);
            if (pressingDistance > 0) {
              object.position.y -= pressingDistance;
            }
            if (object.position.y <= button.restingY - button.fullPressDistance) {
              button.currState = "fully_pressed";
              object.position.y = button.restingY - button.fullPressDistance;
            }
          }
        });
      }
    }

    FingerInputSystem.queries = {
      pressable: {
        components: [Pressable]
      }
    };

    class Rotating extends TagComponent { }

    class RotatingSystem extends System {
      execute(delta, time) {
        this.queries.rotatingObjects.results.forEach(entity => {
          var object = entity.getComponent(Object3D).object;
          object.rotation.x += 0.4 * delta;
          object.rotation.y += 0.4 * delta;
        });
      }
    }

    RotatingSystem.queries = {
      rotatingObjects: {
        components: [Rotating]
      }
    }

    class HandsInstructionText extends TagComponent { }

    class InstructionSystem extends System {
      init(attributes) {
        this.controllers = attributes.controllers;
      }

      execute(delta, time) {
        let visible = false;
        this.controllers.forEach(controller => {
          if (controller.visible) {
            visible = true;
          }
        })
        this.queries.instructionTexts.results.forEach(entity => {
          var object = entity.getComponent(Object3D).object;
          object.visible = visible;
        });
      }
    }

    InstructionSystem.queries = {
      instructionTexts: {
        components: [HandsInstructionText]
      }
    }

    class OffsetFromCamera extends Component { }

    OffsetFromCamera.schema = {
      x: { type: Types.Number, default: 0 },
      y: { type: Types.Number, default: 0 },
      z: { type: Types.Number, default: 0 },
    }

    class NeedCalibration extends TagComponent { }

    class CalibrationSystem extends System {
      init(attributes) {
        this.camera = attributes.camera;
        this.renderer = attributes.renderer;
      }

      execute(delta, time) {
        this.queries.needCalibration.results.forEach(entity => {
          if (this.renderer.xr.getSession()) {
            let offset = entity.getComponent(OffsetFromCamera);
            let object = entity.getComponent(Object3D).object;
            let xrCamera = renderer.xr.getCamera(this.camera);
            object.position.x = xrCamera.position.x + offset.x;
            object.position.y = xrCamera.position.y + offset.y;
            object.position.z = xrCamera.position.z + offset.z;
            entity.removeComponent(NeedCalibration);
          }
        });
      }
    }

    CalibrationSystem.queries = {
      needCalibration: {
        components: [NeedCalibration]
      }
    }

    let world = new World();
    var clock = new THREE.Clock();
    let camera, scene, renderer;

    init();
    animate();

    function makeButtonMesh(x, y, z, color) {
      const geometry = new THREE.BoxGeometry(x, y, z);
      const material = new THREE.MeshPhongMaterial({ color: color });
      const buttonMesh = new THREE.Mesh(geometry, material);
      return buttonMesh;
    }


    function init() {

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

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

      camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 10);
      camera.position.set(0, 1.2, 0.3);

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

      const light = new THREE.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 THREE.WebGLRenderer({ antialias: true });
      renderer.setPixelRatio(window.devicePixelRatio);
      renderer.setSize(window.innerWidth, window.innerHeight);
      renderer.outputEncoding = THREE.sRGBEncoding;
      renderer.shadowMap.enabled = true;
      renderer.xr.enabled = true;

      container.appendChild(renderer.domElement);

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

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

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

      const controllerModelFactory = new XRControllerModelFactory();

      // Hand 1
      let controllerGrip1 = renderer.xr.getControllerGrip(0);
      controllerGrip1.add(controllerModelFactory.createControllerModel(controllerGrip1));
      scene.add(controllerGrip1);

      let hand1 = renderer.xr.getHand(0);
      let handModel1 = new OculusHandModel(hand1)
      hand1.add(handModel1);
      scene.add(hand1);

      // Hand 2
      let controllerGrip2 = renderer.xr.getControllerGrip(1);
      controllerGrip2.add(controllerModelFactory.createControllerModel(controllerGrip2));
      scene.add(controllerGrip2);

      let hand2 = renderer.xr.getHand(1);
      let handModel2 = new OculusHandModel(hand2);
      hand2.add(handModel2);
      scene.add(hand2);


      // buttons
      const floorGeometry = new THREE.PlaneGeometry(4, 4);
      const floorMaterial = new THREE.MeshPhongMaterial({ color: 0x222222 });
      const floor = new THREE.Mesh(floorGeometry, floorMaterial);
      floor.rotation.x = - Math.PI / 2;
      scene.add(floor);

      const consoleGeometry = new THREE.BoxGeometry(0.5, 0.12, 0.15);
      const consoleMaterial = new THREE.MeshPhongMaterial({ color: 0x595959 });
      let consoleMesh = new THREE.Mesh(consoleGeometry, consoleMaterial);
      consoleMesh.position.set(0, 1, -0.3);
      scene.add(consoleMesh);

      let orangeButton = makeButtonMesh(0.08, 0.1, 0.08, 0xffd3b5);
      orangeButton.position.set(-0.15, 0.04, 0);
      consoleMesh.add(orangeButton);

      let pinkButton = makeButtonMesh(0.08, 0.1, 0.08, 0xe84a5f);
      pinkButton.position.set(-0.05, 0.04, 0);
      consoleMesh.add(pinkButton);

      let resetButton = makeButtonMesh(0.08, 0.1, 0.08, 0x355c7d);
      let resetButtonText = createText("reset", 0.03);
      resetButton.add(resetButtonText);
      resetButtonText.rotation.x = - Math.PI / 2;
      resetButtonText.position.set(0, 0.051, 0);
      resetButton.position.set(0.05, 0.04, 0);
      consoleMesh.add(resetButton);

      let exitButton = makeButtonMesh(0.08, 0.1, 0.08, 0xff0000);
      let exitButtonText = createText("exit", 0.03);
      exitButton.add(exitButtonText);
      exitButtonText.rotation.x = - Math.PI / 2;
      exitButtonText.position.set(0, 0.051, 0);
      exitButton.position.set(0.15, 0.04, 0);
      consoleMesh.add(exitButton);

      let tkGeometry = new THREE.TorusKnotGeometry(0.5, 0.2, 200, 32);
      let tkMaterial = new THREE.MeshPhongMaterial({ color: 0xffffff });
      tkMaterial.metalness = 0.8;
      let torusKnot = new THREE.Mesh(tkGeometry, tkMaterial);
      torusKnot.position.set(0, 1, -5);
      scene.add(torusKnot);

      let instructionText = createText("This is a WebXR Hands demo, please explore with hands.", 0.04);
      instructionText.position.set(0, 1.6, -0.6);
      scene.add(instructionText);

      let exitText = createText("Exiting session...", 0.04);
      exitText.position.set(0, 1.5, -0.6);
      exitText.visible = false;
      scene.add(exitText);

      world
        .registerComponent(Object3D)
        .registerComponent(Button)
        .registerComponent(Pressable)
        .registerComponent(Rotating)
        .registerComponent(HandsInstructionText)
        .registerComponent(OffsetFromCamera)
        .registerComponent(NeedCalibration);

      world
        .registerSystem(RotatingSystem)
        .registerSystem(InstructionSystem, { controllers: [controllerGrip1, controllerGrip2] })
        .registerSystem(CalibrationSystem, { renderer: renderer, camera: camera })
        .registerSystem(ButtonSystem, { renderer: renderer, camera: camera })
        .registerSystem(FingerInputSystem, { hands: [handModel1, handModel2] });

      var csEntity = world.createEntity();
      csEntity.addComponent(OffsetFromCamera, { x: 0, y: -0.4, z: -0.3 });
      csEntity.addComponent(NeedCalibration);
      csEntity.addComponent(Object3D, { object: consoleMesh });

      var obEntity = world.createEntity();
      obEntity.addComponent(Pressable);
      obEntity.addComponent(Object3D, { object: orangeButton });
      let obAction = function () { torusKnot.material.color.setHex(0xffd3b5); };
      obEntity.addComponent(Button, { action: obAction, surfaceY: 0.05, fullPressDistance: 0.02 });

      var pbEntity = world.createEntity();
      pbEntity.addComponent(Pressable);
      pbEntity.addComponent(Object3D, { object: pinkButton });
      let pbAction = function () { torusKnot.material.color.setHex(0xe84a5f); };
      pbEntity.addComponent(Button, { action: pbAction, surfaceY: 0.05, fullPressDistance: 0.02 });

      var rbEntity = world.createEntity();
      rbEntity.addComponent(Pressable);
      rbEntity.addComponent(Object3D, { object: resetButton });
      let rbAction = function () { torusKnot.material.color.setHex(0xffffff); };
      rbEntity.addComponent(Button, { action: rbAction, surfaceY: 0.05, fullPressDistance: 0.02 });

      var ebEntity = world.createEntity();
      ebEntity.addComponent(Pressable);
      ebEntity.addComponent(Object3D, { object: exitButton });
      let ebAction = function () {
        exitText.visible = true;
        setTimeout(function () { exitText.visible = false; renderer.xr.getSession().end(); }, 2000);
      };
      ebEntity.addComponent(Button, { action: ebAction, surfaceY: 0.05, recoverySpeed: 0.2, fullPressDistance: 0.03 });

      var tkEntity = world.createEntity();
      tkEntity.addComponent(Rotating);
      tkEntity.addComponent(Object3D, { object: torusKnot });

      var itEntity = world.createEntity();
      itEntity.addComponent(HandsInstructionText);
      itEntity.addComponent(Object3D, { object: instructionText });

      window.addEventListener('resize', onWindowResize);

    }

    function onWindowResize() {

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

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

    }

    function animate() {

      renderer.setAnimationLoop(render);

    }

    function render() {
      var delta = clock.getDelta();
      var elapsedTime = clock.elapsedTime;
      world.execute(delta, elapsedTime);
      renderer.render(scene, camera);
    }

  </script>
</body>

</html>