threejs-scene 用于仅凭代码在 three.js 中搭建实时 3D 网页,不依赖外部模型文件。技能认为 3D 页面的说服力主要来自灯光与比例,而非多边形数量,因此主张像做建筑模型一样:使用真实尺寸、在代码中构建、并正确处理光照。
主要能力与内容:
- 起始模板:assets/starter/ 是一个完整可运行场景(草坪上的圆形凉亭),包含 index.html、main.js(渲染器、相机、后期处理、质量分级、视角与飞行、录制钩子、帧循环)、env.js(天空、太阳、基于图像的光照、雾、云、夜空及三种可混合预设)、kit.js(种子随机数、画布纹理、实例化工具、车削、圆弧、带斜接角的轮廓扫掠)、scene.js(示例主体与可复用模式)。启动命令:cp -r assets/starter my-scene && cd my-scene,然后 python3 -m http.server 8000。
- URL 参数:?view=front|corner|low|aerial、?light=morning|golden|night、?quality=high|balanced|fast,以及 ?record=1 用于配合帧捕获做帧精确录制。
- 工作流:先收集参考与真实尺寸并以米为单位写成常量;用盒子按正确比例粗排并从访客视角检查;按类型而非实例做细节,用函数定义柱、窗、栏杆等再通过 Kit 实例化;用 env.js 预设布光并调整曝光、太阳高度与雾;添加风、水、旗帜、夜间灯光等动态,由共享 uniforms 驱动;用 site-check 测量帧时间、绘制调用并逐视角检查,最后录制。
- 渲染设置:ACESFilmic 色调映射与按预设的曝光(0.6 至 1.0);抗锯齿放在合成器而非画布(渲染器 antialias: false,HalfFloatType 渲染目标 samples: 4);后期栈为 RenderPass → GTAOPass → UnrealBloomPass → OutputPass;从天空生成 PMREM 环境贴图并随预设混合定期刷新;单一投射阴影的太阳光配 4096 阴影贴图、视锥按视图调整并对齐 texel;视场角 38,竖屏自动加宽垂直 FOV;像素比上限 2。
- 光照:每个预设联动天空、太阳、半球光、雾、曝光与云;低角度太阳(5 至 10 度)最能营造质感;夜景以自发光材质加泛光为主,点光与聚光使用物理单位(坎德拉)和衰减 2;强度为零的灯应隐藏以避免阴影开销。
- 几何模式:sweep(二维轮廓沿 XZ 路径扫掠,处理斜接角,用于檐口、路缘、台阶等)、lathe(带收分的柱、栏杆、圆顶、灯柱、车轮等)、Kit 实例化并按实例上色、canvasTex 用种子随机数在代码中绘制纹理、共享材质的静态几何合并。
- 着色器修补:通过 onBeforeCompile 扩展内置材质,保留光照、阴影与雾;已测试的补丁包括风摆、朝上面积雪、季节叶色、夜间亮窗、水面波纹。移动顶点的补丁还需同步修补阴影投射(如树木使用带相同 onBeforeCompile 的 MeshDepthMaterial,并开启 RGBADepthPacking),否则阴影不会跟随。
- 性能:面向笔记本 GPU 在 1440x900 下的预算为每帧 10 毫秒以内、绘制调用 300 以内、三角形 200 万以内;优先实例化重复部件、质量分级(high、balanced、fast,起始模板在持续卡顿时自动降级且录制时不降级)、静止时跳过合成渲染、小远处物体关闭投射阴影。
- 相机:为值得看的视角定义命名观测点,供按钮、深链、静帧和录制复用;视角间飞行越过中点并缓入缓出;限制 OrbitControls 极角与距离并开启阻尼;prefers-reduced-motion 时飞行改为跳转。
- 录制:?record=1 隐藏界面并按页面时钟执行脚本化巡游,延迟须使用 later(secs, fn) 而非 setTimeout;配合 frame-capture 的 record.py 输出视频。
- 交付前检查:每个视角在每种光照下于笔记本与手机尺寸均检查;无阴影痤疮、轨道时阴影边缘无闪烁、共面处无 z-fighting(贴花偏移 1 至 2 厘米);物体不漂浮不下沉;帧时间与绘制调用在预算内;若主体为真实地点、物体或品牌,须标注为非官方研究且不使用商标。
限制与未提供信息:资料未说明该技能的收费、价格、平台依赖、支持的 three.js 版本范围(模板固定 three r169)之外的兼容性、性能在各硬件上的具体表现,以及安装该技能本体的命令;这些事实暂未提供。