Controls

by YinCognito

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="importmap">
      {
        "imports":
        {
          "three": "https://threejs.org/build/three.module.js",
          "ArcballControls": "https://threejs.org/examples/jsm/controls/ArcballControls.js",
          "DragControls": "https://threejs.org/examples/jsm/controls/DragControls.js",
          "FirstPersonControls": "https://threejs.org/examples/jsm/controls/FirstPersonControls.js",
          "FlyControls": "https://threejs.org/examples/jsm/controls/FlyControls.js",
          "OrbitControls": "https://threejs.org/examples/jsm/controls/OrbitControls.js",
          "PointerLockControls": "https://threejs.org/examples/jsm/controls/PointerLockControls.js",
          "TrackballControls": "https://threejs.org/examples/jsm/controls/TrackballControls.js",
          "TransformControls": "https://threejs.org/examples/jsm/controls/TransformControls.js"
        }
      }
    </script>
  </head>
  <body>
    <div id="container">
    </div>
    <div id="leftpanel" class="left panel">
      <label id="itemlabel" class="label">Label</label>
    </div>
    <div id="rightpanel" class="right panel">
      <label id="itemvalue" class="value">Value</label>
    </div>
  </body>
</html>

CSS

body
{
  margin: 0;
}
canvas
{
  width: 100%;
  height: 100%
}
.panel
{
  position: absolute;
  border: 2px outset white;
  width: 100px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.label, .value
{
  color: white;
}
.left
{
  left: 0px;
}
.right
{
  right: 0px;
}

JavaScript

import * as THREE from "three";
import {ArcballControls} from "ArcballControls";
import {DragControls} from "DragControls";
import {FirstPersonControls} from "FirstPersonControls";
import {FlyControls} from "FlyControls";
import {OrbitControls} from "OrbitControls";
import {PointerLockControls} from "PointerLockControls";
import {TrackballControls} from "TrackballControls";
import {TransformControls} from "TransformControls";

var container = document.getElementById("container"), wglcanvas = document.getElementById("wglcanvas"),
    label = document.getElementById("itemlabel"), value = document.getElementById("itemvalue");
var renderer, scene, camera, light, amesh, controls, lock;
var speedx = 0, speedy = 1, speedz = 0, key = 0, paused = true, reqid, ctrlid, cup,
    clock = new THREE.Clock(), delta = 0, aclock = new THREE.Clock(), adelta = 0;
var radius = 1, eye = 6.62 * radius, fov = 17, near = 0.000001, far = 720000 * radius;
var v = {controls: 1}, maxcontrols = 10,
    vtext = {controls: ["None", "Arcball", "Drag", "FirstPerson", "Fly", "Orbit", "PointerLock", "Trackball", "Transform", "Undefined"]};
var ctrlcamera = {position: new THREE.Vector3(), rotation: new THREE.Euler(), quaternion: new THREE.Quaternion(),
                  matrix: new THREE.Matrix4(), target: new THREE.Vector3()};

function zapitem(k)
{
  try {k.traverse(function(o)
  {
    try {o.geometry.dispose();} catch {};
    try {o.material.dispose();} catch {};
    try {for (var m of o.material) {m.dispose();};} catch {};
  });} catch {};
  try {k.removeFromParent();} catch {};
  try {k.detach();} catch {};
  try {k.dispose();} catch {};
  return undefined;
};

function atPointerDown(e)
{
  switch (v.controls)
  {
    case 4:
      function fly() {ctrlid = requestAnimationFrame(fly); adelta = aclock.getDelta(); controls.update(adelta); render();};
      adelta = aclock.getDelta();
      fly();
    break;
  };
};

function atPointerUp(e)
{
  switch (v.controls)
  {
    case 4:
     ...