@antv/g-webgpu-raytracer/es/interaction/index.js

A simple ray tracer implemented with WebGPU

import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import Hammer from 'hammerjs';
export var InteractionSystem = /*#__PURE__*/function () {
  function InteractionSystem(canvas, camera, onCameraChanged) {
    var _this = this;

    _classCallCheck(this, InteractionSystem);

    this.canvas = canvas;
    this.camera = camera;
    this.onCameraChanged = onCameraChanged;
    this.isMoving = false;
    this.lastX = -1;
    this.lastY = -1;
    this.deltaX = 0;
    this.deltaY = 0;
    this.deltaZ = 0;
    this.hammertime = void 0;

    this.onPanend = function (e) {
      _this.isMoving = false;
    };

    this.onPanstart = function (e) {
      _this.lastX = e.center.x;
      _this.lastY = e.center.y;
      _this.isMoving = true;
      _this.deltaZ = 0;
    };

    this.onPanmove = function (e) {
      if (_this.isMoving) {
        _this.deltaX = e.center.x - _this.lastX;
        _this.deltaY = e.center.y - _this.lastY;
        _this.lastX = e.center.x;
        _this.lastY = e.center.y;

        _this.onChangeCamera({
          deltaX: _this.deltaX,
          // deltaY: this.deltaY,
          deltaY: 0,
          deltaZ: _this.deltaZ
        });
      }
    };

    this.onMousewheel = function (e) {
      _this.deltaZ = e.deltaY;

      _this.onChangeCamera({
        deltaX: _this.deltaX,
        deltaY: _this.deltaY,
        deltaZ: _this.deltaZ
      });
    };

    this.onPinch = function (e) {
      _this.deltaZ = (1 - e.scale) * 10;
    };

    this.onChangeCamera = function (data) {
      var deltaX = data.deltaX,
          deltaY = data.deltaY,
          deltaZ = data.deltaZ;

      _this.camera.rotate(deltaX, deltaY, 0);

      _this.camera.dolly(deltaZ);

      _this.onCameraChanged();
    };
  }

  _createClass(InteractionSystem, [{
    key: "initialize",
    value: function initialize() {
      var hammertime = new Hammer(this.canvas);
      hammertime.get('pan').set({
        direction: Hammer.DIRECTION_ALL
      });
      hammertime.get('pinch').set({
        enable: true
      });
      hammertime.on('panstart', this.onPanstart);
      hammertime.on('panmove', this.onPanmove);
      hammertime.on('panend', this.onPanend);
      hammertime.on('pinch', this.onPinch);
      this.hammertime = hammertime;
      this.canvas.addEventListener('wheel', this.onMousewheel);
    }
  }, {
    key: "tearDown",
    value: function tearDown() {
      this.hammertime.off('panstart', this.onPanstart);
      this.hammertime.off('panmove', this.onPanmove);
      this.hammertime.off('panend', this.onPanend);
      this.hammertime.off('pinch', this.onPinch);
      this.canvas.removeEventListener('wheel', this.onMousewheel);
    }
  }]);

  return InteractionSystem;
}();
InteractionSystem.UP_EVENT = 'mouseup';
InteractionSystem.MOVE_EVENT = 'mousemove';
InteractionSystem.DOWN_EVENT = 'mousedown';
InteractionSystem.OUT_EVENT = 'mouseout';
InteractionSystem.WHEEL_EVENT = 'mousewheel';
//# sourceMappingURL=index.js.map