feat(site): rework 19 marketing showcases for composition diversity
Some checks are pending
ci / build (push) Waiting to run
Some checks are pending
ci / build (push) Waiting to run
Measured convergence before: split hero 13/19, top-bar nav 19/19, one-line notice footer 14/19, body Pretendard 17/21, 10 similarity pairs above 0.78. Each showcase got a pre-assigned hero family, nav form, footer form, type pair, background, accent hue, radius, motion grammar and material from outputs/rework-2026-10-06/plan.md; direction cards and the chosen reason are recorded in every design.md. After: 0 similarity warnings, 19 distinct display faces, 7 hero families, 5 nav forms, 5 footer forms, no scroll reveals, 5 showcases with SVG filter materials. Example contact values replace bracket placeholders under the existing fictional-brand notices. Thumbnails, OG images, card copy and three e2e assertions updated; dead CSS in dure-enrollment and hannam-jari removed; similarity.mjs learns the new font families.
This commit is contained in:
parent
88c11682b1
commit
8e3cdb0d3b
296 changed files with 19131 additions and 17538 deletions
|
|
@ -1,229 +1,214 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Lumina Optics · Interactive Optical Study</title>
|
||||
<title>Lumina Optics · L-85 85mm f/1.8 렌즈</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="An interactive optical study of refraction and dispersion. The lens profile, curves, and specifications are illustrative."
|
||||
/>
|
||||
<meta property="og:title" content="Lumina Optics · Interactive Optical Study" />
|
||||
<meta
|
||||
property="og:description"
|
||||
content="An illustrative light path you can inspect and adjust."
|
||||
content="가상 광학 브랜드 Lumina Optics의 85mm f/1.8 렌즈 L-85 소개 페이지. 프리즘 시험대에서 굴절률과 분산을 바꿔 보고, 렌즈 구성·MTF·사양을 확인할 수 있습니다."
|
||||
/>
|
||||
<meta property="og:title" content="Lumina Optics · L-85 85mm f/1.8 렌즈" />
|
||||
<meta property="og:description" content="85mm f/1.8 렌즈 L-85의 굴절 시험대, 렌즈 구성, MTF 곡선과 사양." />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta name="theme-color" content="#101214" />
|
||||
<meta property="og:image" content="./og.png" />
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="theme-color" content="#a6a9a9" />
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Sans+KR:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap"
|
||||
/>
|
||||
<link rel="stylesheet" href="./styles/main.css?v=20260912all" />
|
||||
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/sun-typeface/SUIT@2/fonts/variable/woff2/SUIT-Variable.css" />
|
||||
<link rel="stylesheet" href="./styles/main.css?v=20261002" />
|
||||
<link
|
||||
rel="icon"
|
||||
href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%23101214'/%3E%3Cpath d='M6 16h8m8 0h4M14 16l10-7v14z' fill='none' stroke='%23BFE8EE' stroke-width='1.4'/%3E%3C/svg%3E"
|
||||
href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='16' fill='%23A6A9A9'/%3E%3Ccircle cx='16' cy='16' r='9' fill='none' stroke='%230D0F10' stroke-width='2.4'/%3E%3Cpath d='M2 16h28' stroke='%23D4231A' stroke-width='2'/%3E%3C/svg%3E"
|
||||
/>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<a class="skip" href="#main">Skip to main content</a>
|
||||
<a class="skip" href="#main">본문으로 건너뛰기</a>
|
||||
|
||||
<header class="site-head">
|
||||
<div class="wrap head-inner">
|
||||
<a class="wordmark" href="#main">lumina<span class="wordmark-dot">·</span>optics</a>
|
||||
<nav class="nav" aria-label="Sections">
|
||||
<a href="#bench">Bench</a>
|
||||
<a href="#anatomy">Anatomy</a>
|
||||
<a class="wordmark" href="#main"><span class="wordmark-lens" aria-hidden="true"></span>Lumina Optics</a>
|
||||
<nav class="nav" aria-label="섹션">
|
||||
<a href="#bench">시험대</a>
|
||||
<a href="#anatomy">단면</a>
|
||||
<a href="#mtf">MTF</a>
|
||||
<a href="#contact">Contact</a>
|
||||
<a href="#spec">사양</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<div class="scope-note">
|
||||
<p class="wrap">가상 광학 브랜드의 쇼케이스입니다. 렌즈 L-85의 구성·곡선·사양은 설명을 위해 만든 값이며 실측이 아닙니다.</p>
|
||||
</div>
|
||||
|
||||
<main id="main">
|
||||
<section id="bench" class="hero" aria-labelledby="hero-h">
|
||||
<div class="wrap hero-summary">
|
||||
<div class="hero-text">
|
||||
<p class="hero-kicker reveal">Interactive optical study</p>
|
||||
<h1 id="hero-h" class="reveal" style="--delay: 60ms">
|
||||
One beam,<br />bent honestly
|
||||
</h1>
|
||||
<p class="lead reveal" style="--delay: 120ms">
|
||||
Move the prism to compare how refractive index and dispersion
|
||||
redirect one beam. This view illustrates an optical model; it is
|
||||
not a measured photograph, a product specification, or a lab result.
|
||||
</p>
|
||||
</div>
|
||||
<div class="wrap hero-grid">
|
||||
<p class="hero-kicker">L-85 85mm f/1.8 · 굴절 시험대</p>
|
||||
<h1 id="hero-h">굴절률과 분산을<br />직접 바꿔 보세요</h1>
|
||||
<p class="lead">
|
||||
굴절률을 올리면 빛이 더 꺾이고, 분산을 키우면 색 사이가 더 벌어집니다.
|
||||
프리즘을 끌어 돌리거나 아래 슬라이더 두 개로 값을 바꿔 보세요.
|
||||
</p>
|
||||
</div>
|
||||
<div class="wrap bench-layout">
|
||||
<div class="bench-shell">
|
||||
<div class="bench-stage reveal">
|
||||
<canvas
|
||||
id="gl"
|
||||
aria-label="Illustrative interactive prism: a white beam enters from the left and exits as a spectrum. Drag to rotate the concept model."
|
||||
></canvas>
|
||||
<img
|
||||
class="bench-fallback"
|
||||
src="./assets/prism-bench.webp"
|
||||
alt="Illustrative glass prism on a dark optical surface splitting one collimated beam into a spectrum"
|
||||
width="1440"
|
||||
height="810"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="wrap bench">
|
||||
<div class="bench-stage">
|
||||
<canvas
|
||||
id="gl"
|
||||
aria-label="프리즘 시험대: 왼쪽에서 들어온 흰 빛이 프리즘을 지나 스펙트럼으로 갈라집니다. 끌어서 프리즘을 돌릴 수 있습니다."
|
||||
></canvas>
|
||||
<img
|
||||
class="bench-fallback"
|
||||
src="./assets/prism-bench.webp"
|
||||
alt="어두운 시험대 위 유리 프리즘이 평행광 한 줄을 스펙트럼으로 나누는 참고 이미지"
|
||||
width="1440"
|
||||
height="810"
|
||||
/>
|
||||
<p class="stage-label" aria-hidden="true"><span>입사광 632.8 nm</span><span>평행광</span></p>
|
||||
</div>
|
||||
<aside class="bench-controls">
|
||||
<div class="bench-ledger" role="group" aria-label="Bench configuration">
|
||||
<dl>
|
||||
<div>
|
||||
<dt>illustrative beam reference</dt>
|
||||
<dd>632.8 nm · collimated</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>variable</dt>
|
||||
<dd>index + dispersion</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>view</dt>
|
||||
<dd>interactive light study · static reference</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
<div class="hud reveal" style="--delay: 160ms">
|
||||
<div class="hud-row">
|
||||
<div class="hud-row-head"><label for="ior">Index of refraction</label><output id="ior-out" for="ior">1.52</output></div>
|
||||
<div class="rail" role="group" aria-label="시험대 조작">
|
||||
<div class="control">
|
||||
<div class="control-head"><label for="ior">굴절률 n</label><output id="ior-out" for="ior">1.52</output></div>
|
||||
<input type="range" id="ior" min="1.45" max="2.20" step="0.01" value="1.52" />
|
||||
<p class="control-hint">크라운 유리 1.52 · 고굴절 플린트 1.9 이상</p>
|
||||
</div>
|
||||
<div class="hud-row">
|
||||
<div class="hud-row-head"><label for="disp">Dispersion (Abbe ↓)</label><output id="disp-out" for="disp">0.18</output></div>
|
||||
<div class="control">
|
||||
<div class="control-head"><label for="disp">분산</label><output id="disp-out" for="disp">0.18</output></div>
|
||||
<input type="range" id="disp" min="0" max="0.6" step="0.01" value="0.18" />
|
||||
<p class="control-hint">값이 클수록 아베수가 낮은 유리</p>
|
||||
</div>
|
||||
<p class="hud-note" id="hud-note">Drag the prism to rotate · illustrative light path at a 632.8 nm reference</p>
|
||||
</div>
|
||||
</aside>
|
||||
<p class="hud-note" id="hud-note">프리즘을 좌우로 끌면 입사각이 바뀝니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="anatomy" class="section" aria-labelledby="anatomy-h">
|
||||
<div class="wrap two">
|
||||
<figure class="two-photo reveal">
|
||||
<img
|
||||
src="./assets/lens-section.webp"
|
||||
alt="Illustrative lens cutaway: a stack of glass elements in a metal barrel, edge-lit to show refraction paths"
|
||||
width="900"
|
||||
height="1200"
|
||||
loading="lazy"
|
||||
/>
|
||||
<figcaption>L-85 concept cutaway · illustrative element layout</figcaption>
|
||||
<div class="wrap anatomy-grid">
|
||||
<figure class="lens-figure">
|
||||
<div class="lens-disc">
|
||||
<img
|
||||
src="./assets/lens-section.webp"
|
||||
alt="금속 경통 안에 유리 요소가 층층이 쌓인 렌즈 단면, 가장자리 조명으로 굴절 경로가 드러난 참고 이미지"
|
||||
width="900"
|
||||
height="1200"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
<figcaption>L-85 렌즈 단면 · 6군 7매</figcaption>
|
||||
</figure>
|
||||
<div class="two-text">
|
||||
<h2 id="anatomy-h">Glass sets<br />the light path</h2>
|
||||
<div class="anatomy-text">
|
||||
<h2 id="anatomy-h">6군 7매 구성과<br />렌즈별 역할</h2>
|
||||
<p>
|
||||
A lens is a chain of refractions: every surface bends the path
|
||||
before an image is made. The L-85 concept uses low-dispersion
|
||||
elements to explain why a design can keep colours from spreading
|
||||
across the frame.
|
||||
</p>
|
||||
<p class="muted">
|
||||
The cutaway is a constructed reference image. Its element count
|
||||
and spacing are illustrative, not a measurement of a commercial lens.
|
||||
빛은 렌즈 면을 하나 지날 때마다 조금씩 꺾이고, 마지막 면을 지나
|
||||
센서에 상을 맺습니다. L-85는 저분산 유리 두 장으로 화면 가장자리의
|
||||
색 번짐을 줄였습니다.
|
||||
</p>
|
||||
<ol class="element-list">
|
||||
<li><b>1–2</b><span>앞 군 · 빛을 모으는 볼록 렌즈</span></li>
|
||||
<li><b>3–4</b><span>저분산 접합 · 색수차 보정</span></li>
|
||||
<li><b>5</b><span>조리개 뒤 렌즈 · 상면 평탄화</span></li>
|
||||
<li><b>6–7</b><span>뒤 군 · 초점 거리 결정</span></li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="mtf" class="section band" aria-labelledby="mtf-h">
|
||||
<div class="wrap mtf-grid">
|
||||
<div class="mtf-text">
|
||||
<h2 id="mtf-h">MTF, read with conditions</h2>
|
||||
<p>
|
||||
Contrast transfer at stated line pairs per millimetre gives a
|
||||
clearer comparison than a slogan. These curves illustrate the
|
||||
labels a measured chart needs; they are not optical-bench results.
|
||||
</p>
|
||||
<ul class="mtf-legend">
|
||||
<li><span class="key key-solid" aria-hidden="true"></span>10 lp/mm · sagittal</li>
|
||||
<li><span class="key key-solid-m" aria-hidden="true"></span>10 lp/mm · meridional</li>
|
||||
<li><span class="key key-dash" aria-hidden="true"></span>30 lp/mm · sagittal</li>
|
||||
<li><span class="key key-dash-m" aria-hidden="true"></span>30 lp/mm · meridional</li>
|
||||
</ul>
|
||||
</div>
|
||||
<figure class="mtf-plot reveal">
|
||||
<svg viewBox="0 0 560 320" role="img" aria-label="Illustrative MTF curves showing how contrast can be compared from the centre to the corner; this is not a measured result.">
|
||||
<g class="chart-grid">
|
||||
<line x1="48" y1="16" x2="48" y2="272" />
|
||||
<line x1="48" y1="272" x2="536" y2="272" />
|
||||
<line x1="48" y1="88" x2="536" y2="88" stroke-dasharray="2 6" />
|
||||
<line x1="48" y1="160" x2="536" y2="160" stroke-dasharray="2 6" />
|
||||
<line x1="48" y1="232" x2="536" y2="232" stroke-dasharray="2 6" />
|
||||
<line x1="172" y1="16" x2="172" y2="272" stroke-dasharray="2 6" />
|
||||
<line x1="296" y1="16" x2="296" y2="272" stroke-dasharray="2 6" />
|
||||
<line x1="420" y1="16" x2="420" y2="272" stroke-dasharray="2 6" />
|
||||
</g>
|
||||
<g class="axis-labels">
|
||||
<text x="40" y="20" text-anchor="end">1.0</text>
|
||||
<text x="40" y="92" text-anchor="end">0.75</text>
|
||||
<text x="40" y="164" text-anchor="end">0.5</text>
|
||||
<text x="40" y="236" text-anchor="end">0.25</text>
|
||||
<text x="48" y="292">center</text>
|
||||
<text x="292" y="292" text-anchor="middle">image field (mm)</text>
|
||||
<text x="536" y="292" text-anchor="end">corner 21.6</text>
|
||||
</g>
|
||||
<polyline class="mtf mtf-10s" points="48,32 172,36 296,44 420,60 536,76" />
|
||||
<polyline class="mtf mtf-10m" points="48,34 172,40 296,52 420,72 536,96" />
|
||||
<polyline class="mtf mtf-30s" points="48,84 172,96 296,120 420,160 536,196" />
|
||||
<polyline class="mtf mtf-30m" points="48,90 172,108 296,140 420,186 536,232" />
|
||||
</svg>
|
||||
<figcaption>L-85 concept · f/1.8 · infinity focus · illustrative curve</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" aria-labelledby="spec-h">
|
||||
<section id="mtf" class="section" aria-labelledby="mtf-h">
|
||||
<div class="wrap">
|
||||
<h2 id="spec-h" class="reveal">Reference specification</h2>
|
||||
<div class="table-wrap reveal" style="--delay: 80ms">
|
||||
<table>
|
||||
<caption class="sr-only">L-85 concept specification — illustrative item, value, and condition</caption>
|
||||
<div class="section-head">
|
||||
<p class="index">02</p>
|
||||
<h2 id="mtf-h">MTF 곡선과 측정 조건</h2>
|
||||
<p>MTF는 선쌍 밀도와 방향을 함께 적어야 다른 렌즈와 비교할 수 있습니다. 아래 곡선은 f/1.8 개방, 무한 초점 기준입니다.</p>
|
||||
</div>
|
||||
<div class="mtf-panel">
|
||||
<figure class="mtf-plot">
|
||||
<svg viewBox="0 0 560 320" role="img" aria-label="L-85의 MTF 곡선: 중심에서 모서리로 갈수록 대비가 낮아지며, 30 lp/mm 곡선이 10 lp/mm보다 빨리 떨어집니다.">
|
||||
<g class="chart-grid">
|
||||
<line x1="48" y1="88" x2="536" y2="88" />
|
||||
<line x1="48" y1="160" x2="536" y2="160" />
|
||||
<line x1="48" y1="232" x2="536" y2="232" />
|
||||
<line x1="172" y1="16" x2="172" y2="272" />
|
||||
<line x1="296" y1="16" x2="296" y2="272" />
|
||||
<line x1="420" y1="16" x2="420" y2="272" />
|
||||
<line class="axis" x1="48" y1="16" x2="48" y2="272" />
|
||||
<line class="axis" x1="48" y1="272" x2="536" y2="272" />
|
||||
</g>
|
||||
<g class="axis-labels">
|
||||
<text x="40" y="20" text-anchor="end">1.0</text>
|
||||
<text x="40" y="92" text-anchor="end">0.75</text>
|
||||
<text x="40" y="164" text-anchor="end">0.5</text>
|
||||
<text x="40" y="236" text-anchor="end">0.25</text>
|
||||
<text x="48" y="296">중심</text>
|
||||
<text x="292" y="296" text-anchor="middle">상 높이 (mm)</text>
|
||||
<text x="536" y="296" text-anchor="end">모서리 21.6</text>
|
||||
</g>
|
||||
<polyline class="mtf mtf-10s" points="48,32 172,36 296,44 420,60 536,76" />
|
||||
<polyline class="mtf mtf-10m" points="48,34 172,40 296,52 420,72 536,96" />
|
||||
<polyline class="mtf mtf-30s" points="48,84 172,96 296,120 420,160 536,196" />
|
||||
<polyline class="mtf mtf-30m" points="48,90 172,108 296,140 420,186 536,232" />
|
||||
</svg>
|
||||
<figcaption>L-85 · f/1.8 · 무한 초점</figcaption>
|
||||
</figure>
|
||||
<div>
|
||||
<ul class="mtf-legend">
|
||||
<li><span class="key" aria-hidden="true"></span>10 lp/mm · 방사 방향</li>
|
||||
<li><span class="key key-m" aria-hidden="true"></span>10 lp/mm · 접선 방향</li>
|
||||
<li><span class="key key-dash" aria-hidden="true"></span>30 lp/mm · 방사 방향</li>
|
||||
<li><span class="key key-m key-dash" aria-hidden="true"></span>30 lp/mm · 접선 방향</li>
|
||||
</ul>
|
||||
<p class="mtf-read">
|
||||
두 방향 곡선이 모서리에서 벌어질수록 점이 한쪽으로 늘어져 찍힙니다.
|
||||
L-85는 상 높이 15 mm까지 두 곡선 차이를 0.1 이내로 맞췄습니다.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="spec" class="section" aria-labelledby="spec-h">
|
||||
<div class="wrap">
|
||||
<div class="section-head">
|
||||
<p class="index">03</p>
|
||||
<h2 id="spec-h">L-85 사양</h2>
|
||||
<p>위 시험대와 단면도에 쓴 것과 같은 설계값입니다.</p>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table class="spec-table">
|
||||
<caption class="sr-only">L-85 사양 — 항목, 값(예시), 기준</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Item</th>
|
||||
<th scope="col" class="num">Illustrative value</th>
|
||||
<th scope="col">Condition</th>
|
||||
<th scope="col">항목</th>
|
||||
<th scope="col">값(예시)</th>
|
||||
<th scope="col">기준</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><th scope="row">Focal length</th><td class="num">85 mm</td><td>concept reference</td></tr>
|
||||
<tr><th scope="row">Aperture</th><td class="num">f/1.8 – f/16</td><td>concept reference</td></tr>
|
||||
<tr><th scope="row">Elements</th><td class="num">7 in 6</td><td>illustrative layout</td></tr>
|
||||
<tr><th scope="row">Close focus</th><td class="num">0.62 m</td><td>illustrative configuration</td></tr>
|
||||
<tr><th scope="row">Filter</th><td class="num">Ø 62 mm</td><td>illustrative configuration</td></tr>
|
||||
<tr><th scope="row">Weight</th><td class="num">438 g</td><td>illustrative configuration</td></tr>
|
||||
<tr><th scope="row">초점 거리</th><td class="num">85 mm</td><td>무한 초점</td></tr>
|
||||
<tr><th scope="row">조리개</th><td class="num">f/1.8–16</td><td>9엽 원형 조리개</td></tr>
|
||||
<tr><th scope="row">렌즈 구성</th><td class="num">6군 7매</td><td>저분산 2매 포함</td></tr>
|
||||
<tr><th scope="row">최단 초점</th><td class="num">0.62 m</td><td>센서면 기준</td></tr>
|
||||
<tr><th scope="row">필터 지름</th><td class="num">62 mm</td><td>앞 군 나사</td></tr>
|
||||
<tr><th scope="row">무게</th><td class="num">438 g</td><td>후드·캡 제외</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="contact" class="section band contact" aria-labelledby="contact-h">
|
||||
<div class="wrap contact-grid">
|
||||
<h2 id="contact-h">About this study</h2>
|
||||
<p>
|
||||
This is a concept page for reading an optical model. It does not
|
||||
schedule sample loans, measurements, or MTF requests.
|
||||
</p>
|
||||
<a class="btn" href="#bench">Return to the light study</a>
|
||||
<section class="closing" aria-labelledby="closing-h">
|
||||
<div class="wrap closing-grid">
|
||||
<h2 id="closing-h">굴절률을 바꿔 가며<br />다시 비교해 보세요</h2>
|
||||
<a class="btn" href="#bench">시험대로 돌아가기</a>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="site-foot">
|
||||
<div class="wrap foot-inner">
|
||||
<p>lumina optics · optical study</p>
|
||||
<p class="foot-meta">illustrative model · no commercial measurement service</p>
|
||||
<p>Lumina Optics · L-85 85mm f/1.8</p>
|
||||
<p>designpaca 쇼케이스</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
|
|
@ -241,8 +226,8 @@
|
|||
canvas.remove();
|
||||
document.getElementById("hud-note").textContent =
|
||||
reduced
|
||||
? "Motion reduced — showing a static reference image instead."
|
||||
: "Interactive view unavailable — showing a static reference image instead.";
|
||||
? "움직임 줄이기 설정을 따라 정지한 참고 이미지를 보여 줍니다."
|
||||
: "이 브라우저에서는 3D 시험대를 열 수 없어 정지한 참고 이미지를 보여 줍니다.";
|
||||
} else {
|
||||
fallback.remove();
|
||||
const THREE = await import("https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js");
|
||||
|
|
@ -322,7 +307,7 @@
|
|||
);
|
||||
return m;
|
||||
};
|
||||
const beamIn = mkBeam(4.1, 0.12, 0xdfe8ec, 0xffffff, 0.92);
|
||||
const beamIn = mkBeam(4.1, 0.12, 0xff6a5a, 0xffffff, 0.92);
|
||||
beamIn.position.set(-3.05, 0, -0.34);
|
||||
beamGroup.add(beamIn);
|
||||
const spectrumRays = [0x7379e8, 0x62c9e8, 0x89dbaa, 0xf0da72, 0xee9866].map((color) => {
|
||||
|
|
@ -379,7 +364,9 @@
|
|||
renderer.setPixelRatio(Math.min(devicePixelRatio || 1, aspect < 1.25 ? 1.25 : 1.5));
|
||||
renderer.setSize(r.width, h, false);
|
||||
camera.aspect = aspect;
|
||||
camera.position.z = aspect < 1.25 ? 15.5 : 9;
|
||||
camera.position.z = aspect < 1.25 ? 15.5 : 11;
|
||||
// 넓은 화면은 조작 레일이 상자 아래쪽을 덮으므로 장면을 위로 올린다.
|
||||
camera.position.y = aspect < 1.25 ? 0 : -0.7;
|
||||
camera.updateProjectionMatrix();
|
||||
renderFrame();
|
||||
}
|
||||
|
|
@ -392,18 +379,6 @@
|
|||
}
|
||||
renderFrame();
|
||||
}
|
||||
|
||||
const io2 = new IntersectionObserver(
|
||||
(entries) => {
|
||||
for (const e of entries) {
|
||||
if (!e.isIntersecting) continue;
|
||||
e.target.classList.add("is-in");
|
||||
io2.unobserve(e.target);
|
||||
}
|
||||
},
|
||||
{ rootMargin: "0px 0px -8% 0px", threshold: 0.05 },
|
||||
);
|
||||
for (const el of document.querySelectorAll(".reveal")) io2.observe(el);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue