Improve renderer and 3D renderer behavior

src/renderer.js

@@ -6,7 +6,7 @@ const COLORS = {
   grid: '#1a2230',
   floor: '#3a465d',
   body: '#ea0000',
-  link: '#000000',
+  link: '#948585',
   crank: '#00ff00',
   pivot: '#ffff00',
   traceNear: '#6fd2ff',

src/renderer3d.js

@@ -4,15 +4,17 @@ import { OrbitControls } from 'https://unpkg.com/three@0.161.0/examples/jsm/cont
 const SIDE_LINKS = [
   ['A', 'B', 0xea0000],
   ['O', 'C', 0x00ff00],
-  ['A', 'D', 0x111111],
-  ['C', 'D', 0x111111],
-  ['C', 'F', 0x111111],
-  ['B', 'E', 0x111111],
-  ['C', 'E', 0x111111],
-  ['C', 'G', 0x111111],
+  ['A', 'D', 0x948585],
+  ['C', 'D', 0x948585],
+  ['C', 'F', 0x948585],
+  ['B', 'E', 0x948585],
+  ['C', 'E', 0x948585],
+  ['C', 'G', 0x948585],
 ];
 
 const JOINT_KEYS = ['A', 'B', 'O', 'C', 'D', 'E', 'F', 'G'];
+const INITIAL_CAMERA_POSITION = { x: 22.744, y: -83.162, z: 120.597 };
+const INITIAL_CAMERA_TARGET = { x: 98.958, y: -134.091, z: 0 };
 
 function toVec3(point, z = 0) {
   return new THREE.Vector3(point.x, -point.y, z);
@@ -54,12 +56,24 @@ function computePoseCenter(near, far) {
   return { x: sx / points.length, y: sy / points.length };
 }
 
+function vec3ToDebug(vec) {
+  return {
+    x: Number(vec.x.toFixed(3)),
+    y: Number(vec.y.toFixed(3)),
+    z: Number(vec.z.toFixed(3)),
+  };
+}
+
 export function create3DRenderer(mountEl) {
   const scene = new THREE.Scene();
   scene.background = new THREE.Color(0x0f1116);
 
   const camera = new THREE.PerspectiveCamera(42, 1, 0.1, 2000);
-  camera.position.set(0, 95, 170);
+  camera.position.set(
+    INITIAL_CAMERA_POSITION.x,
+    INITIAL_CAMERA_POSITION.y,
+    INITIAL_CAMERA_POSITION.z,
+  );
 
   const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: false });
   renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));
@@ -68,9 +82,26 @@ export function create3DRenderer(mountEl) {
 
   const controls = new OrbitControls(camera, renderer.domElement);
   controls.enableDamping = true;
-  controls.target.set(0, 0, 0);
+  controls.target.set(
+    INITIAL_CAMERA_TARGET.x,
+    INITIAL_CAMERA_TARGET.y,
+    INITIAL_CAMERA_TARGET.z,
+  );
   controls.update();
 
+  function logCameraDebug(reason) {
+    console.debug('[3D Camera]', {
+      reason,
+      position: vec3ToDebug(camera.position),
+      target: vec3ToDebug(controls.target),
+    });
+  }
+
+  controls.addEventListener('end', () => {
+    logCameraDebug('controls-end');
+  });
+  logCameraDebug('init');
+
   const trackedTarget = new THREE.Vector3(0, 0, 0);
   let hasTrackedTarget = false;
 
@@ -144,9 +175,18 @@ export function create3DRenderer(mountEl) {
   }
 
   function resetCamera() {
-    camera.position.set(0, 95, 170);
-    controls.target.set(0, 0, 0);
+    camera.position.set(
+      INITIAL_CAMERA_POSITION.x,
+      INITIAL_CAMERA_POSITION.y,
+      INITIAL_CAMERA_POSITION.z,
+    );
+    controls.target.set(
+      INITIAL_CAMERA_TARGET.x,
+      INITIAL_CAMERA_TARGET.y,
+      INITIAL_CAMERA_TARGET.z,
+    );
     controls.update();
+    logCameraDebug('reset');
   }
 
   function render(state) {
@@ -188,6 +228,7 @@ export function create3DRenderer(mountEl) {
         trackedTarget.copy(nextTarget);
         controls.target.copy(nextTarget);
         hasTrackedTarget = true;
+        logCameraDebug('auto-track-init');
       } else {
         const delta = nextTarget.clone().sub(trackedTarget);
         trackedTarget.copy(nextTarget);