Three.js / interaction specimen 02

Raycast
specimen
labeler

3D 공간에서 맞은 지점을 읽고, 그 점을 DOM 태그로 다시 표기하는 최소 작업대입니다. 깊이는 장식이 아니라 선택·가림·좌표가 바뀌는 증거일 때만 사용합니다.

01 / inspection aperture

Pick a specimen

BOOTING 3D

Spatial inspection stage

3D 런타임을 준비하는 중입니다. 렌더러가 차단되어도 아래 정적 specimen 목록과 선택 경로는 남습니다.
포인터로 specimen을 맞히거나 무대에 포커스를 둔 뒤 ← / → 키로 순환하세요. 드래그는 시점을 돌리고, 휠은 검사 거리를 조절합니다. 태그의 위치는 선택된 3D hit point를 현재 viewport 픽셀로 투영한 결과입니다.
Pointer hit짧게 클릭하면 Raycaster가 가장 가까운 교차점을 읽습니다.
Keyboard path무대 포커스 후 ← / →, 또는 오른쪽 ledger 행을 선택하세요.
Projected DOM태그는 WebGL 픽셀이 아니라 접근 가능한 HTML입니다.

02 / static evidence path

Specimen list, without WebGL

NO-JS SAFE

CDN이 차단되거나 WebGL context를 잃어도 이 목록은 남습니다. 절차적 geometry의 이름·형태·선택 순서를 읽는 데는 3D 런타임이 필요하지 않습니다.

  1. A-01Orbit shard

    면이 분명한 각진 형태. 선택 anchor는 상단 능선입니다.

  2. B-02Knot loop

    연속적인 꼬임 형태. 선택 anchor는 루프의 전면입니다.

  3. C-03Signal cone

    방향성을 가진 원뿔. 선택 anchor는 꼭짓점 근처입니다.

  4. D-04Stacked core

    축을 따라 쌓인 원통. 선택 anchor는 가운데 링입니다.

  5. E-05Prism flare

    빛을 나누는 결정형. 선택 anchor는 가장 밝은 면입니다.

03 / author notes

What this starter proves

이 파일은 Raycaster 교차점, DOM projection, 포인터 hit / no-hit, 키보드 순환, reduced-motion, context-loss fallback을 한 장면에서 확인하는 출발점입니다. geometry와 색은 샘플이며 측정값이 아닙니다.