From 4ccfaf7b92b2b3a3e3d1a2dfb0537e1c1ddd170b Mon Sep 17 00:00:00 2001
From: oimwiodev <oimwiodev@outlook.com>
Date: Sat, 16 May 2026 18:49:21 +0100
Subject: [PATCH] Refine 3D showcase framing

---
 components/GlassesModelSection.tsx | 25 ++++++++++++-------------
 1 file changed, 12 insertions(+), 13 deletions(-)

diff --git a/components/GlassesModelSection.tsx b/components/GlassesModelSection.tsx
index f951652..d1b3f6f 100644
--- a/components/GlassesModelSection.tsx
+++ b/components/GlassesModelSection.tsx
@@ -19,7 +19,7 @@ export default function GlassesModelSection({ t }: { t: Messages }) {
     let disposed = false;
     const scene = new THREE.Scene();
     const camera = new THREE.PerspectiveCamera(34, 1, 0.1, 100);
-    camera.position.set(0, 0.2, 7.2);
+    camera.position.set(0, 0.15, 7.9);
 
     const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true, powerPreference: "high-performance" });
     renderer.setClearColor(0x000000, 0);
@@ -28,6 +28,7 @@ export default function GlassesModelSection({ t }: { t: Messages }) {
     renderer.toneMappingExposure = 1.08;
 
     const group = createGlassesModel();
+    group.position.y = -0.34;
     scene.add(group);
     scene.add(new THREE.HemisphereLight(0xffffff, 0xaeb9c6, 1.8));
 
@@ -98,22 +99,20 @@ export default function GlassesModelSection({ t }: { t: Messages }) {
   }, []);
 
   return (
-    <section id="model" className="relative px-4 py-20 sm:px-6 lg:py-28">
-      <div className="mx-auto max-w-7xl">
-        <div className="relative z-10 max-w-3xl">
+    <section id="model" className="relative overflow-hidden py-20 lg:py-28">
+      <div ref={wrapRef} className="relative left-1/2 min-h-[42rem] w-screen -translate-x-1/2 overflow-hidden lg:min-h-[46rem]" data-testid="glasses-3d-wrap">
+        <canvas ref={canvasRef} className="absolute inset-0 h-full w-full touch-pan-y" aria-label={t.model.canvasLabel} data-testid="glasses-3d-canvas" />
+        <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_52%_46%,rgba(255,255,255,0.58),transparent_34%),radial-gradient(circle_at_52%_68%,rgba(49,95,143,0.15),transparent_30%)]" />
+
+        <div className="relative z-10 mx-auto max-w-7xl px-4 sm:px-6">
           <p className="mb-4 text-xs font-semibold uppercase tracking-[0.28em] text-optical/75">{t.model.eyebrow}</p>
           <h2 className="text-4xl font-semibold tracking-[-0.055em] text-ink sm:text-6xl">{t.model.title}</h2>
           <p className="mt-5 max-w-2xl text-base leading-8 text-ink/62 sm:text-lg">{t.model.body}</p>
         </div>
 
-        <div ref={wrapRef} className="relative left-1/2 mt-8 min-h-[32rem] w-screen -translate-x-1/2 overflow-hidden lg:min-h-[38rem]" data-testid="glasses-3d-wrap">
-          <canvas ref={canvasRef} className="absolute inset-0 h-full w-full touch-pan-y" aria-label={t.model.canvasLabel} data-testid="glasses-3d-canvas" />
-          <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_50%_45%,rgba(255,255,255,0.58),transparent_34%),radial-gradient(circle_at_50%_72%,rgba(49,95,143,0.15),transparent_28%)]" />
-
-          <Annotation className="left-4 top-8 sm:left-10 lg:left-16 lg:top-20" align="left" label={t.model.annotations[0].label} body={t.model.annotations[0].body} />
-          <Annotation className="right-4 top-36 sm:right-10 lg:right-20 lg:top-24" align="right" label={t.model.annotations[1].label} body={t.model.annotations[1].body} />
-          <Annotation className="bottom-8 left-6 sm:left-16 lg:bottom-16 lg:left-[42%]" align="left" label={t.model.annotations[2].label} body={t.model.annotations[2].body} />
-        </div>
+        <Annotation className="left-4 top-[23rem] sm:left-10 lg:left-16 lg:top-[24rem]" align="left" label={t.model.annotations[0].label} body={t.model.annotations[0].body} />
+        <Annotation className="right-4 top-[28rem] sm:right-10 lg:right-20 lg:top-[24rem]" align="right" label={t.model.annotations[1].label} body={t.model.annotations[1].body} />
+        <Annotation className="bottom-8 left-6 sm:left-16 lg:bottom-16 lg:left-[42%]" align="left" label={t.model.annotations[2].label} body={t.model.annotations[2].body} />
       </div>
     </section>
   );
@@ -141,7 +140,7 @@ function Annotation({ label, body, align, className }: { label: string; body: st
 
 function createGlassesModel() {
   const group = new THREE.Group();
-  group.scale.setScalar(1.08);
+  group.scale.setScalar(0.9);
 
   const frameMaterial = new THREE.MeshPhysicalMaterial({
     color: 0x161a20,