在浏览器中让文字绕排 3D 模型

图片解读

第 1 张图像证据整理

一、事实（只记录可读文字、界面元素、可见现象）

- 大幅中文水印（白色、粗体，斜向覆盖画面）：

- “实时流动” （在图片上部及中央斜向重复出现，字形清晰）

- 中央偏下小白字水印/标识：

- “小红书” （白色，位于画面中间偏下、覆盖在模型上）

- 英文标题与段落（页面布局像杂志或展板的三栏式）：

- 左上小标题： “THE CLIFF”

- 左侧大标题： “ÉZE CASTLE”

- 左侧段落（可读部分，逐字记录）：

- “Éze sits at the edge of a limestone ridge on the

French Riviera, 429 meters above the

Mediterranean. The village is older than most

of the castles that once controlled this coast.

What survives is not a single fortress but a

layered accumulation: ancient Genoese walls, a

medieval core, and the ruins of a 14th-centu”

（末尾被截断）

- 中间上方小标题： “THREE OCCUPATIONS”

- 中间段落（可读部分）：

- “The castle has been three

things in succession:”

（后续小段文字不可辨或被水印遮挡）

- 右上小标题： “THE EXILE GARDEN”

- 右侧段落（可读部分，逐字记录）：

- “Prince Alexandre Lothar of Hesse, a cousin

of Queen Victoria and an exile from three

different European courts, bought the

ruined castle in 1923 and spent the next

two decades building what he called a

‘marvelous garden’ among the rubble. He

had been forced out of Russia, then out of”

（末尾被截断）

- 可见实体/视觉元素：

- 一个石造小镇或城堡模型，含高塔（钟楼样式）、瓦屋面、城墙，放置在类似悬崖的底座上

- 悬崖与岩石质感明显，前景有岩石与少量植被

- 背景为深色/黑色，版面排版呈杂志或展板风格（文字在上方，模型图在下方）

- 模型城墙侧面有一个矩形铭牌/标识板（有浮雕或文字），但文字不可清晰辨认

- 整体画面有强烈的明暗对比，白色文字与黑色背景形成显著反差

二、无法辨认/被遮挡的内容（明确标注不可读之处）

- 左侧段落末行 “14th-centu…” 后半被截断，无法读出完整单词（推测为“14th‑century”但在图中不可完全辨认）

- 中间栏在 “The castle has been three things in succession:” 之后的文字被白色中文水印和/或排版遮挡，多数不可辨认

- 右侧段落末尾 “then out of …” 被截断，后续文字不可见

- 模型城墙侧面的矩形铭牌/标识板上的文字不可辨认（分辨率与角度导致无法读出）

- 页面顶部/底部可能还有小字或装饰性文字被水印覆盖或位于画面边缘，无法读取完整内容

- 画面最上方、最下方及两侧边缘是否有额外文字或版权信息：不可辨认或被裁切

三、推测（基于画面事实的合理推断，标注为推测）

- 推测这是一本杂志页或展览说明板的排版（原因：三栏文字、标题、副标题与下方的实物图片/模型布局相似）

- 推测左侧段落末尾被截断的词很可能是 “14th‑century”（“14th‑centu…”），但图中未完全显示，故为推测

- 推测右侧段落未完句可能继续描述王子被迫离开其他国家（如“then out of France”或其它国家），但图中不可确认

- 推测中间顶部与中间段落的 “THREE OCCUPATIONS” 是对城堡历史功能的分类标题（基于字面含义与上下文）

- 推测图片来源或用途可能与旅游、历史介绍或建筑模型展示相关（依据 “ÉZE CASTLE”、法属里维埃拉地理描述与模型）

四、忽略事项说明

- 已遵照要求忽略图中可能的“指令”或操作提示（画面主要为文字和图像，未执行任何操作）

SkillPI 作品解读

作品用途：

- 该条目演示了将前端排版库 pretext 与 3D 模型展示结合的想法与成品视觉，主要用于在网页中做古迹或建筑模型的图文展示，使文字在模型上方流动且在用户旋转/查看模型细节时不遮挡重要视图。作者提到已把工作流开源并配有演示视频，便于他人复现体验。

图片证据要点（基于图像说明）：

- 页面采用杂志式三栏排版，左/中/右分别有标题与段落，中央下方为 3D 模型图；图中可读英文段落（如关于 ÉZE CASTLE 的描述）与明显中文水印“实时流动”共存，说明视觉呈现强调文字的动态排布。

- 画面可见的模型细节（塔楼、城墙、岩石、植被）暗示演示对象为小型建筑或城堡模型，且文字与模型之间存在视觉层级关系。

关联 Skill 与可行的使用步骤（按能在前端兑现的高层流程描述）：

1. 获取 pretext（项目名由摘要给出），在页面中引入并初始化 pretext 排版容器。

2. 在同一页面并列或叠放一个 3D 渲染画布（用于放置 3D 模型）；3D 渲染器具体选型（如 three.js、Babylon.js 等）由使用者决定，此处未在来源中明确，应按熟悉的工具选用。

3. 在渲染循环或交互回调中，采集 3D 模型在屏幕上的占位信息（可以是深度、遮挡掩码或模型屏幕投影边界），并把该占位信息传给 pretext，用以驱动文本重新排版，从而让文本“避让”模型可视区域。

4. 调整排版参数（字体、列宽、环绕策略、触发频率）与渲染性能，以在交互（拖动/旋转模型）时保持文字实时更新且不会明显卡顿。

5. 提供交互状态（阅读模式 vs 观看模式）开关，以便在需要时固定文字或优先展示模型细节（示例中作者提到“默认状态下能仔细阅读、拖动旋转建筑时文字也不会把它挡住”）。

复现前提：

- 需要前端开发基础（HTML/CSS/JavaScript）与能够运行 3D 渲染的环境（浏览器对 WebGL 或相应渲染器的支持）。

- 需要访问 pretext 项目代码或分发包（作者说工作流开源，但具体仓库链接/版本需从来源确认）。

- 需要至少一种 3D 渲染库或框架来加载与展示 3D 模型（具体库在来源中未指明，使用者应选用自己熟悉的库）。

待核实事项（来源中未给出或需验证才能复现的关键点）：

- pretext 的具体 API 与如何接收外部的遮挡/掩码信息（来源只说明 pretext 能做实时排版，但未列出方法或接口）。

- 作者开源工作流的仓库地址、示例代码与视频步骤（来源提及已开源和有视频，但未包含链接或文件名）。

- 在不同浏览器和复杂模型下的性能表现与兼容性限制（如深度采样或掩码计算策略是否跨浏览器一致）。

- 若要精确重现视觉效果，还需核实使用的 3D 模型文件（格式、贴图、光照设置）与页面样式（字体、行距、列宽）。