目录一、前言1、腾讯云AISkills的技术能力2、腾讯云AISkills的应用场景二、腾讯云混元生3D能力介绍1、混元生3D介绍2、混元生3D权威介绍三、环境准备1、在线开通2、安装Skill3、其他安装模式四、WorkBuddy生成自行车模型1、设置环境变量2、如何开通数据包3、成果展示五、Threejs加载GLB实现在线预览1、Hy3开发Threejs集成2、让3D自行车转起来六、模型分拆七、总结曾几何时建模工程师非常火任务量很大企业想要建模需要很长的实践。众所周知的原因传统3D建模依赖专业设计师、建模软件与大量调优时间门槛高、效率低普通开发者与爱好者很难快速产出高精度3D资产。本文基于腾讯云AISkills生态手把手讲解如何通过WorkBuddy智能工具联动混元生3D能力零专业建模基础快速生成高精度美利达自行车3D模型同时搭配Three.js实现GLB模型在线渲染、动态旋转预览、最后还可以生成一个可以拆解的模型完整复刻从AI建模到Web端3D展示的全流程为Web3D开发、数字孪生、虚拟素材制作提供轻量化落地方案。一、前言1、腾讯云AISkills的技术能力随着AI生成式技术的全面落地传统开发模式正在被重构尤其是3D内容创作领域长期存在门槛高、周期长、成本高、复用率低的痛点。3D建模需要熟练掌握3ds Max、Blender等专业软件且模型拓扑结构、纹理贴图、比例校准都需要大量经验积累对于普通IT开发者、前端工程师、轻量化项目开发者而言很难快速产出合规、可用的3D数字资产。腾讯云AISkills是腾讯云推出的AI技能生态服务平台聚焦降低AI技术落地门槛整合腾讯全系AI能力、工具组件与开发套件将复杂的AI模型训练、推理、调用流程封装为标准化、轻量化的可落地技能。平台无需开发者深耕底层算法通过可视化操作、一键部署、工具联动的方式即可快速调用文生图、文生3D、智能创作、数据处理等各类AI能力完美适配个人开发者学习、中小企业轻量化项目落地、行业场景快速迭代等多元化需求。区别于传统单一AI工具腾讯云AISkills主打生态化、组合式、低代码特性支持各类AI技能自由搭配、工具联动让AI能力不再孤立能够快速搭建完整的业务流程大幅降低AI3D、AI办公、AI开发等场景的落地成本。如下所示腾讯云 AI Skills 技能矩阵2、腾讯云AISkills的应用场景大家可以在SkillHub上找到你感兴趣的场景分类真的非常丰富应有尽有腾讯元AISKILL地址。SkillHub全场景依托丰富的AI技能矩阵与灵活的工具联动能力腾讯云AISkills已覆盖多个主流技术与行业场景尤其在轻量化数字创作领域优势显著核心应用场景如下轻量化3D内容创作无需专业建模技能通过文生3D、图生3D能力快速生成交通工具、生活用品、场景道具等标准化3D模型适配个人创作、Demo开发、轻量化虚拟场景搭建。Web3D快速开发为前端开发者提供低成本3D模型素材搭配Three.js等前端渲染框架快速实现网页3D展示、交互、动画效果赋能官网可视化、数字展厅、产品3D展示等项目。智能办公与自动化结合WorkBuddy智能助手实现任务自动化编排、工具一键调用、流程自动化处理提升开发、办公、素材制作效率。数字孪生与虚拟场景搭建快速批量生成场景内轻量化资产降低数字孪生、元宇宙场景、虚拟仿真项目的素材制作成本与周期。教育与技术实训为IT学习者、前端开发者、AI爱好者提供零门槛实操平台快速上手AI建模、Web3D渲染等前沿技术无需高额硬件与软件成本。二、腾讯云混元生3D能力介绍1、混元生3D介绍混元生3D是腾讯云自研的高精度文生3D/图生3D生成模型也是AISkills生态中3D创作场景的核心能力专为轻量化、高效率3D资产生成设计彻底解决传统AI建模细节模糊、拓扑混乱、纹理失真、模型不可用的痛点。相较于市面主流3D生成工具混元生3D具备四大核心优势高精度细节还原采用3D-DiT分级雕刻架构兼顾物体整体结构比例与局部细节针对自行车、汽车、生活用品等标准化工业品可精准还原外观结构、零部件比例生成的美利达自行车模型车架、车轮、变速器、座椅等细节完整。多生成模式适配支持文本Prompt生成与图片参考生成两种模式可通过精准文字描述生成模型也可上传美利达自行车参考图优化生成效果适配不同创作需求。标准格式输出默认输出GLB、GLTF通用3D格式完美兼容Three.js、Unity、Unreal等主流开发引擎无需格式转换可直接用于Web渲染、项目开发、虚拟场景搭建。轻量化高效率生成速度快、模型体积轻量化兼顾画质与加载速度尤其适配Web端在线预览、轻量化项目落地无需高端显卡算力支持普通电脑即可完成生成任务。本次实践核心依托混元生3D的文生3D能力结合WorkBuddy的自动化工具编排实现无需手动调试、一键生成合规可用的美利达自行车3D模型。2、混元生3D权威介绍可以看到混元3D技能非常实用包含了多种驱动方式以及如何安装SKILL。当然也包括使用WorkBuddy来进行辅助生成。混元生3D支持特性文生3D支持文本描述生成 3D 模型最多 1024 字符图生3D支持输入图片 URL 或 Base64 生成 3D 模型多视角图片支持 left/right/back/top/bottom/left_front/right_front 多视角输入PBR 材质支持开启 PBR 材质生成自定义面数支持 10000-1500000 面数范围多种生成类型Normal带纹理、LowPoly智能拓扑、Geometry白模、Sketch草图生成多种输出格式默认 objglb可选 STL、USDZ、FBX模型版本选择支持 3.0 和 3.1 版本自动安装依赖首次运行时自动安装所需 SDK智能凭证检测优先从环境变量获取密钥未配置时提示用户开通三、环境准备本次实操全程基于腾讯云AISkills生态基于本地环境配置支持在线快速开通、轻量化部署个人电脑均可流畅运行以下是完整的环境搭建步骤。1、在线开通第一步账号注册与实名认证。登录腾讯云官网注册个人账号并完成实名认证腾讯云AISkills与混元生3D服务均需实名认证后才可开通使用这是后续所有操作的基础。第二步进入AISkills技能平台。搜索进入【腾讯云AISkills】控制台进入技能市场主界面平台汇总了所有可开通的AI能力。第三步开通混元生3D基础服务。在技能市场搜索「混元生3D」混元生3D进入服务详情页阅读并同意服务协议点击一键开通开通后自动获得基础调用权限与免费额度足够完成本次模型生成实操。第四步获取密钥凭证。进入腾讯云账号密钥管理页面获取个人专属 SecretId 与 SecretKey后续WorkBuddy工具联动、接口调用均需要该密钥完成权限校验需妥善保存避免泄露。访问地址。2、安装Skill完成在线服务开通后需安装对应AISkills技能组件实现WorkBuddy与混元生3D的能力联动具体操作如下1. 在AISkills控制台左侧菜单栏进入【技能管理】-【可安装技能】在WorkBuddy中可以输入以下提示词如下图所示请根据 https://skillhub.cn/install/skillhub.md安装 tencent-adm/hy-3d-generation。稍等片刻后就可以看到安装成功2. 筛选并选中「混元生3D联动技能」点击安装等待1-2分钟完成技能部署3. 安装完成后需要配置两个重要的值分别是TENCENTCLOUD_SECRET_ID和TENCENTCLOUD_SECRET_KEY命令如下$env:TENCENTCLOUD_SECRET_ID 你的SecretId $env:TENCENTCLOUD_SECRET_KEY 你的SecretKey4. 绑定权限将之前获取的腾讯云密钥填入技能配置面板完成权限绑定确保工具可正常调用3D生成能力。3、其他安装模式除了在线可视化安装技能外平台支持两种轻量化离线/本地部署模式适配不同使用场景命令行安装模式适合习惯终端操作的开发者通过官方适配的CLI工具执行简单安装命令即可快速部署技能支持批量安装、版本更新效率更高。本地SDK部署模式适合需要二次开发、私有化部署的场景下载AISkills官方SDK本地引入混元生3D能力包可自定义配置参数、封装专属调用接口适配个性化项目需求。新手用户优先选择在线安装模式零代码、零配置快速上手实操。四、WorkBuddy生成自行车模型WorkBuddy是腾讯云AISkills生态下的智能任务助手核心作用是自动化串联各类AI技能无需手动操作控制台、无需编写复杂调用代码通过简单配置即可一键触发混元生3D能力批量生成、优化3D模型大幅简化操作流程。1、设置环境变量首先完成WorkBuddy本地环境变量配置实现工具与腾讯云AI服务的权限互通1. 下载安装WorkBuddy客户端支持Windows、macOS双系统安装完成后使用QQ/企业微信扫码登录登录账号需与腾讯云实名认证账号一致2. 打开系统环境变量配置面板新增两项核心环境变量填入之前保存的腾讯云密钥3. 保存环境变量并重启WorkBuddy客户端在客户端内置检测工具中验证环境配置显示「权限校验通过」即为配置成功4. 额外配置模型生成参数默认模型精度为标准版可在WorkBuddy设置中开启「高清纹理渲染」提升美利达自行车模型的细节质感。接下来就开始使用自然语言来生成自行车模型看在WorkBuddy中会发生什么2、如何开通数据包为保障3D模型生成的精准度需在WorkBuddy中开通对应创作数据包适配交通工具类模型生成场景1. 进入WorkBuddy客户端【技能中心】找到已绑定的「混元生3D」技能2. 点击【数据包管理】在官方公共数据包中点击一键开通数据包免费额度内可直接启用开通后自动加载至当前AI生成任务这大概有100积分是免费的一年内有效大家使用功能基本够了3. 输入精准生成Prompt指导模型生成目标模型本次实操Prompt如下生成一辆高精度美利达山地自行车3D模型整体比例标准车架、车轮、变速器、座椅、刹车系统细节完整 哑光车身纹理标准骑行姿态无多余杂物输出GLB通用格式4. 在WorkBuddy中点击【一键生成】等待3-5分钟模型自动完成结构生成、纹理渲染、格式导出全程无需人工干预。3、成果展示通过WorkBuddy混元生3D生成的美利达自行车3D模型效果优异完全满足轻量化开发与展示需求结构完整完美还原美利达山地车整体结构车架几何比例、车轮尺寸、零部件布局贴合真实车型无模型扭曲、结构缺失问题细节清晰车身纹理细腻车架纹路、轮胎纹路、金属配件质感真实变速器、刹车等细小部件辨识度高格式通用自动导出标准GLB格式文件文件体积轻量化无冗余数据可直接兼容Web端、各类3D引擎可用性强模型拓扑结构规范无破面、重叠面问题支持后续渲染、动画编辑、场景拼接等二次处理。当然虽然系统生成了对应的三维模型但是不能直接打开GLB格式的文件可以先来看一下照片截图。虽然这个模型不大来看一下混元生3D的这一次模型生成耗费了多少这一次建模过程花掉了20积分虽然效果还行但是积分消耗挺快的。五、Threejs加载GLB实现在线预览在生成GLB格式的美利达自行车模型后我们为实现Web端可视化展示计划结合Three.js框架完成模型加载、渲染、动态旋转效果开发实现浏览器端在线3D预览。继续使用WorkBuddy的设计能力输入以下提示词设计一个Threejs页面用来展示glb模型1、Hy3开发Threejs集成腾讯云AI3D场景的轻量化前端开发简化了Three.js的初始化、场景搭建、模型加载流程适配AI生成3D模型的快速预览需求集成步骤如下1. 搭建基础前端项目引入Three.js核心库与GLB加载器通过CDN快速引入无需本地复杂配置script srchttps://cdn.jsdelivr.net/npm/three0.158.0/build/three.min.js/script script srchttps://cdn.jsdelivr.net/npm/three0.158.0/examples/js/loaders/GLBLoader.js/script2. 初始化Three.js基础场景包含场景、相机、渲染器、灯光四大核心要素适配网页全屏预览// 初始化场景 const scene new THREE.Scene(); // 初始化相机 const camera new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); // 初始化渲染器 const renderer new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // 添加环境光与平行光优化模型质感 const light new THREE.AmbientLight(0xffffff, 0.8); scene.add(light);3. 通过GLBLoader加载生成的美利达自行车模型配置加载回调处理加载成功、失败、加载中状态const loader new THREE.GLBLoader(); loader.load(./merida-bike.glb, (gltf) { // 加载成功后将模型加入场景 const bikeModel gltf.scene; scene.add(bikeModel); // 调整相机位置适配模型展示 camera.position.z 8; }, (xhr) { // 加载进度监听 console.log(模型加载进度, (xhr.loaded / xhr.total * 100) %); }, (error) { // 加载错误捕获 console.error(模型加载失败, error); });2、让3D自行车转起来为提升在线预览效果添加自动旋转动画实现模型360°循环展示完整动画代码如下// 动画渲染函数 function animate() { requestAnimationFrame(animate); // 模型Y轴自动旋转 if (bikeModel) { bikeModel.rotation.y 0.005; } renderer.render(scene, camera); } // 启动动画 animate(); // 适配窗口大小变化 window.addEventListener(resize, () { camera.aspect window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); });完成代码部署后直接打开HTML文件即可在浏览器中查看自动360°旋转的美利达3D自行车模型画面流畅、纹理清晰支持全屏预览、窗口自适应完美实现Web端轻量化3D展示效果。开发者可基于该基础代码继续拓展鼠标拖拽旋转、缩放、模型点击交互、材质修改等进阶功能。功能说明️ 轨道控制左键旋转、滚轮缩放、右键平移带阻尼手感顺滑 PBR 环境光用RoomEnvironment做 IBL 反射金属车架/橡胶轮胎质感更真实 自动旋转默认开启可调速度0.5–6交互时自动暂停 自动取景加载后自动计算包围盒、居中落到地面、适配相机距离 线框模式一键切换线框看结构很方便 地面网格可开关的参考网格 软阴影 保存截图一键导出当前视角 PNG 重置视角回到最佳观察角度 拖拽替换把任意.glb/.gltf拖入窗口即可换模型来看一下以下的效果是不是特别赞效果跟真实的自行车非常接近了。六、模型分拆通常三维场景的建模大抵到这里就足够了GLB文件已经生成通过Threejs也已经正常展示。那么在一些精细化的场景下比如需要对模型进行分拆看看模型是组合组装的这里演示集中生成场景。可以基于glb的模型实现车辆的各个部件进行拆解的视图吗来看下系统给出什么回应如下图需要说明的是使用混元生3D的能力暂时不具备完全独立能力的组件分拆因为模型都是通过绘制出来的但是系统提供了按照车长、垂直和车款三个方向来对模型进行拆分。下面分别来看下实现原理和成果。模型分解原理如下接下来看一下对完全生成的GLB模型的分拆能力展示按车长来分拆按垂直方向拆按车宽来拆从以上效果图可以看出针对生成GLB的分拆相比原生模型的单个零件建模。这里只能按照角度来分拆仅演示效果。在拆解的过程中还发生了一点小插曲拆分按钮无法点击针对这种问题WorkBuddy快速的解决了系统恢复正常。七、总结本次实战完整落地了腾讯云AISkillsWorkBuddy混元生3DThree.js的AI 3D建模与Web渲染全流程全程无需专业3D建模功底、无需高端算力设备依托腾讯云生态的轻量化能力快速产出可用的高精度美利达自行车3D模型并实现网页端在线动态预览。通过本次实践可以发现腾讯云AISkills生态的核心价值在于打破技术壁垒、简化落地流程将原本需要设计师数小时的建模工作压缩至数分钟完成同时通过工具联动、标准化格式输出、前端轻量化渲染实现了从AI创作到Web落地的无缝衔接。对于IT开发者、前端工程师、技术爱好者而言这套方案具备极高的复用性可快速迁移到汽车、家电、道具等各类3D素材制作场景广泛应用于产品展示、数字孪生、虚拟场景、教学Demo等项目。未来可基于AISkills生态进一步拓展能力结合AI贴图、AI动画、模型轻量化压缩等技能打造更完整的AI 3D内容生产流水线。后续大家可以基于本文教程自由尝试自定义Prompt生成不同款式、不同配色的美利达自行车模型结合Three.js拓展更多交互功能挖掘腾讯云AISkills生态更多轻量化AI落地玩法。