import { ARButton } from "https://cdn.rawgit.com/mrdoob/three.js/r117/examples/jsm/webxr/ARButton.js";

import { GLTFLoader } from "https://codepen.io/ollywoggy/pen/VwePmGX.js";

​

​

let container;

let camera, scene, renderer;

let controller;

let gltfMixers = [];

​

function init() {

  container = document.createElement("div");

  document.body.appendChild(container);

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

​

    renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });

  renderer.setPixelRatio(window.devicePixelRatio);

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

  renderer.outputEncoding = THREE.sRGBEncoding;

  renderer.xr.enabled = true;

​

  // Add renderer to page

  container.appendChild(renderer.domElement);

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

​

  scene = new THREE.Scene();

​

  camera = new THREE.PerspectiveCamera(

    70,

    window.innerWidth / window.innerHeight,

    0.01,

    20

  );

​

  let light = new THREE.HemisphereLight(0xffffff, 0xbbbbbb, 1);

  light.position.set(0, 1, 0);

  scene.add(light);

    function onSelectStart() {

    let loader = new GLTFLoader();

    loader.load(

      "https://cdn.glitch.com/17a5e9f3-98e4-4ea3-8466-a4d271f324f2%2FHorse.glb?v=1592325342024",

      //replace this link with something from poly.google

      function(gltf) {

        let mesh, mixer;

        mesh = gltf.scene.children[0];

        mesh.scale.set(.001, .001, .001);

        mesh.position.set(0, 0, -0.4).applyMatrix4(controller.matrixWorld);

        mesh.rotation.copy(controller.rotation);

        scene.add(mesh);

​

        mixer = new THREE.AnimationMixer(mesh);

​

        mixer

          .clipAction(gltf.animations[0])

          .setDuration(1)

          .play();

        gltfMixers.push(mixer);

      }

    );

  }

​

  controller = renderer.xr.getController(0);

  controller.addEventListener("selectstart", onSelectStart);

  scene.add(controller);

  // begin rendering!

  renderer.setAnimationLoop(render);

}

​

function onWindowResize() {

  camera.aspect = window.innerWidth / window.innerHeight;

  camera.updateProjectionMatrix();

​

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

}

​

let prevTime = Date.now();

function render() {

  let time = Date.now();

  for (let mixer of gltfMixers) {

​

    mixer.update((time - prevTime) * 0.001);

​

  }

  prevTime = time;

  renderer.render(scene, camera);

}

​

init();

​

​