以前我要翻三天文档、试七八种方案才能搭出来的模型交互管线它十几秒全吐出来。GLTF加载、PBR材质、后处理特效甚至我还没来得及想到的细节优化它都能自动补全。比如这段我让AI写一个简单得模型加载代码说实话我自己手写也就这个水平// AI生成的Three.js模型加载——标准环境完美运行 import { GLTFLoader } from three/examples/jsm/loaders/GLTFLoader.js; const loader new GLTFLoader(); loader.load( /assets/model.glb, (gltf) { scene.add(gltf.scene); console.log(模型加载成功); }, (progress) { console.log(加载进度: ${(progress.loaded / progress.total * 100).toFixed(2)}%); }, (error) { console.error(模型加载失败:, error); } );看起来没毛病对吧加载进度回调、错误处理该有的都有。那一刻说实话我后背是凉的。六年的经验在它面前好像瞬间贬值了。但我这个人有个毛病慌完就会开始找它的破绽。于是过去半年我干了一件事专门把AI写的Three.js代码往地狱环境里扔。什么是地狱环境不是你那台MacBook也不是Chrome最新版。是客户现场的工控机——Win7嵌入式、Chromium 49内核、核显、断网、安全软件还在后台悄悄删着东西。AI的代码在这里死得很惨。第一个翻车现场内网离线环境贴图全白AI生成的加载器用的路径是/assets/model.glb里面内嵌的纹理引用了一堆相对路径。本地没问题一丢到客户那台断网、没有外网DNS的内网服务器上——全白。控制台不报错GLTFLoader静默失败连error回调都没触发。AI根本不知道有些内网环境里浏览器连blob:协议都会被安全策略拦截。我最后改成了这样// 修复方案内网离线环境适配 import { GLTFLoader } from three/examples/jsm/loaders/GLTFLoader.js; const loader new GLTFLoader(); // 关键设置跨域策略接管纹理加载 loader.setCrossOrigin(anonymous); // 关键禁用外部资源请求强制所有纹理base64内嵌 loader.setResourcePath(); // 预检测当前环境是否支持blob协议 const isBlobSupported (() { try { const testBlob new Blob([test], { type: text/plain }); URL.createObjectURL(testBlob); return true; } catch (e) { return false; } })(); if (!isBlobSupported) { console.warn(当前环境不支持Blob协议纹理将降级为纯色材质); // 后续走降级渲染分支 }AI不会写这段。它没见过一个连Blob都跑不了的环境。第二个翻车现场老浏览器跑着跑着GPU上下文直接丢了AI写的渲染循环干净利落// AI生成的标准渲染循环 function animate() { requestAnimationFrame(animate); renderer.render(scene, camera); stats.update(); } animate();放在Chrome最新版稳如老狗。放到那台国产化双核浏览器的极速模式下跑不到五秒整个canvas黑掉。控制台抛出一个AI从来没处理过的东西WebGL: CONTEXT_LOST_WEBGL然后页面卡死什么动静都没了。用户刷新也没用因为浏览器已经把GPU进程挂起了。AI的代码里没有对这一行的任何防御。我加的修复// 修复方案老浏览器GPU上下文丢失防御 function animate() { requestAnimationFrame(animate); try { renderer.render(scene, camera); } catch (e) { // 捕获渲染异常避免整个循环崩溃 console.warn(渲染帧失败跳过当前帧:, e.message); return; } } // 核心接管上下文丢失事件 renderer.domElement.addEventListener(webglcontextlost, (event) { // 阻止默认行为争取恢复时间 event.preventDefault(); console.warn(WebGL上下文丢失2秒后尝试恢复...); // 暂停渲染释放部分GPU内存 cancelAnimationFrame(animationId); // 尝试上下文恢复 setTimeout(() { renderer.domElement.addEventListener(webglcontextrestored, () { console.log(上下文已恢复重新启动渲染); animate(); }, { once: true }); }, 2000); }, false); // 额外保险检测浏览器是否为国产双核 const isOldBrowser /360|LieBao|MetaSr/.test(navigator.userAgent); if (isOldBrowser) { // 降低像素比减少GPU内存压力 renderer.setPixelRatio(Math.min(window.devicePixelRatio, 1)); // 关闭阴影、后处理等耗GPU特性 renderer.shadowMap.enabled false; }这段代码放进去之后那台老机器跑了一个下午没再崩过。我盯着那些崩溃的日志突然笑了。不是嘲笑AI是松了一口气。原来它强是真的但它没见过真实世界也是真的。它的训练数据里全是理想环境。标准浏览器、最新API、完善网络、最新驱动——这些在真实工业现场是幻觉。它不是神它只是一个在完美环境里长大的学霸从来没踩过泥坑。而中国有多少这样的泥坑国产化双核浏览器、内网安全策略拦截、老旧的硬件必须继续跑、杀毒软件把WebGL当病毒……这些AI一行代码都解决不了。不是说它以后解决不了而是现在它真的干不了。想通这一点之后我的焦虑就过去了。不是因为我比AI聪明而是因为我想明白了接下来我要干什么AI负责在完美的环境里生成漂亮的Demo。我负责在真实的地狱里让它跑起来。它给我降本增效我给它擦屁股。它当大脑我当那个知道怎么在泥巴里走路的人。技术壁垒的确被冲垮了一道。但新的壁垒就在AI写的那堆代码跑死在客户现场的瞬间重新立了起来。所以现在我拥抱AI每天都在用。但也每天都在它的输出里找到了自己非存在不可的理由。这件事焦虑过现在清醒了。如果你也觉得技术被替代了别盯着它擅长的看。去把它写的代码扔到你最烂的一台设备上跑一下。答案就在那个报错里。技术交流 1203193731qq.com交流微信yeyunfeigc
我必须先说一句:AI写3D代码,确实强。
发布时间:2026/6/25 14:56:29
以前我要翻三天文档、试七八种方案才能搭出来的模型交互管线它十几秒全吐出来。GLTF加载、PBR材质、后处理特效甚至我还没来得及想到的细节优化它都能自动补全。比如这段我让AI写一个简单得模型加载代码说实话我自己手写也就这个水平// AI生成的Three.js模型加载——标准环境完美运行 import { GLTFLoader } from three/examples/jsm/loaders/GLTFLoader.js; const loader new GLTFLoader(); loader.load( /assets/model.glb, (gltf) { scene.add(gltf.scene); console.log(模型加载成功); }, (progress) { console.log(加载进度: ${(progress.loaded / progress.total * 100).toFixed(2)}%); }, (error) { console.error(模型加载失败:, error); } );看起来没毛病对吧加载进度回调、错误处理该有的都有。那一刻说实话我后背是凉的。六年的经验在它面前好像瞬间贬值了。但我这个人有个毛病慌完就会开始找它的破绽。于是过去半年我干了一件事专门把AI写的Three.js代码往地狱环境里扔。什么是地狱环境不是你那台MacBook也不是Chrome最新版。是客户现场的工控机——Win7嵌入式、Chromium 49内核、核显、断网、安全软件还在后台悄悄删着东西。AI的代码在这里死得很惨。第一个翻车现场内网离线环境贴图全白AI生成的加载器用的路径是/assets/model.glb里面内嵌的纹理引用了一堆相对路径。本地没问题一丢到客户那台断网、没有外网DNS的内网服务器上——全白。控制台不报错GLTFLoader静默失败连error回调都没触发。AI根本不知道有些内网环境里浏览器连blob:协议都会被安全策略拦截。我最后改成了这样// 修复方案内网离线环境适配 import { GLTFLoader } from three/examples/jsm/loaders/GLTFLoader.js; const loader new GLTFLoader(); // 关键设置跨域策略接管纹理加载 loader.setCrossOrigin(anonymous); // 关键禁用外部资源请求强制所有纹理base64内嵌 loader.setResourcePath(); // 预检测当前环境是否支持blob协议 const isBlobSupported (() { try { const testBlob new Blob([test], { type: text/plain }); URL.createObjectURL(testBlob); return true; } catch (e) { return false; } })(); if (!isBlobSupported) { console.warn(当前环境不支持Blob协议纹理将降级为纯色材质); // 后续走降级渲染分支 }AI不会写这段。它没见过一个连Blob都跑不了的环境。第二个翻车现场老浏览器跑着跑着GPU上下文直接丢了AI写的渲染循环干净利落// AI生成的标准渲染循环 function animate() { requestAnimationFrame(animate); renderer.render(scene, camera); stats.update(); } animate();放在Chrome最新版稳如老狗。放到那台国产化双核浏览器的极速模式下跑不到五秒整个canvas黑掉。控制台抛出一个AI从来没处理过的东西WebGL: CONTEXT_LOST_WEBGL然后页面卡死什么动静都没了。用户刷新也没用因为浏览器已经把GPU进程挂起了。AI的代码里没有对这一行的任何防御。我加的修复// 修复方案老浏览器GPU上下文丢失防御 function animate() { requestAnimationFrame(animate); try { renderer.render(scene, camera); } catch (e) { // 捕获渲染异常避免整个循环崩溃 console.warn(渲染帧失败跳过当前帧:, e.message); return; } } // 核心接管上下文丢失事件 renderer.domElement.addEventListener(webglcontextlost, (event) { // 阻止默认行为争取恢复时间 event.preventDefault(); console.warn(WebGL上下文丢失2秒后尝试恢复...); // 暂停渲染释放部分GPU内存 cancelAnimationFrame(animationId); // 尝试上下文恢复 setTimeout(() { renderer.domElement.addEventListener(webglcontextrestored, () { console.log(上下文已恢复重新启动渲染); animate(); }, { once: true }); }, 2000); }, false); // 额外保险检测浏览器是否为国产双核 const isOldBrowser /360|LieBao|MetaSr/.test(navigator.userAgent); if (isOldBrowser) { // 降低像素比减少GPU内存压力 renderer.setPixelRatio(Math.min(window.devicePixelRatio, 1)); // 关闭阴影、后处理等耗GPU特性 renderer.shadowMap.enabled false; }这段代码放进去之后那台老机器跑了一个下午没再崩过。我盯着那些崩溃的日志突然笑了。不是嘲笑AI是松了一口气。原来它强是真的但它没见过真实世界也是真的。它的训练数据里全是理想环境。标准浏览器、最新API、完善网络、最新驱动——这些在真实工业现场是幻觉。它不是神它只是一个在完美环境里长大的学霸从来没踩过泥坑。而中国有多少这样的泥坑国产化双核浏览器、内网安全策略拦截、老旧的硬件必须继续跑、杀毒软件把WebGL当病毒……这些AI一行代码都解决不了。不是说它以后解决不了而是现在它真的干不了。想通这一点之后我的焦虑就过去了。不是因为我比AI聪明而是因为我想明白了接下来我要干什么AI负责在完美的环境里生成漂亮的Demo。我负责在真实的地狱里让它跑起来。它给我降本增效我给它擦屁股。它当大脑我当那个知道怎么在泥巴里走路的人。技术壁垒的确被冲垮了一道。但新的壁垒就在AI写的那堆代码跑死在客户现场的瞬间重新立了起来。所以现在我拥抱AI每天都在用。但也每天都在它的输出里找到了自己非存在不可的理由。这件事焦虑过现在清醒了。如果你也觉得技术被替代了别盯着它擅长的看。去把它写的代码扔到你最烂的一台设备上跑一下。答案就在那个报错里。技术交流 1203193731qq.com交流微信yeyunfeigc