electron-rare/electron-rare.github.io
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: scale=1 with camera/lights/fog adjusted for mm units

Browse Source 
- PCB scale: 1 (native mm from FreeCAD)
- Camera stops: all positions scaled to mm (0.15m overview, 0.06m close-ups)
- Fog: 0.1-0.4 range (was 12-40)
- Lights: positions scaled to mm, distance 0.15-0.2
- Mouse parallax: 0.015 (was 1.5)
- CameraLight follow offset: 0.01 (was 1)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Clément SAILLANT
2026-03-30 15:43:43 +00:00
parent 78d5602ca6
commit 0e820aef48
1 changed files with 20 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/WebGLBackground.tsx
+20 -19
View File
@@ -37,7 +37,7 @@ function RealPCB() {
return (
<primitive
object={glb.scene.clone()}
scale={15}
scale={1}
rotation={[-Math.PI / 2, 0, 0]}
position={[0, 0, 0]}
/>
@@ -375,24 +375,25 @@ function CameraLight() {
useFrame(() => {
if (!lightRef.current) return;
lightRef.current.position.copy(camera.position);
lightRef.current.position.y += 1;
lightRef.current.position.y += 0.01;
});
return (
<pointLight ref={lightRef} intensity={0.6} color="#ffffff" distance={15} decay={1.5} />
<pointLight ref={lightRef} intensity={0.6} color="#ffffff" distance={0.15} decay={1.5} />
);
}
/* ---------- Camera — orbits around PCB, zooms on scroll ---------- */
// PCB at scale=1 is in mm (~80mm board). Camera distances in mm too.
const CAMERA_STOPS = [
{ scroll: 0.00, pos: [0, 15, 12], look: [0, 0, 0] }, // Overview — full board
{ scroll: 0.12, pos: [7, 4, -2], look: [5, 0, -2] }, // MCU zone
{ scroll: 0.28, pos: [-6, 4, -1], look: [-5, 0, -1] }, // Analog zone
{ scroll: 0.42, pos: [5, 4, 5], look: [4, 0, 4] }, // Power zone
{ scroll: 0.56, pos: [-6, 4, 5], look: [-5, 0, 4] }, // COM zone
{ scroll: 0.70, pos: [0, 5, -6], look: [0, 0, -4] }, // Missions zone
{ scroll: 0.85, pos: [0, 3, 2], look: [0, 0, 1] }, // Contact zone (close)
{ scroll: 1.00, pos: [0, 18, 10], look: [0, 0, 0] }, // Pull back overview
{ scroll: 0.00, pos: [0, 0.15, 0.12], look: [0, 0, 0] }, // Overview — full board
{ scroll: 0.12, pos: [0.04, 0.06, -0.01], look: [0.03, 0, -0.02] }, // MCU zone (close)
{ scroll: 0.28, pos: [-0.03, 0.06, 0], look: [-0.03, 0, -0.01] }, // Analog zone
{ scroll: 0.42, pos: [0.03, 0.06, 0.03], look: [0.02, 0, 0.03] }, // Power zone
{ scroll: 0.56, pos: [-0.03, 0.06, 0.03], look: [-0.03, 0, 0.03] }, // Formation zone
{ scroll: 0.70, pos: [0, 0.07, -0.04], look: [0, 0, -0.03] }, // Missions zone
{ scroll: 0.85, pos: [0, 0.04, 0.01], look: [0, 0, 0.005] }, // Contact zone (close)
{ scroll: 1.00, pos: [0, 0.18, 0.1], look: [0, 0, 0] }, // Pull back overview
];
function OrbitCamera() {
@@ -415,10 +416,10 @@ function OrbitCamera() {
const t = range > 0 ? (s - a.scroll) / range : 0;
const ease = t * t * (3 - 2 * t);
const tx = a.pos[0] + (b.pos[0] - a.pos[0]) * ease + pointer.x * 1.5;
const ty = a.pos[1] + (b.pos[1] - a.pos[1]) * ease + pointer.y * 0.5;
const tx = a.pos[0] + (b.pos[0] - a.pos[0]) * ease + pointer.x * 0.015;
const ty = a.pos[1] + (b.pos[1] - a.pos[1]) * ease + pointer.y * 0.005;
const tz = a.pos[2] + (b.pos[2] - a.pos[2]) * ease;
const lx = a.look[0] + (b.look[0] - a.look[0]) * ease + pointer.x * 0.3;
const lx = a.look[0] + (b.look[0] - a.look[0]) * ease + pointer.x * 0.003;
const ly = a.look[1] + (b.look[1] - a.look[1]) * ease;
const lz = a.look[2] + (b.look[2] - a.look[2]) * ease;
@@ -477,18 +478,18 @@ export default function WebGLBackground() {
aria-hidden="true"
>
<Canvas
camera={{ position: [0, 15, 12], fov: 50 }}
camera={{ position: [0, 0.15, 0.12], fov: 50 }}
dpr={[1, 1.5]}
gl={{ antialias: true, alpha: true, powerPreference: 'high-performance' }}
style={{ pointerEvents: 'auto' }}
>
<color attach="background" args={['#060a06']} />
<fog attach="fog" args={['#060a06', 12, 40]} />
<fog attach="fog" args={['#060a06', 0.1, 0.4]} />
<ambientLight intensity={0.25} />
<directionalLight position={[5, 10, 5]} intensity={0.7} color="#ffffff" />
<directionalLight position={[-5, 8, -5]} intensity={0.3} color="#5bd1d8" />
<pointLight position={[0, 5, 0]} intensity={0.4} color="#f1c27a" distance={20} />
<directionalLight position={[0.05, 0.1, 0.05]} intensity={0.7} color="#ffffff" />
<directionalLight position={[-0.05, 0.08, -0.05]} intensity={0.3} color="#5bd1d8" />
<pointLight position={[0, 0.05, 0]} intensity={0.4} color="#f1c27a" distance={0.2} />
<CameraLight />
<OrbitCamera />