尧图网页设计 
floorplan-3d 如何生成逼真地面材质木纹、大理石、水磨石 Canvas 程序化贴图完整指南【免费下载链接】floorplan-3d项目地址: https://gitcode.com/gh_mirrors/fl/floorplan-3dfloorplan-3d是一款纯前端的户型装修设计工具在 2D 平面图上摆放家具、拆改墙体一键切换 Three.js 3D 场景鸟瞰或第一人称漫游。它能渲染出逼真的木纹、大理石、水磨石地面秘诀不是找图片素材而是用Canvas 程序化贴图——一张图片都不用全部靠代码画出来。本文带你完整看懂它的生成原理并学会替换、扩展地面材质。为什么用程序化贴图零素材依赖、体积小、可按真实尺寸无限平铺、还能用种子随机数保证每次生成结果一致。这也是很多轻量 3D 应用的首选方案。项目简介与快速上手打开即用无需构建整个应用就是一个 index.html无任何框架和构建步骤浏览器打开即可运行首次进入 3D 场景需联网加载 Three.jsgit clone https://gitcode.com/gh_mirrors/fl/floorplan-3d cd floorplan-3d python3 -m http.server 8000 # 浏览器访问 http://localhost:8000界面右侧面板支持为每个房间切换地面材料橡木地板、胡桃木地板、800 地砖、大理石、水磨石、地毯等共 8 种材料定义在 index.html 的MATS表中含名称与单价用于造价估算。核心原理一张 Canvas 画布就是整张贴图3D 地面贴图的生成入口是floorMat()函数位于 index.html。它的工作流程只有四步用种子随机数rng()生成可复现的随机序列同一材料永远画出同一张图创建一块canvas画布用 2D 上下文画出材质图案包装成THREE.CanvasTexture按真实尺寸设置平铺重复次数挂到MeshStandardMaterial上赋予不同的粗糙度。每种材料在 index.html 的TEX表中有一行参数三个字段最关键字段含义示例木纹sx/sy一张贴图代表的真实尺寸米1.8 × 0.36即一块地板的长宽base底色#d6b58a橡木浅棕rough材质粗糙度0.55偏哑光 注意按真实尺寸平铺这个细节1.8m × 0.36m 恰好是常见木地板的规格。因为贴图世界尺寸真实走到近处看木纹粗细才不会出现放大变糊的违和感。木纹地板双色错缝 正弦曲线画木纹木纹贴图画在 1024 × 205 的画布上对应 1.8m 长的两排板条见 index.html绘制分三层错缝铺板第一排板条在 2/3 处断开第二排在 1/3 处断开模拟真实木地板的错缝铺设色差每块板条的底色 基准色 × (0.9 ~ 1.1) 的随机系数板与板之间自然出现深浅变化木纹每块板内画 7 条半透明细线纵坐标叠加Math.sin(x*0.02 k)*2.5的正弦扰动形成微微弯曲的木纤维走向。const rowH Hh/2, joints [[W*2/3], [W/3]]; for (let r 0; r 2; r){ [...joints[r], W].forEach(x1 { g.fillStyle rgbK(s.base, .9 R()*.2); // 每块板随机色差 g.fillRect(x0, r*rowH, x1-x0, rowH); for (let k 0; k 7; k){ // 7 条弯曲木纹 const y r*rowH 6 R()*(rowH-12); g.moveTo(x0, y); for (let x x0; x x1; x 40) g.lineTo(x, y Math.sin(x*.02 k)*2.5); g.stroke(); } }); } 小技巧rgbK(hex, k)是配套的颜色缩放函数index.html传入k 1变亮、k 1变暗——改材质配色时用它比手改色值方便得多。大理石纹理6 条贝塞尔曲线随机走出石纹大理石最迷人的是天然石纹。floorplan-3d 的做法非常聪明在 512 × 512 的浅米色底上用bezierCurveTo画出 6 条贯穿画布的随机贝塞尔曲线模拟大理石石纹脉络index.htmlg.strokeStyle rgba(160,150,135,.35); // 半透明灰褐色石纹 for (let k 0; k 6; k){ g.lineWidth 1 R()*3; // 粗细随机1~4px g.beginPath(); g.moveTo(R()*W, 0); g.bezierCurveTo(R()*W, R()*Hh, R()*W, R()*Hh, R()*W, Hh); g.stroke(); }每条纹路的起点、两个控制点、终点全部随机线宽 1~4px 不等、透明度统一压低——乱中有序恰好接近天然大理石的观感。再配合rough: 0.18的低粗糙度3D 场景中大理石地面还会反射环境光通体透亮。水磨石 Terrazzo160 颗随机彩色颗粒水磨石是水泥里混入石粒打磨出的材料。程序化做法就是撒点在暖灰底色上随机撒160 颗彩色圆点半径 2~9px颜色从 5 色石料色板中轮换index.htmlconst cs [#b9a58c,#8fa3a0,#c9b7a2,#a88f76,#7e8a86]; for (let k 0; k 160; k){ g.fillStyle cs[k % 5]; g.beginPath(); g.arc(R()*W, R()*Hh, 2 R()*7, 0, 7); g.fill(); } 调参思路颗粒越多越密、半径上限越大看起来越豪放色板换成冷色系就是另一款工业风水磨石。地砖与防滑砖网格线 噪点颗粒非特殊材质800 地砖、600 地砖、300 防滑砖走通用分支先撒 1500 个低透明度噪点模拟表面颗粒index.html再沿画布顶边和左边画一条填缝线grout色。由于贴图会RepeatWrapping重复平铺这两条线在整个地面上就变成了完整的砖缝网格if (s.grout){ g.fillStyle s.grout; g.fillRect(0, 0, W, 3); // 顶部一条缝 g.fillRect(0, 0, 3, Hh); // 左侧一条缝 }800 地砖的sx/sy是 0.8即每条缝间隔 0.8m与真实 800mm 规格砖完全一致。贴图应用细节RepeatWrapping 与真实比例画完画布后floorMat()把它变成 3D 材质index.html三个细节决定最终观感const t new THREE.CanvasTexture(cv); t.wrapS t.wrapT THREE.RepeatWrapping; // 双向无限平铺 t.repeat.set(1/s.sx, 1/s.sy); // 每米重复几次 1/真实尺寸 t.colorSpace THREE.SRGBColorSpace; // 颜色空间正确 t.anisotropy renderer.capabilities.getMaxAnisotropy(); // 斜视不糊RepeatWrappingrepeatUV 单位是米repeat设为真实尺寸的倒数房间再大贴图也按比例平铺永不变形最大各向异性过滤从低角度看地面时贴图依然清晰粗糙度分层大理石 0.18高反光→ 木纹 0.55哑光→ 地毯 1.0全吸光光影质感立刻不同。生成的材质会缓存进floorMats每个房间按当前材料取值在 index.html 的buildArch()中铺到对应的地面上。实践切换地面材料、估算造价并扩展新材质一键切换房间地面在应用中选择任意房间2D 点击平面图或 3D 点地面右侧面板会出现 8 种材料按钮点一下即刻生效2D 平面图的 SVG 填充、3D 场景的贴图、造价统计三方同步。该逻辑见 index.html。三步扩展一种新材质想加复古水泥地面照着现有模式改三处即可MATS表index.html加一行cement: {name:水泥, price:120, sw:#c8c8c4}决定它出现在材料列表和造价统计里TEX表index.html加一行参数cement:{sx:1, sy:1, base:#c8c8c4, rough:.9}定义贴图真实尺寸与粗糙度floorMat()index.html的else分支里补几行画布代码——比如多撒几道深色划痕线条。2D 平面图用的是另一套 SVGpatternindex.html 的buildDefs()如需平面视图也显示新材质在那里同步加一个pattern即可。小结floorplan-3d 用不到 40 行画布代码实现了 8 种风格迥异的地面效果核心可复用经验种子随机数保证贴图每次生成一致避免刷新就变样贴图按真实尺寸平铺UV 单位 米近看细节不穿帮颜色缩放函数 低透明度叠加是画出真实材质的通用手法⚡CanvasTexture RepeatWrapping 最大各向异性是轻量 3D 贴图的黄金组合。全部源码集中在单文件 index.html从floorMat()读起是最快的学习路径。动手改改参数下一个逼真地面就是你的。【免费下载链接】floorplan-3d项目地址: https://gitcode.com/gh_mirrors/fl/floorplan-3d创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 floorplan-3d 如何生成逼真地面材质：木纹、大理石、水磨石 Canvas 程序化贴图完整指南
floorplan-3d 如何生成逼真地面材质木纹、大理石、水磨石 Canvas 程序化贴图完整指南【免费下载链接】floorplan-3d项目地址: https://gitcode.com/gh_mirrors/fl/floorplan-3dfloorplan-3d是一款纯前端的户型装修设计工具在 2D 平面图上摆放家具、拆改墙体一键切换 Three.js 3D 场景鸟瞰或第一人称漫游。它能渲染出逼真的木纹、大理石、水磨石地面秘诀不是找图片素材而是用Canvas 程序化贴图——一张图片都不用全部靠代码画出来。本文带你完整看懂它的生成原理并学会替换、扩展地面材质。为什么用程序化贴图零素材依赖、体积小、可按真实尺寸无限平铺、还能用种子随机数保证每次生成结果一致。这也是很多轻量 3D 应用的首选方案。项目简介与快速上手打开即用无需构建整个应用就是一个 index.html无任何框架和构建步骤浏览器打开即可运行首次进入 3D 场景需联网加载 Three.jsgit clone https://gitcode.com/gh_mirrors/fl/floorplan-3d cd floorplan-3d python3 -m http.server 8000 # 浏览器访问 http://localhost:8000界面右侧面板支持为每个房间切换地面材料橡木地板、胡桃木地板、800 地砖、大理石、水磨石、地毯等共 8 种材料定义在 index.html 的MATS表中含名称与单价用于造价估算。核心原理一张 Canvas 画布就是整张贴图3D 地面贴图的生成入口是floorMat()函数位于 index.html。它的工作流程只有四步用种子随机数rng()生成可复现的随机序列同一材料永远画出同一张图创建一块canvas画布用 2D 上下文画出材质图案包装成THREE.CanvasTexture按真实尺寸设置平铺重复次数挂到MeshStandardMaterial上赋予不同的粗糙度。每种材料在 index.html 的TEX表中有一行参数三个字段最关键字段含义示例木纹sx/sy一张贴图代表的真实尺寸米1.8 × 0.36即一块地板的长宽base底色#d6b58a橡木浅棕rough材质粗糙度0.55偏哑光 注意按真实尺寸平铺这个细节1.8m × 0.36m 恰好是常见木地板的规格。因为贴图世界尺寸真实走到近处看木纹粗细才不会出现放大变糊的违和感。木纹地板双色错缝 正弦曲线画木纹木纹贴图画在 1024 × 205 的画布上对应 1.8m 长的两排板条见 index.html绘制分三层错缝铺板第一排板条在 2/3 处断开第二排在 1/3 处断开模拟真实木地板的错缝铺设色差每块板条的底色 基准色 × (0.9 ~ 1.1) 的随机系数板与板之间自然出现深浅变化木纹每块板内画 7 条半透明细线纵坐标叠加Math.sin(x*0.02 k)*2.5的正弦扰动形成微微弯曲的木纤维走向。const rowH Hh/2, joints [[W*2/3], [W/3]]; for (let r 0; r 2; r){ [...joints[r], W].forEach(x1 { g.fillStyle rgbK(s.base, .9 R()*.2); // 每块板随机色差 g.fillRect(x0, r*rowH, x1-x0, rowH); for (let k 0; k 7; k){ // 7 条弯曲木纹 const y r*rowH 6 R()*(rowH-12); g.moveTo(x0, y); for (let x x0; x x1; x 40) g.lineTo(x, y Math.sin(x*.02 k)*2.5); g.stroke(); } }); } 小技巧rgbK(hex, k)是配套的颜色缩放函数index.html传入k 1变亮、k 1变暗——改材质配色时用它比手改色值方便得多。大理石纹理6 条贝塞尔曲线随机走出石纹大理石最迷人的是天然石纹。floorplan-3d 的做法非常聪明在 512 × 512 的浅米色底上用bezierCurveTo画出 6 条贯穿画布的随机贝塞尔曲线模拟大理石石纹脉络index.htmlg.strokeStyle rgba(160,150,135,.35); // 半透明灰褐色石纹 for (let k 0; k 6; k){ g.lineWidth 1 R()*3; // 粗细随机1~4px g.beginPath(); g.moveTo(R()*W, 0); g.bezierCurveTo(R()*W, R()*Hh, R()*W, R()*Hh, R()*W, Hh); g.stroke(); }每条纹路的起点、两个控制点、终点全部随机线宽 1~4px 不等、透明度统一压低——乱中有序恰好接近天然大理石的观感。再配合rough: 0.18的低粗糙度3D 场景中大理石地面还会反射环境光通体透亮。水磨石 Terrazzo160 颗随机彩色颗粒水磨石是水泥里混入石粒打磨出的材料。程序化做法就是撒点在暖灰底色上随机撒160 颗彩色圆点半径 2~9px颜色从 5 色石料色板中轮换index.htmlconst cs [#b9a58c,#8fa3a0,#c9b7a2,#a88f76,#7e8a86]; for (let k 0; k 160; k){ g.fillStyle cs[k % 5]; g.beginPath(); g.arc(R()*W, R()*Hh, 2 R()*7, 0, 7); g.fill(); } 调参思路颗粒越多越密、半径上限越大看起来越豪放色板换成冷色系就是另一款工业风水磨石。地砖与防滑砖网格线 噪点颗粒非特殊材质800 地砖、600 地砖、300 防滑砖走通用分支先撒 1500 个低透明度噪点模拟表面颗粒index.html再沿画布顶边和左边画一条填缝线grout色。由于贴图会RepeatWrapping重复平铺这两条线在整个地面上就变成了完整的砖缝网格if (s.grout){ g.fillStyle s.grout; g.fillRect(0, 0, W, 3); // 顶部一条缝 g.fillRect(0, 0, 3, Hh); // 左侧一条缝 }800 地砖的sx/sy是 0.8即每条缝间隔 0.8m与真实 800mm 规格砖完全一致。贴图应用细节RepeatWrapping 与真实比例画完画布后floorMat()把它变成 3D 材质index.html三个细节决定最终观感const t new THREE.CanvasTexture(cv); t.wrapS t.wrapT THREE.RepeatWrapping; // 双向无限平铺 t.repeat.set(1/s.sx, 1/s.sy); // 每米重复几次 1/真实尺寸 t.colorSpace THREE.SRGBColorSpace; // 颜色空间正确 t.anisotropy renderer.capabilities.getMaxAnisotropy(); // 斜视不糊RepeatWrappingrepeatUV 单位是米repeat设为真实尺寸的倒数房间再大贴图也按比例平铺永不变形最大各向异性过滤从低角度看地面时贴图依然清晰粗糙度分层大理石 0.18高反光→ 木纹 0.55哑光→ 地毯 1.0全吸光光影质感立刻不同。生成的材质会缓存进floorMats每个房间按当前材料取值在 index.html 的buildArch()中铺到对应的地面上。实践切换地面材料、估算造价并扩展新材质一键切换房间地面在应用中选择任意房间2D 点击平面图或 3D 点地面右侧面板会出现 8 种材料按钮点一下即刻生效2D 平面图的 SVG 填充、3D 场景的贴图、造价统计三方同步。该逻辑见 index.html。三步扩展一种新材质想加复古水泥地面照着现有模式改三处即可MATS表index.html加一行cement: {name:水泥, price:120, sw:#c8c8c4}决定它出现在材料列表和造价统计里TEX表index.html加一行参数cement:{sx:1, sy:1, base:#c8c8c4, rough:.9}定义贴图真实尺寸与粗糙度floorMat()index.html的else分支里补几行画布代码——比如多撒几道深色划痕线条。2D 平面图用的是另一套 SVGpatternindex.html 的buildDefs()如需平面视图也显示新材质在那里同步加一个pattern即可。小结floorplan-3d 用不到 40 行画布代码实现了 8 种风格迥异的地面效果核心可复用经验种子随机数保证贴图每次生成一致避免刷新就变样贴图按真实尺寸平铺UV 单位 米近看细节不穿帮颜色缩放函数 低透明度叠加是画出真实材质的通用手法⚡CanvasTexture RepeatWrapping 最大各向异性是轻量 3D 贴图的黄金组合。全部源码集中在单文件 index.html从floorMat()读起是最快的学习路径。动手改改参数下一个逼真地面就是你的。【免费下载链接】floorplan-3d项目地址: https://gitcode.com/gh_mirrors/fl/floorplan-3d创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考