Center & Fit

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://unpkg.com/three@0.143/build/three.module.js",
          "BufferGeometryUtils": "https://unpkg.com/three@0.143/examples/jsm/utils/BufferGeometryUtils.js",
          "ArcballControls": "https://unpkg.com/three@0.143/examples/jsm/controls/ArcballControls.js"
        }
      }
    </script>
	</head>
	<body>
    <div id="container">
    </div>
	</body>
</html>

CSS

body
{
  margin: 0;
}
canvas
{
  width: 100%;
  height: 100%
}

JavaScript

import * as THREE from "three";
import * as BufferGeometryUtils from "BufferGeometryUtils";
import {ArcballControls} from "ArcballControls";

var container = document.getElementById("container");
var renderer, scene, camera, light, amesh, controls;
var width = 2, height = 2, depth = 2, posidx, posvec = new THREE.Vector3(), center = new THREE.Vector3();
var speedx = 0.01, speedy = 0.01, speedz = 0.01, paused = true, reqid, camup;
var minx, maxx, miny, maxy, minz, maxz, mincamx, maxcamx, mincamy, maxcamy, mincamz, maxcamz;
var centerx, centery, centerz, centercamx, centercamy, centercamz, ratioy, planarorigindistance;
var camsizex = 2, camsizey = 2, camsizez = 2;

function setbounds()
{
  minx = Infinity; maxx = -Infinity; miny = Infinity; maxy = -Infinity; minz = Infinity; maxz = -Infinity;
  mincamx = Infinity; maxcamx = -Infinity; mincamy = Infinity; maxcamy = -Infinity; mincamz = Infinity; maxcamz = -Infinity;
  centerx = 0; centery = 0; centerz = 0; centercamx = 0; centercamy = 0; centercamz = 0;
  center.set(0, 0, 0); ratioy = 0; planarorigindistance = 0;
};

function logbounds(action)
{
  console.log((action + " object").toUpperCase());
  console.log("--------------------------------");
  console.log("MinX, MaxX, MinY, MaxY, MinZ, MaxZ (world space):");
  console.log(minx, maxx, miny, maxy, minz, maxz);
  console.log("MinX, MaxX, MinY, MaxY, MinZ, MaxZ (screen space):");
  console.log(mincamx, maxcamx, mincamy, maxcamy, mincamz, maxcamz);
  console.log("CenterX, CenterY, CenterZ (world space):");
  console.log(centerx, centery, centerz);
  console.log("CenterX, CenterY, CenterZ (screen space):");
  console.log(centercamx, centercamy, centercamz);
  console.log("Center point that the camera looks at:");
  console.log(center);
  console.log("Projected (current) to unprojected (desired) vertical Y ratio:");
  console.log(ratioy);
  console.log("Camera distance to the origin plane orthogonal to its direction:");
  console.log(planarorigindistance);
};

function...