arcanumcube/dist/demo.js

Arcanum Cube

import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
import * as ARCCUBE from "arcanumcube";
(function polyfill() {
  const relList = document.createElement("link").relList;
  if (relList && relList.supports && relList.supports("modulepreload")) return;
  for (const link of document.querySelectorAll('link[rel="modulepreload"]')) processPreload(link);
  new MutationObserver((mutations) => {
    for (const mutation of mutations) {
      if (mutation.type !== "childList") continue;
      for (const node of mutation.addedNodes) if (node.tagName === "LINK" && node.rel === "modulepreload") processPreload(node);
    }
  }).observe(document, {
    childList: true,
    subtree: true
  });
  function getFetchOpts(link) {
    const fetchOpts = {};
    if (link.integrity) fetchOpts.integrity = link.integrity;
    if (link.referrerPolicy) fetchOpts.referrerPolicy = link.referrerPolicy;
    if (link.crossOrigin === "use-credentials") fetchOpts.credentials = "include";
    else if (link.crossOrigin === "anonymous") fetchOpts.credentials = "omit";
    else fetchOpts.credentials = "same-origin";
    return fetchOpts;
  }
  function processPreload(link) {
    if (link.ep) return;
    link.ep = true;
    const fetchOpts = getFetchOpts(link);
    fetch(link.href, fetchOpts);
  }
})();
async function onLoad() {
  const viewarea = document.getElementById("viewarea");
  if (!viewarea) {
    throw new Error("Demo markup is missing required elements.");
  }
  const w = viewarea.clientWidth;
  const h = viewarea.clientHeight;
  const renderer = new THREE.WebGLRenderer({
    antialias: true,
    alpha: true
  });
  renderer.setSize(w, h);
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setClearColor("#222");
  const canvas = renderer.domElement;
  viewarea.appendChild(canvas);
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(45, w / h);
  camera.position.set(0, 0, 30);
  const controls = new OrbitControls(camera, viewarea);
  controls.autoRotate = true;
  const light = new THREE.AmbientLight("#fff", 1);
  scene.add(light);
  const sunLight = new THREE.DirectionalLight("#fff", 1);
  sunLight.position.set(-16, 80, 48);
  scene.add(sunLight);
  const spotLight = new THREE.SpotLight("#fff", 4, 64, Math.PI / 6, 0.8, 0.01);
  spotLight.position.set(12, 12, 6);
  spotLight.target.position.set(0, 0, 0);
  scene.add(spotLight);
  const arccube = new ARCCUBE.WebGLArcanumCube();
  await arccube.init();
  const arccubeGroup = arccube.getGroup();
  arccubeGroup.position.set(0, 0, 0);
  scene.add(arccubeGroup);
  renderer.setAnimationLoop(() => {
    arccube.update();
    controls.update();
    renderer.render(scene, camera);
  });
  arccube.scramble(60, 12e3);
}
window.addEventListener("load", onLoad);