How to use the aframe.THREE function in aframe

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';
const THREE = AFRAME.THREE;

//keeps track of all pendulums, and colors them all when in sync
AFRAME.registerSystem('pendulum', {
  schema: {
  },
  init: function () {
    this.pendulums = [];
    this.totalDist = 10;
  },
  registerPendulum: function(pendulum) {
    this.pendulums.push(pendulum);
  },
  getSynchStatus: function() {
    return (this.totalDist < 1)? true : false;
  },
  tick: function (time, timeDelta) {

import SkyFrag from '../shaders/SkyFrag.glsl';
import SkyVert from '../shaders/SkyVert.glsl';

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

AFRAME.registerComponent('sky', {
  schema: {
  },

  init: function () {
    const system = document.querySelector('a-scene').systems['sunSystem'];
    const { widthSegments, heightSegments } = this.data;

    var sphereGeo = new THREE.IcosahedronGeometry(
      system.data.skyRadius,
      3 //effectively makes a sphere
    );

    var noiseTex = new THREE.TextureLoader().load('assets/star.png', (tex) => {
      tex.wrapS = tex.wrapT = THREE.RepeatWrapping;

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

const PENDULUM_POS = new THREE.Vector3(34, -1, -19);

AFRAME.registerComponent('mover', {
  schema: {
    speed: {
      type: 'int',
      default: 65
    }
  },

  init: function () {
    this.pressed = false;
    this.lastAxis = new THREE.Vector2();
    this.vrMovingSpeed = 0.0039;

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

AFRAME.registerComponent('collider', {
  schema: {
    camera: {
      type: 'boolean',
      default: 'false'
    }
  },

  init: function () {
    this.raycaster = new THREE.Raycaster();
    if(this.data.camera){
      this.raycastingEl = document.querySelector('#camera');
    } else {
      this.raycastingEl = this.el;
    }

import AFRAME from 'aframe';
const THREE = AFRAME.THREE;
import { setQuaternionFromDirection } from '../libs/Utils';

import SunCalibratedMaterial from '../shaders/SunCalibratedMaterial';
import CharacterStateMachine from '../components/CharacterStateMachine';

//CONSTANTS
const CHARACTER_HEIGHT = -1;
const DEHYDRATED_BODY_POS = new THREE.Vector3(5.8, CHARACTER_HEIGHT, 15.8);
const PYRAMID_ENTRANCE_POS = new THREE.Vector3(32.25, CHARACTER_HEIGHT, 54.42);
const PENDULUM_POS = new THREE.Vector3(34, CHARACTER_HEIGHT, -19);

const UP = new THREE.Vector3(0,1,0);

AFRAME.registerComponent('character-mover', {
  schema: {
  },

import AFRAME from 'aframe';
import SunCalibratedMaterial from '../shaders/SunCalibratedMaterial';
const THREE = AFRAME.THREE;

AFRAME.registerComponent('default-material', {
  schema: {
    color: {
      type: 'color'
    },
    depthWrite: {
      type: 'boolean',
      default: 'true'
    }
  },
  init: function () {
    const mesh = this.el.object3D.children[0];
    mesh.material = new THREE.SunCalibratedMaterial();
    mesh.material.color = new THREE.Color(this.data.color);
  },

import IntroFrag from '../shaders/IntroFrag.glsl';
import IntroVert from '../shaders/IntroVert.glsl';

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

AFRAME.registerComponent('intro', {
  init: function () {
    const planeMat = new THREE.ShaderMaterial({
      uniforms: {
        time: { value: 0 },
        color1: { value: new THREE.Color("#000319") },
      },
      vertexShader: IntroVert, //lol
      fragmentShader: IntroFrag,
    });

    const planeGeo = new THREE.PlaneGeometry(20,20);
    const introPlane = new THREE.Mesh(planeGeo, planeMat);
    this.el.object3D.add(introPlane)
    this.introPlane = introPlane;

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

import LaserFrag from '../shaders/LaserFrag.glsl';
import LaserVert from '../shaders/LaserVert.glsl';

import { setQuaternionFromDirection } from '../libs/Utils';

AFRAME.registerSystem('raycasterSystem', {
  schema: {
  },

  init: function () {
    this.raycaster = new THREE.Raycaster();
    this.mouse = new THREE.Vector2();

    this.triggerDown = false;
    this.mouseDown = false;

import AFRAME from 'aframe';

import SunCalibratedMaterial from '../shaders/SunCalibratedMaterial';
import EyeFrag from '../shaders/EyeFrag.glsl';
import EyeVert from '../shaders/EyeVert.glsl';

const THREE = AFRAME.THREE;

AFRAME.registerComponent('set-character-material', {
  schema: {
    color: {
      type: 'color',
      default: null
    }
  },
  init: function () {

    const system = document.querySelector('a-scene').systems['sunSystem'];

    this.eyeMaterial = new THREE.ShaderMaterial({
      uniforms: {
        time: { value: 0 },
      },