GPU / WEB / CASES

语义场景20 / 20

←返回目录 ↗

实验运行中…

写一张卡 / 点击墙面放置 / 选中后删除

Semantic card → CanvasTexture → Bent surface

让文字成为一张物理卡片。

20 / WORDS WITH WEIGHT · Semantic → Pixel → Surface

Case 20 · Three.js

二维内容，三维表面

业务卡片先编译成确定性的 Canvas2D 纹理，再贴到可弯曲、投影、遮挡的物理表面。Three.js 负责物体心智模型，不负责发明业务事实。

card fact + stable ID
↓ compileCard（palette / text layout）
Canvas2D → CanvasTexture
↓ PlaneGeometry bend + PBR
Raycaster → analytic wall plane
↓ inverse placement
dispose texture / material / geometry

放一张新卡片

合同信号

每个 card fact 恰好一张 CanvasTexture

屏幕点反算到解析墙面，而非猜 CSS 像素

取消/删除显式 dispose 原生资源

加载 Three.js…

—

—

选择一张卡片

点击墙上的卡片查看语义事实与资源成本。

Surface contract

放置模式 · 移动指针选择墙面位置 · 单击确认 · Esc 取消并释放资源