3D Homepage Development Log 05: Approach an Object Without Losing the Room
Turntable, monitor, and calligraphy focus once pulled back and drifted off target. One timeline, projection checks, and native music cards made the motion stable.
Early focus motion for the turntable, monitor, and calligraphy bird pulled backward before moving forward, drifted sideways, and applied another correction near the end. Each easing segment looked smooth in isolation, but together they made the camera lose its subject and sometimes pushed the room almost entirely outside the view.
One Progress Value Owns Every Channel
The stable path uses one endpoint-smooth half-cosine progress value for camera position, orientation, and gaze target. Velocity settles to zero at both ends, without an independent decorative arc in the middle. Each activation also samples the real Box3 through the current camera projection and proves that the subject remains inside a viewport-safe envelope throughout focus and return. If that proof fails, framing stays conservative.
The turntable finishes farther away, front-aligned, and only lightly top-down. Imported platter, record, tonearm, and stylus meshes have unsafe remote local origins, so focus moves the camera and leaves those leaf meshes alone. That removed the failure where a lid or component appeared to fly away during interaction.
Ten Listening Records Belong to DOM
The recent-track cards are not CanvasTextures or WebGL planes. They are native DOM links with real text, keyboard focus, and direct Last.fm targets. Numbers 01–10 appear in ring order. All cards share a very small pointer-responsive plane tilt, while only the directly addressed card rises slightly; no information depends on hover.
Three.js still owns one renderer and the camera composition. DOM owns readable text, links, and accessibility. The camera makes the listening system the narrative centre; the browser handles the content it already renders best.
