How to use aframe - 10 common examples

import AFRAME from 'aframe';
const THREE = AFRAME.THREE;

AFRAME.registerComponent('fire-manager', {
  init: function () {
    this.el.addEventListener('vertex-cache-loaded', (evt) => {
      this.model = this.el.object3D.children[0];
      this.model.visible = false;
    });

    this.el.sceneEl.addEventListener('start-char-fire', (evt) => {
      this.el.emit('start-vertex-animation'); // vertex cache texture waits for this event to start the animation
      this.animateScale = true;
      this.model.visible = true;
    });

    this.el.sceneEl.addEventListener('stop-char-fire', (evt) => {
      this.el.emit('stop-vertex-animation');
      this.animateScale = true;
      this.model.visible = false;

this.audioLoader.load(src, function (buffer) {
      self.pool.children.forEach(function (sound) {
        sound.setBuffer(buffer);
      });
      self.loaded = true;

      // Remove this key from cache, otherwise we can't play it again
      AFRAME.THREE.Cache.remove(src);
      if (self.data.autoplay || self.mustPlay) { self.playSound(); }
      self.el.emit('sound-loaded');
    });
  }

import AFRAME from 'aframe';

AFRAME.registerComponent('web-ui-controller', {
  init: function () {
    const { sceneEl } = this.el;
    const startBtnEl = document.getElementById('startBtn');
    const mainScene = document.getElementById('mainScene');
    const introScreen = document.getElementById('introScreen');
    const enterVRButton = document.querySelector('.VRButton');
    const introText = document.getElementById('introText');
    const winningText = document.getElementById('winningText');
    const losingText = document.getElementById('losingText');
    const creditText = document.getElementById('creditText');
    const mainCamera = document.getElementById('camera');

    sceneEl.addEventListener('loaded', (event) => {
      // all game assets loaded
      introScreen.classList.remove('hidden');
    });

THREE.OrbitControls = function (object, domElement) {
  this.object = object;

  this.domElement = (domElement === undefined) ? document : domElement;

  // Set to false to disable this control
  this.enabled = true;

  // "target" sets the location of focus, where the object orbits around
  this.target = new THREE.Vector3();

  // How far you can dolly in and out ( PerspectiveCamera only )
  this.minDistance = 0;
  this.maxDistance = Infinity;

  // How far you can zoom in and out ( OrthographicCamera only )
  this.minZoom = 0;
  this.maxZoom = Infinity;

  // How far you can orbit vertically, upper and lower limits.
  // Range is 0 to Math.PI radians.
  this.minPolarAngle = 0; // radians
  this.maxPolarAngle = Math.PI; // radians

  // How far you can orbit horizontally, upper and lower limits.
  // If set, must be a sub-interval of the interval [ - Math.PI, Math.PI ].

this.update = (function () {
    const offset = new THREE.Vector3();

    // so camera.up is the orbit axis
    const quat = new THREE.Quaternion().setFromUnitVectors(object.up, new THREE.Vector3(0, 1, 0));
    const quatInverse = quat.clone().inverse();

    const lastPosition = new THREE.Vector3();
    const lastQuaternion = new THREE.Quaternion();

    return function update() {
      const position = scope.object.position;

      offset.copy(position).sub(scope.target);

      // rotate offset to "y-axis-is-up" space
      offset.applyQuaternion(quat);

      // angle from z-axis around y-axis
      spherical.setFromVector3(offset);

      if (scope.autoRotate && state === STATE.NONE) {
        rotateLeft(getAutoRotationAngle());
      }

_parseGeometry(data) {
    const geometry = new THREE.Geometry();

    const { vertices } = data;
    for (const [ x, y, z ] of vertices) {
      geometry.vertices.push(new THREE.Vector3(x, y, z));
    }

    const { indices, colors } = data;
    for (const [ materialIndex, a, b, c ] of indices) {
      const indexes = [a, b, c];
      const faceColors = colors ? indexes.map(index => {
        const color = colors[index];
        return new THREE.Color(parseInt(color, 16) & 0xFFFFFF)
          .multiplyScalar(ColorMultiplier);
      }) : null;
      geometry.faces.push(new THREE.Face3(a, b, c, null, faceColors, materialIndex));
    }

    const { textureCoords } = data;
    const uvLayer = geometry.faceVertexUvs[0] = [];
    // eslint-disable-next-line no-unused-vars

this.handles = new THREE.Object3D();
    this.pickers = new THREE.Object3D();
    this.planes = new THREE.Object3D();

    this.add(this.handles);
    this.add(this.pickers);
    this.add(this.planes);

    // // PLANES

    const planeGeometry = new THREE.PlaneBufferGeometry(50, 50, 2, 2);
    const planeMaterial = new THREE.MeshBasicMaterial({ visible: false, side: THREE.DoubleSide });

    const planes = {
      XY: new THREE.Mesh(planeGeometry, planeMaterial),
      YZ: new THREE.Mesh(planeGeometry, planeMaterial),
      XZ: new THREE.Mesh(planeGeometry, planeMaterial),
      XYZE: new THREE.Mesh(planeGeometry, planeMaterial),
    };

    this.activePlane = planes.XYZE;

    planes.YZ.rotation.set(0, Math.PI / 2, 0);
    planes.XZ.rotation.set(-Math.PI / 2, 0, 0);

    for (const i in planes) {
      planes[i].name = i;
      this.planes.add(planes[i]);
      this.planes[i] = planes[i];
    }

    // // HANDLES AND PICKERS

this.planes = new THREE.Object3D();

    this.add(this.handles);
    this.add(this.pickers);
    this.add(this.planes);

    // // PLANES

    const planeGeometry = new THREE.PlaneBufferGeometry(50, 50, 2, 2);
    const planeMaterial = new THREE.MeshBasicMaterial({ visible: false, side: THREE.DoubleSide });

    const planes = {
      XY: new THREE.Mesh(planeGeometry, planeMaterial),
      YZ: new THREE.Mesh(planeGeometry, planeMaterial),
      XZ: new THREE.Mesh(planeGeometry, planeMaterial),
      XYZE: new THREE.Mesh(planeGeometry, planeMaterial),
    };

    this.activePlane = planes.XYZE;

    planes.YZ.rotation.set(0, Math.PI / 2, 0);
    planes.XZ.rotation.set(-Math.PI / 2, 0, 0);

    for (const i in planes) {
      planes[i].name = i;
      this.planes.add(planes[i]);
      this.planes[i] = planes[i];
    }

    // // HANDLES AND PICKERS

    const setupGizmos = function (gizmoMap, parent) {

// current position in spherical coordinates
  const spherical = new THREE.Spherical();
  const sphericalDelta = new THREE.Spherical();

  let scale = 1;
  const panOffset = new THREE.Vector3();
  let zoomChanged = false;

  const rotateStart = new THREE.Vector2();
  const rotateEnd = new THREE.Vector2();
  const rotateDelta = new THREE.Vector2();

  const panStart = new THREE.Vector2();
  const panEnd = new THREE.Vector2();
  const panDelta = new THREE.Vector2();

  const dollyStart = new THREE.Vector2();
  const dollyEnd = new THREE.Vector2();
  const dollyDelta = new THREE.Vector2();

  function getAutoRotationAngle() {
    return 2 * Math.PI / 60 / 60 * scope.autoRotateSpeed;
  }

  function getZoomScale() {
    return Math.pow(0.95, scope.zoomSpeed);
  }

  function rotateLeft(angle) {
    sphericalDelta.theta -= angle;
  }

const STATE = { NONE: -1, ROTATE: 0, DOLLY: 1, PAN: 2, TOUCH_ROTATE: 3, TOUCH_DOLLY: 4, TOUCH_PAN: 5 };

  let state = STATE.NONE;

  const EPS = 0.000001;

  // current position in spherical coordinates
  const spherical = new THREE.Spherical();
  const sphericalDelta = new THREE.Spherical();

  let scale = 1;
  const panOffset = new THREE.Vector3();
  let zoomChanged = false;

  const rotateStart = new THREE.Vector2();
  const rotateEnd = new THREE.Vector2();
  const rotateDelta = new THREE.Vector2();

  const panStart = new THREE.Vector2();
  const panEnd = new THREE.Vector2();
  const panDelta = new THREE.Vector2();

  const dollyStart = new THREE.Vector2();
  const dollyEnd = new THREE.Vector2();
  const dollyDelta = new THREE.Vector2();

  function getAutoRotationAngle() {
    return 2 * Math.PI / 60 / 60 * scope.autoRotateSpeed;
  }

  function getZoomScale() {