Three.js网页3D产品展示：从glTF模型优化到交互实现全指南

上个月一个做文创的朋友找我说想在官网上放一个产品3D展示用户可以在手机里转着看细节最好还能点某个部位弹出讲解看完能顺手转发给微信好友。他一开始以为这活儿要么做成交互视频要么得上一套客户端听我说一个普通网页、一套开源的 three.js 渲染库、几十行 JS 就能跑起来后第一反应是那会不会很卡会前提是你把工作流搞错了不会前提是你把模型优化、渲染设置和交互实现当成一条完整管线来看而不是网上找一段代码贴上去就完事。这篇文章我打算按自己从评估需求到上线的思考顺序来写什么时候真需要做网页3D展示、glTF 格式和压缩为什么要前置处理、Three.js 里从空场景到可交互模型的最小代码怎么写、访客看完之后怎么把模型分享出去以及我在真实项目里栽过的几个跟头。无论你是前端想接第一个3D需求还是运营、产品想找技术团队聊需求都能从里面挑出可以直接照做的部分。1. 为什么我会劝你先想清楚“图、视频、3D”谁够用1.1 三种载体各擅长什么决定你要不要上3D拿到需求第一步不是装环境而是回答一个问题这个展示是不是真的需要用户主动控制视角。如果是卖一张海报你上 3D 意义不大如果是卖椅子、电饭煲、鞋子、机械设备那用户想看的往往不是正面一张图而是转过来看背面、卡扣、走线、底部铭牌。图文能表达信息视频能交代动态只有在用户需要自己选择视角、自己探索结构细节时3D 才不可替代。我习惯把不同载体的特性摆成一张表再来判断形式用户能做什么信息密度制作维护成本网络加载体感图文看、读、局部放大低低最快视频跟着镜头看无法控制视角中中中等受时长影响360° 序列帧左右拖拽视角有限中中高要出多帧图中WebGL 3D自由旋转、缩放、点选、换肤高建模 前端开发优化后可以很轻在这个阶段你真正要评估的不是“3D有多酷”而是“用户有没有必要主动转这个模型”。做小家电详情页3D 能带来明显的新鲜感和停留时长做一张静态宣传海报强行上模型反而显得刻意。1.2 什么情况下用 3D 反而是负优化我也见过不少上到一半后悔的项目大致集中在几个场景产品外形本身很平面用户没有多角度观察的诉求目标用户大量集中在几年前的入门机型或者弱网环境加载一个三四十 MB 的模型只会劝退模型还在频繁改版却没有一套“前端自动读取最新模型”的流程每次换个模型都要重新发版手里只有网上扒来的模型版权不清楚贴图和布线也不适合实时渲染。遇到这些情况我通常会劝对方缓一缓不是说 3D 不行而是当下需求不需要付出这个成本。真正落地 3D 展示的项目前期往往已经积累了比较完整的模型资产比如工业设计文件、电商产品的 C4D/Blender 工程或者原来做 AR 用的模型。2. 技术栈选型从 model-viewer 到 Three.js别一上来就上“重型框架”2.1 我用过的几类实现方案和各自脾气技术选型这件事其实不需要几千字的前期论证。我一般先画一个判断这个项目是要“快速出货”还是“深度定制”。是前者优先选开箱即用的组件是后者才需要把 three.js 这类引擎铺开。下面是几类主流路线每种我都实际用过或者至少做过评估路线入口成本定制能力适用场景备注原生 WebGL极高最高自研渲染器、写特殊 Shader绝大多数项目不需要Three.js中高产品展示、数字孪生、轻量游戏生态最丰富参考案例最多Babylon.js中高高工程可视化、复杂游戏自带调试面板上手比 three.js 陡一点model-viewer很低中电商、新媒体展示不用写 JS 就能手势控制A-Frame低中VR 场景底层还是 three.js封装成 ECS 组件Sketchfab 等平台嵌入极低低临时展示、个人作品集有平台 logo 和访问限制如果让我一句话推荐没有强定制需求先用model-viewer要做热点、换材质、AR、自定义场景就用 Three.js。大多数动态产品站、数字孪生类项目都会落到 Three.js 上因为它处在“自由度”和“开发成本”之间最舒服的位置。2.2 我会先用 model-viewer 验证交互再决定要不要重写这里的顺序很多人搞反了。需求是商品详情页摆一个模型能旋转、缩放、自动旋转最好还能 AR其实model-viewer一个 Web Component 全搞定了你只需要几行 HTML。底层用的还是 three.js 的加载和渲染逻辑只是包了一层标准组件连控制器灵敏度、阴影、环境光照这些细节都给了默认值。script typemodule srchttps://ajax.googleapis.com/ajax/libs/model-viewer/4.0.0/model-viewer.min.js/script model-viewer src/models/cup.glb camera-controls auto-rotate ar ar-modeswebxr scene-viewer quick-look stylewidth: 100%; height: 480px; /model-viewer这段代码放到本地起个静态服务就能跑手机访问可以通过 AR 按钮把模型投射到真实空间。先用它给业务快速出个可点的原型比写几十行代码再去对齐需求快很多。但注意这个组件用真机调试 AR 时必须在 HTTPS 或 localhost 环境普通 HTTP 页面是弹不出 AR 的。等到业务方开始提“点击某个零件弹说明书”“给模型换三种配色”“播放打开盖子的动画”这类需求model-viewer就有点施展不开了。它本质上是一个封装好的黑盒Element 层面只暴露了有限的属性和事件你想拿到内部场景里的某个 Mesh 去改材质还是要跳出它换 three.js。2.3 框架只是工具别被旧版示例带偏Three.js 版本迭代很快搜索出来的结果经常是两三年前的。你照着五年前的示例写很可能会遇到THREE.Geometry已经没了、THREE.Face3直接报错这类问题。我建议不管用哪个版本都以当前 npm 包对应的官方文档和 example 为准。文章后面的示例代码基于 r161 左右的版本核心概念变化不大但 API 细节可能有微调跑之前先看控制台报错。3. 别跳过模型加工glTF 格式、压缩管线与性能预算3.1 glTF 之于 3D就像 JPEG 之于图片很多第一次做网页 3D 的人容易犯一个错建模软件里导出一个 OBJ 或者 FBX就直接丢给前端然后发现要么加载慢要么浏览器不识别。网页实时渲染最稳定的格式是 glTF 2.0单文件版叫 GLB。它不是“最新潮的格式”而是专门为运行时设计的用 JSON 描述场景层级用二进制存网格数据材质走 PBR 规范动画、骨骼、节点关系都能保留。你可以把 glTF 理解成 3D 内容的 JPEG。设计师交付原文件C4D/Blender/3ds Max网页端接收的是经过压缩、没有多余软件信息的“成品”。浏览器解析它比解析 OBJ 这种文本格式快得多还方便配合 Draco、Meshopt 这样的压缩算法进一步减重。3.2 DCC 导出到 glTF/GLB 时的关键选项不管你是从 Blender 还是别的软件导出以下几点统一检查一遍能省下后面大量调效时间单位统一。建模软件里一米等于一格Blender 导出时保持默认米制避免到网页端后模型突然变成 0.001 倍大小。应用变换。缩放要“应用”旋转要“应用”坐标轴最好保持 Y 轴向上。我看到过很多模型加载后躺在地上就是因为建模时没有应用旋转。顶点数可控。建模软件里为了平滑一个曲面可能切成上百万三角面。网页上超过几十万顶点就开始吃力优先用 Decimate 或减面工具清理不可见结构。贴图尺寸收敛。4K 贴图在建模渲染里很常见但网页上单张 2048 已经很大很多局部特写用 1024 就足够。命名规范。导出后节点名字会变成你能拿到的唯一标识前端要做“点击某个零件”就靠这个 name导成 Mesh_001、Mesh_002 会让你后期想哭。Blender 里导出就是File Export glTF 2.0勾选GLB格式导出选项里可以开启 Draco 压缩。注意默认被选中的物体才导出提前把要导出的模型选中避免导出一堆灯光相机和辅助器。3.3 批量优化道具gltf-transform 和 gltfpack如果你的项目经常要处理多个模型手动在 GUI 里导出太慢了。我常用命令行工具gltf-transform/cli做加工它的逻辑很直白输入一个 glTF/GLB输出一个处理完的 GLB。# 先检查模型里有什么别盲压 gltf-transform inspect model.glb # 一次做完重排缓冲、压缩网格、压缩纹理 gltf-transform optimize model.glb model-optimized.glb --compress draco --texture-compress ktx2Draco 用来压缩顶点位置、法线、UV 这些几何数据KTX2 用来压缩贴图。有些时候单独用 Draco 就已经能把模型体积砍掉一半再把贴图压成 KTX2一个十几 MB 的原始导出经常能压到 23 MB。如果你的纹理已经处理得很干净甚至不需要 KTX2普通 JPEG/WebP 转进去也行。另一个工具是gltfpack它和 gltf-transform 风格不同但也能做类似事情gltfpack -i model.gltf -o model-packed.glb -cc -tc参数含义以你安装的版本为准跑之前先看--help。这些命令的核心逻辑是一致的先压缩再检查体积最后真机测试。压缩不是没有代价Draco 解压要消耗 CPU这节我在后面“避坑”部分再展开讲。3.4 我给模型定性能预算的习惯做展示型页面我习惯先给模型设一个心理预算不至于等上线了才被卡顿打脸。这个数字不用当硬性考试分数线但可以作为工作流的底线指标桌面端参考移动端参考顶点数60 万以内极限 100 万10 万30 万物体数量 / 渲染批次单体模型 100场景 300单体模型 50场景 100贴图尺寸单张 2048单张 1024能用 KTX2 更好加载体积38 MB13 MB帧率60fps30fps 保底如果你的产品本身就是工业设备多边形数量很高那就不要硬削到万级而是上 LOD远处显示低模镜头拉近了替换成高模。这比把所有模型都压成高精度更合理也是网页 3D 的常态做法。4. 把 GLB 真正放到页面上Three.js 最小可运行工程拆解4.1 初始化项目能跑就行最快的启动方式是用 Vite 建一个 vanilla 项目npm create vitelatest demo-3d -- --template vanilla cd demo-3d npm install three npm run dev如果你不想搞构建工具也可以直接在 HTML 里用 import mapscript typeimportmap { imports: { three: https://cdn.jsdelivr.net/npm/three0.161.0/build/three.module.js, three/addons/: https://cdn.jsdelivr.net/npm/three0.161.0/examples/jsm/ } } /script script typemodule src/src/main.js/scriptimport map 的好处是演示项目不用装 npm 依赖坏处是你得固定一个版本号别写 latest否则哪天官方更新把路径改了你都不知道。4.2 渲染器、场景、相机一个都不能少Three.js 最基础的概念就三样渲染器把内容画到 canvas场景装着所有物体相机决定从哪个角度看。初始化代码我通常会加上颜色空间和 tone mapping这样加载出来的 PBR 材质在屏幕上的观感更接近建模软件。import * as THREE from three; import { OrbitControls } from three/addons/controls/OrbitControls.js; import { GLTFLoader } from three/addons/loaders/GLTFLoader.js; import { RoomEnvironment } from three/addons/environments/RoomEnvironment.js; const canvas document.getElementById(app); const renderer new THREE.WebGLRenderer({ canvas, antialias: true }); renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); renderer.setSize(canvas.clientWidth, canvas.clientHeight); renderer.outputColorSpace THREE.SRGBColorSpace; renderer.toneMapping THREE.ACESFilmicToneMapping; renderer.toneMappingExposure 1.0; const scene new THREE.Scene(); const camera new THREE.PerspectiveCamera( 45, canvas.clientWidth / canvas.clientHeight, 0.1, 1000 ); camera.position.set(4, 2.5, 5); const controls new OrbitControls(camera, canvas); controls.target.set(0, 0.8, 0); controls.enableDamping true;这里有两个容易忽略的点setPixelRatio(Math.min(devicePixelRatio, 2))是为了防止 iPhone 这种高 DPR 设备上 GPU 压力过大很多人觉得移动端卡其实 DPR 没限制是原因之一outputColorSpace和toneMapping则是让明暗过渡更自然白天照进来不会生硬过曝。4.3 加载 GLB 并调整位置GLTFLoader 是加载 GLB 的最常用入口。加载成功后拿到的gltf.scene就是一个普通的 Object3D你可以直接scene.add(gltf.scene)。但建模软件里的原点经常不在模型底部所以我习惯加载后立刻做一次归位const loader new GLTFLoader(); loader.load(/models/cup.glb, (gltf) { const model gltf.scene; scene.add(model); // 把模型中心挪到原点 const box new THREE.Box3().setFromObject(model); const center box.getCenter(new THREE.Vector3()); model.position.sub(center); // 再让模型底部贴到 y0 box.setFromObject(model); const minY box.min.y; model.position.y - minY; controls.target.set(0, 0, 0); controls.update(); }, undefined, (err) { console.error(模型加载失败, err); });如果你的模型加载后没有在画面正中央大概率就是这个地方出了问题。固定归位逻辑还有个额外好处后续做热点标注时坐标计算不会因为模型偏移而乱掉。4.4 动画循环和窗口尺寸变化Three.js 的渲染是一个持续循环每一帧都要调用一次renderer.render(scene, camera)。我倾向于用renderer.setAnimationLoop而不是自己写requestAnimationFrame因为前者在启用 WebXR 时能无缝切换代码也更干净。function render() { controls.update(); renderer.render(scene, camera); } renderer.setAnimationLoop(render); window.addEventListener(resize, () { camera.aspect canvas.clientWidth / canvas.clientHeight; camera.updateProjectionMatrix(); renderer.setSize(canvas.clientWidth, canvas.clientHeight); });如果这个页面是后台管理工具或者常驻页面可以在用户不操作时暂停渲染减少 CPU/GPU 占用。但展示型页面一般开着自动旋转或者等待用户转动持续渲染也还好。4.5 PBR 材质没有被点亮模型就会黑成一块碳你可能会遇到一种情况模型加载成功了但看起来特别暗金属部分像黑色塑料还有一种“脏脏的”感觉。这往往不是模型的问题而是缺少环境贴图。PBR 材质里的金属度和粗糙度需要依赖环境光照来计算反射。只有一个方向光和环境光金属材质没有反射信息来源自然就黑掉了。Three.js 提供了RoomEnvironment用简单房间环境生成一张环境贴图在开发阶段拿来点亮模型非常方便const pmrem new THREE.PMREMGenerator(renderer); scene.environment pmrem.fromScene(new RoomEnvironment(), 0.04).texture;加上这行模型的金属反光、粗糙面细节都会立刻立起来。生产项目里可以换成 HDR 环境或者直接用相机拍一张环境贴图效果会更符合你想要的氛围。5. 从“转着看”到“点着玩”命中拾取、动画和自定义交互5.1 点击模型任意部位用什么原理光能转能缩还不够交互才是 3D 展示区别于视频的关键。最常见的交互是“点击模型的某个部位弹出对应信息”。原理是 Raycaster从相机位置穿过鼠标点击的屏幕坐标向场景发射一条射线检测它与哪些三角面相交。const raycaster new THREE.Raycaster(); const pointer new THREE.Vector2(); function onPointerDown(event) { const rect renderer.domElement.getBoundingClientRect(); pointer.x ((event.clientX - rect.left) / rect.width) * 2 - 1; pointer.y -((event.clientY - rect.top) / rect.height) * 2 1; raycaster.setFromCamera(pointer, camera); const hits raycaster.intersectObjects(model.children, true); const data hits.length ? findTaggedParent(hits[0].object) : null; if (data) showPopup(data); } function findTaggedParent(obj) { let cur obj; while (cur) { if (cur.userData cur.userData.tag) return cur.userData; cur cur.parent; } return null; } renderer.domElement.addEventListener(pointerdown, onPointerDown);这段代码里有个很实用的技巧不要只判断hits[0].object.name。GLB 内部往往按材质或蒙皮拆分成很多个 Mesh单个 Mesh 的名字是系统生成的真正承载语义的是某个父级节点。所以从命中的 Mesh 一路往上找直到找到一个带userData.tag的节点再拿这个 tag 去对应产品说明。5.2 热点标注的两种实现方式热点标注是产品展示的高频需求比如在瓶身上标一个“食品级材质”点一下浮出说明。做法基本分两类。一是 3D 世界坐标投射到屏幕坐标再用 HTML 绝对定位覆盖在 canvas 上方function updateHotspotWorld(marker3D, domEl) { const v new THREE.Vector3(); marker3D.getWorldPosition(v); v.project(camera); const x (v.x * 0.5 0.5) * canvas.clientWidth; const y (-v.y * 0.5 0.5) * canvas.clientHeight; domEl.style.transform translate(${x}px, ${y}px); }这个函数要在每一帧渲染时调用或者至少在相机变化时调用否则模型一转DOM 浮层还停留在原地。好处是浮层可以随意写 HTML卡片、图片、按钮都能用UI 美观程度上限很高。二是直接用 CSS2DRenderer这类 addon 的本质也是把 DOM 元素投射到世界坐标但封装得更好。它适合数量多、位置相对固定的标注。如果你要灵活控制浮层样式和动画还是自己写投影更顺手。5.3 播放模型动画AnimationMixer 的基本用法带骨骼动画的模型在网页上播放用的主要是AnimationMixer。加载完成之后把 GLB 里第一段动画找出来绑到 mixer 上不断更新 mixer 的进度就能让动画跑起来。let mixer; const clock new THREE.Clock(); loader.load(/models/robot.glb, (gltf) { scene.add(gltf.scene); mixer new THREE.AnimationMixer(gltf.scene); const clip THREE.AnimationClip.findByName(gltf.animations, Wave); if (clip) mixer.clipAction(clip).play(); }); function render() { const delta clock.getDelta(); if (mixer) mixer.update(delta); controls.update(); renderer.render(scene, camera); }动画名在建模软件里有时候会带奇怪的命名空间或者多段动画被合并成了一段。拿不到对应名字时建议把gltf.animations打印出来看看数组结构再决定播放哪一段。5.4 换材质和换颜色是电商配置器的基础要让用户自己挑颜色最直接的做法是遍历模型的所有 Mesh把材质颜色替换掉model.traverse((child) { if (child.isMesh) { child.material.color.set(#f5c518); } });这种做法有个陷阱如果多个 Mesh 共用了同一个材质实例改一次所有共享 Mesh 都会变。通常你需要先找到“外壳”这层单独clone()一份材质再改颜色避免把内部零件也染了。建模阶段给节点起好名字、或者导出时用userData标记零件类型能让你少写很多条件判断。5.5 还能玩的进阶方向模型展示做到底还能接 WebXR 做真机 AR 预览。Three.js 里启用renderer.xr.enabled true再用示例里的 ARButton 就能进入增强现实模式。做产品拆解动画时可以先获取每个零件的本地坐标让它们沿着自身到原点的方向线性外推产生爆炸视图。想做物理拖拽套一个 Cannon-es 就能让零件掉落到桌面上。这些玩法不是每个项目都要用但底层能力都在那里等需求来了再研究也不迟。6. 让访客把模型带走链接分享、文件下载与嵌入方案6.1 把当前视角写进 URL打开链接看到同一画面分享的本质是“把当前状态传递给另一个人”。最简单的做法是把相机的位置、朝向、模型 ID 写进 query 参数别人打开链接后初始化阶段依次读出来恢复到这个视角。function buildShareUrl(modelId, controls) { const params new URLSearchParams(); params.set(model, modelId); params.set(pos, controls.object.position.toArray().join(,)); params.set(target, controls.target.toArray().join(,)); params.set(autoRotate, controls.autoRotate ? 1 : 0); return location.origin location.pathname ? params.toString(); }在页面加载时读取参数设置 camera 和 controls target。这里有个细节只保存相机位置不够还应该保存 target否则用户旋转过相机后聚焦点还是原点视角会变得很怪。const sp new URLSearchParams(location.search); const pos (sp.get(pos) || 4,2.5,5).split(,).map(Number); const target (sp.get(target) || 0,0,0).split(,).map(Number); camera.position.set(...pos); controls.target.set(...target); controls.update();如果你的分享链接需要鉴权模型 ID 不要用纯自增数字容易被人遍历。用一个 UUID 或者带上签名参数并在服务端校验来源。6.2 分享到社交平台Web Share API 和 Open Graph手机端分享最推荐 Web Share API它能让系统弹出原生分享面板用户直接发给微信、钉钉、系统短信完全不脱离页面。async function sharePage(shareUrl) { if (navigator.share) { try { await navigator.share({ title: document.title, text: 看看这个3D模型, url: shareUrl }); } catch (err) { // 用户取消分享 } return; } await navigator.clipboard.writeText(shareUrl); // 提示用户链接已复制 }但有一个前提Web Share API 只能在 HTTPS 或 localhost 环境下使用并且必须由用户手势触发不要在页面加载后自动调用。分享到微信、微博这些渠道时卡片预览会使用抓取器拿到的 meta 标签抓取器不会执行你的 JS所以标题、描述、缩略图必须在服务端渲染的 HTML 里就存在meta propertyog:title content某产品 3D 展示 / meta propertyog:description content在网页里查看产品细节支持旋转缩放 / meta propertyog:image contenthttps://your.site/static/preview.png / meta propertyog:url contenthttps://your.site/view?modelcup /og:image建议用模型渲染的静态效果图。常见做法是上传模型后在服务端用 Blender 或 Three.js headless 预渲染一张 PNG也可以直接调建模软件出一张渲染图。6.3 在浏览器里导出 GLB让用户带走有的场景里访客看完后想把模型下载下来拿去二次编辑、3D 打印或者存进自己的素材库。Three.js 示例里的GLTFExporter可以直接把当前场景导出成 GLBimport { GLTFExporter } from three/addons/exporters/GLTFExporter.js; function exportGLB(model) { const exporter new GLTFExporter(); exporter.parse( model, (result) { const blob result instanceof ArrayBuffer ? new Blob([result], { type: model/gltf-binary }) : new Blob([JSON.stringify(result)], { type: application/json }); const a document.createElement(a); a.href URL.createObjectURL(blob); a.download model.glb; a.click(); URL.revokeObjectURL(a.href); }, (err) console.error(err), { binary: true } ); }注意传递的是你加载后做过材质修改的model而不是整个 scene。整棵 scene 里还挂着一堆灯光和控制相关的对象导出去反而污染了模型数据。如果你改过材质颜色导出的 GLB 会保留这些改动算是一个很自然的“分享当前配色”能力。6.4 嵌入到别的页面iframe 和 postMessage你的模型展示做得再好别人不一定愿意跳到你的站点里看。提供一个 iframe 嵌入片段能显著提升传播率。常见的做法是给链接加一个embed1参数嵌入模式下隐藏页头页脚只保留 canvas。iframe srchttps://your.site/view?modelcupembed1 stylewidth: 100%; height: 480px; border: 0; border-radius: 12px /iframe如果宿主网站想跟模型页面通信比如“点按钮让模型换个颜色”可以在 iframe 内部监听message事件window.addEventListener(message, (e) { switch (e.data?.type) { case setColor: // 根据 e.data.color 改材质颜色 break; case turnTo: // 根据 e.data.angle 旋转相机 break; case playAnimation: // 触发动画播放 break; } });这个方案适合服务商给客户做白标产品客户不需要理解 Three.js只要在自己的后台页面嵌入 iframe再用 postMessage 发指令就能控制模型。7. 我踩过且希望你避开的几个坑7.1 渲染效果差的头号原因没有环境贴图只有一盏灯这个坑我重复踩过两次。第一次是把产品模型放进场景加了环境光和方向光觉得效果还行直到客户发来一张建模软件截图说“为什么网页里的塑料质感完全没有了”。原因就是没有环境贴图材质没有反射信息所有金属质感和明暗渐变都丢了。加上 RoomEnvironment 之后效果立刻提升了一个档次。这里要特别强调环境贴图不是“美化选项”而是 PBR 材质正常工作的基础。7.2 阴影是“帧率杀手”阴影很吃 GPU。开了阴影以后每个能投射阴影的灯光都要额外渲染一张深度图场景里的阴影接收物体越多开销越大。移动端上动不动就掉到 20 帧以下。我的建议是能不开就不开确需开启时用renderer.shadowMap.enabled和renderer.shadowMap.type THREE.PCFSoftShadowMap同时限制 shadow camera 的范围别让整个场景都处在阴影计算范围内。如果产品本身很小也可以用一张假的“阴影贴图”或者地面阴影平面来模拟。7.3 Draco 压缩后的解压卡顿比网络体积更隐蔽Draco 压缩能显著减小体积但解压过程是纯 CPU 计算。某个中端安卓机上一个 3.5 MB 的 Draco GLB 加载后出现了差不多一秒的明显卡顿用户以为页面死了。后来我用未压缩的版本对比发现网络时间省了CPU 解压时间反而更让人难受。最终方案是给低端机型走未压缩的低模版本高端机用完整压缩版。真机测试里特别是两年前的手机一定要模拟弱网和低端 CPU 两种环境不要只看自己办公电脑上的加载速度。7.4 SPA 页面切走模型内存不会自动释放如果你的项目是后台系统用户可能从“3D 展示页”切到别的模块再切回来。如果只调用了scene.remove(model)内存里的几何体、纹理、材质全都还在每次切换都新建一份页面会越来越卡。正确做法是把模型里每个 Mesh 的 geometry 和 material 显式 disposefunction disposeModel(model) { model.traverse((child) { if (!child.isMesh) return; child.geometry.dispose(); const materials Array.isArray(child.material) ? child.material : [child.material]; materials.forEach((mat) { for (const key in mat) { if (mat[key] mat[key].isTexture) mat[key].dispose(); } mat.dispose(); }); }); scene.remove(model); }同时还要清掉事件监听器如果用了 OrbitControls记得controls.dispose()否则 canvas 的监听器也一直挂在内存里。7.5 低端移动端需要一套“低配通道”加载模型之前可以根据网络和硬件情况做降级用navigator.connection.effectiveType判断网络是 3G 还是 4G用navigator.deviceMemory和navigator.hardwareConcurrency判断设备强弱通过window.devicePixelRatio决定渲染分辨率上限准备一套无 Draco 或者低面数的 fallback 模型弱网时直接加载。这套逻辑写起来不复杂但对实际体感提升巨大。我见过很多项目在 iOS 旗舰机上跑得很流畅一到千元机就崩原因就是没有做降级。7.6 别忘了 prefers-reduced-motion如果你默认开启自动旋转有些用户在系统里设置了“减少动态效果”会比较反感页面自动动来动去。CSS 里有prefers-reduced-motion媒体查询JS 里可以用matchMedia((prefers-reduced-motion: reduce))检测检测到时关掉 autoRotate。这个细节不会花你太多时间但很能体现产品用心程度。最后说下我现在做这类项目固定的流程相当于给你一张能直接照抄的路线图第一步先拿原始模型导出 GLB用最简单的 model-viewer 或一个 three.js 页面跑起来确认渲染观感和基础交互第二步用 gltf-transform 或 gltfpack 压缩一遍记录体积再找一台旧手机实测帧率第三步根据业务需求决定热点用 DOM 浮层还是 CSS2D把点击、换色、动画接上去第四步把 URL 分享、下载、iframe 嵌入三个按钮补齐第五步上线前模拟弱网和低端机卡顿就回头改模型而不是只调代码。这套流程已经帮我顺利完成了好几个从 0 到 1 的展示型项目。做网页 3D 看着门槛高实际拆开后就是模型加工、渲染场景和交互事件三件事。技术选型会更新API 会变化但“先把模型减重再把场景跑通最后再谈玩法”这个顺序无论换什么引擎都不会过时。