Babylon.js学习之路《十、高级几何体:自定义模型与复杂形状生成》

在这里插入图片描述

文章目录

  • 1. 引言:高级几何体的应用场景
  • 2. 参数化建模:Babylon.MeshBuilder
    • 2.1 扩展几何体类型
    • 2.2 自定义多边形(ExtrudePolygon)
  • 3. 顶点级建模:自定义VertexData
    • 3.1 手动定义顶点数据
    • 3.2 动态生成地形(高度图)
  • 4. 几何体变形与动态更新
    • 4.1 实时顶点动画(波浪效果)
    • 4.2 几何体布尔运算(差集/并集)
  • 5. 实战任务
    • 任务1:生成参数化齿轮
    • 任务2:动态生长的植物
  • 6. 性能优化与调试
    • 6.1 优化策略
    • 6.2 调试工具
  • 7. 总结与扩展


1. 引言:高级几何体的应用场景

  • 核心价值

    • 突破基础几何体限制,创建复杂模型(如建筑结构、有机生物、工业零件)。
  • 案例对比

    • 基础几何体:仅能表现简单形状(立方体/球体),缺乏细节。
    • 高级几何体:通过参数化建模生成齿轮、地形、管道等专业模型。

2. 参数化建模:Babylon.MeshBuilder

2.1 扩展几何体类型

  • 内置复杂几何体

    // 创建十二面体
    const dodecahedron = BABYLON.MeshBuilder.CreatePolyhedron("dodeca", { type: 2, size: 2 }, // type 2 对应十二面体scene
    );
    

    在这里插入图片描述

    // 创建圆环结(Torus Knot)
    const torusKnot = BABYLON.MeshBuilder.CreateTorusKnot("knot", // 网格的名称0.5, // 设置圆环结的全局半径大小0.2, // 设置圆环管的直径大小128, // 设置每个管段上的边数64, // 设置要将结分解为的管的数量2: // X轴上的匝数3: // Y轴上的匝数scene
    );
    

    在这里插入图片描述

2.2 自定义多边形(ExtrudePolygon)

  • 生成2D形状拉伸的3D模型
    // Poteau Gauche
    const pts_pg = [new BABYLON.Vector3(0, 0, 0), new BABYLON.Vector3(100, 0, 0),   new BABYLON.Vector3(100, 0, 100), new BABYLON.Vector3(0, 0, 100), ]
    const poteau_gauche = BABYLON.MeshBuilder.ExtrudePolygon("poteau_gauche",{shape: pts_pg,depth: 1100}
    )
    
    在这里插入图片描述

3. 顶点级建模:自定义VertexData

3.1 手动定义顶点数据

  • 步骤
    定义顶点位置(positions)
    定义顶点索引(indices)
    可选:法线(normals)、UV坐标(uvs)
  • 代码示例:创建三角锥
    const customMesh = new BABYLON.Mesh("custom", scene);
    const vertexData = new BABYLON.VertexData();// 顶点坐标(4个点:底面3个,顶点1个)
    vertexData.positions = [0, 0, 0,   // 底面点11, 0, 0,   // 底面点20.5, 0, 1, // 底面点30.5, 1, 0.5 // 顶点
    ];// 三角形面索引(4个面:底面+3个侧面)
    vertexData.indices = [0, 1, 2,   // 底面0, 1, 3,   // 侧面11, 2, 3,   // 侧面22, 0, 3    // 侧面3
    ];// 计算法线(否则光照异常)
    BABYLON.VertexData.ComputeNormals(vertexData.positions, vertexData.indices, vertexData.normals);vertexData.applyToMesh(customMesh);
    

3.2 动态生成地形(高度图)

  • 基于噪声函数生成起伏地形
    const size = 100;
    const subdivisions = 50;
    const terrain = BABYLON.MeshBuilder.CreateGround("terrain", { width: size, height: size, subdivisions: subdivisions },scene
    );// 修改顶点Y坐标
    const positions = terrain.getVerticesData(BABYLON.VertexBuffer.PositionKind);
    for (let i = 0; i < positions.length; i += 3) {const x = positions[i];const z = positions[i + 2];positions[i + 1] = 5 * Math.sin(x * 0.2) * Math.cos(z * 0.2); // 噪声函数
    }
    terrain.updateVerticesData(BABYLON.VertexBuffer.PositionKind, positions);
    

4. 几何体变形与动态更新

4.1 实时顶点动画(波浪效果)

  • 代码
    scene.registerBeforeRender(() => {const time = performance.now() / 1000;const positions = plane.getVerticesData(BABYLON.VertexBuffer.PositionKind);for (let i = 0; i < positions.length; i += 3) {const x = positions[i];const z = positions[i + 2];positions[i + 1] = Math.sin(x + time) * Math.cos(z + time);}plane.updateVerticesData(BABYLON.VertexBuffer.PositionKind, positions);
    });
    

4.2 几何体布尔运算(差集/并集)

  • 使用CSG(Constructive Solid Geometry)
    const box = BABYLON.MeshBuilder.CreateBox("box", { size: 2 }, scene);
    const sphere = BABYLON.MeshBuilder.CreateSphere("sphere", { diameter: 2 }, scene);
    sphere.position.x = 1;// 转换为CSG对象
    const boxCSG = BABYLON.CSG.FromMesh(box);
    const sphereCSG = BABYLON.CSG.FromMesh(sphere);// 布尔运算(差集:立方体减去球体)
    const resultCSG = boxCSG.subtract(sphereCSG);
    const resultMesh = resultCSG.toMesh("result", null, scene);
    box.dispose();
    sphere.dispose();
    

5. 实战任务

任务1:生成参数化齿轮

  • 目标
  • 代码要点
    function createGear(teeth: number, radius: number) {const points = [];for (let i = 0; i < teeth * 2; i++) {const angle = (i / (teeth * 2)) * Math.PI * 2;const r = i % 2 === 0 ? radius : radius * 0.8; // 交替半径生成齿槽points.push(new BABYLON.Vector3(r * Math.cos(angle), 0, r * Math.sin(angle)));}return BABYLON.MeshBuilder.ExtrudePolygon("gear", { shape: points, depth: 0.5 },scene);
    }
    const gear = createGear(16, 3); // 16齿,半径3
    

任务2:动态生长的植物

  • 目标
  • 实现步骤
    1. 使用L-System算法生成分支结构。
    2. 通过顶点数据构建圆柱体分支。
    3. 添加生长动画(逐帧增加分支长度)。

6. 性能优化与调试

6.1 优化策略

  • 合并网格(MergeMeshes):减少Draw Call。
    const merged = BABYLON.Mesh.MergeMeshes([mesh1, mesh2], true); // 第二个参数启用材质合并
    
  • 简化复杂网格:使用simplify()方法降低面数。
    const simplified = BABYLON.SimplificationStrategy.QUADRATIC(mesh);
    mesh.simplify([{ distance: 100, quality: 0.8 }]); // 根据距离简化
    

6.2 调试工具

  • 显示顶点法线
    BABYLON.Debug.AxesViewer(scene, 1); // 显示坐标系
    const normalsViewer = new BABYLON.Debug.NormalsViewer(mesh, scene); // 显示法线
    

7. 总结与扩展

  • 核心技能:参数化建模、顶点操作、布尔运算、动态几何更新。
  • 扩展方向
    • GPU加速生成:通过Compute Shader实时生成几何体。
    • 程序化城市生成:结合噪声函数和规则系统。
    • 三维扫描重建:从点云数据生成网格。

通过本指南,开发者可掌握从基础扩展几何体到专业级程序化建模的全套技能,满足工业设计、游戏开发等领域的复杂需求。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.pswp.cn/web/84422.shtml
繁体地址,请注明出处:http://hk.pswp.cn/web/84422.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【赵渝强老师】Kubernetes的安全框架

Kubernetes集群的安全框架主要由以下认证、鉴权和准入控制三个阶段组成。这三个阶段的关系如下图所示。 视频讲解如下 【赵渝强老师】Kubernetes的安全框架 认证&#xff08;Authentication&#xff09; 当客户端与Kubernetes集群建立HTTP通信时&#xff0c;首先HTTP请求会进…

CDN与静态资源优化

CDN与静态资源优化 在现代Web系统和AI应用中&#xff0c;随着用户访问量的不断攀升&#xff0c;静态资源&#xff08;如HTML、CSS、JavaScript、图片、音视频、模型文件等&#xff09;带来的负载日益沉重。尤其在大模型推理、前端渲染、广告投放等场景中&#xff0c;静态资源的…

如何填写“appium inspector”内容?

1. 确认已经开启appium的服务&#xff0c;运行appium 参考内容&#xff1a;{"appium:platformName": "Android", # 系统名称"appium:platformVersion": "9", # 安卓版本&#xff0c;看设备"appium:deviceName": "3d…

mysql server层做了什么

服务器处理客户端请求 服务器程序在处理来自客户端的查询请求时&#xff0c;大致需要分为3部分&#xff1a;连接管理、解析与优化、存储引擎。 连接管理 每当有一个客户端进程连接到服务器进程时&#xff0c;服务器进程都会创建一个线程专门处理与这个客户端的交互&#xff…

APISIX 简介:云原生 API 网关的架构与实践

文章目录 引言&#xff1a;APISIX 概述基于Nginx构建的原因基于etcd构建的原因 架构图示架构分层解析管理层&#xff1a;人机交互与配置入口控制层&#xff1a;配置管理与集群协调数据面&#xff1a;请求处理与流量转发说明&#xff1a;关于OpenRestry 引言&#xff1a;APISIX …

【AI作画】第3章 LORA加载器

目录 LORA加载器 管道信息 ​编辑 ​编辑 ​编辑 lora模型的串接 作品集 LORA加载器 前面我们已经分析过节点目录了&#xff0c;现在我们来看一下LORA加载器。我们进行图片渲染&#xff0c;一般都需要LORA模型的。 首先&#xff0c;我们“鼠标右键——添加节点——…

Xilinx XC7A12T‑1CPG238I Artix‑7 FPGA

XC7A12T‑1CPG238I 以其独特的性能与封装组合&#xff0c;成为诸多工程师的首选方案。下面&#xff0c;我们从多个维度对这款芯片做深入剖析。 一、产品定位与封装特点 XC7A12T‑1CPG238I 属于赛灵思&#xff08;Xilinx&#xff09;28 nm Artix‑7 系列中的入门级型号&#x…

如何利用 Java 爬虫获得微店商品详情:实战指南

在电商领域&#xff0c;微店作为众多商家的线上销售渠道之一&#xff0c;其商品详情数据对于市场分析、竞品研究和商业决策具有重要价值。Java 爬虫技术可以帮助我们高效地获取这些数据。本文将详细介绍如何使用 Java 编写爬虫&#xff0c;获取微店商品详情。 一、准备工作 &…

【Bug】MAUI自定义弹窗在IOS有异常背景

文章目录 问题问题代码原因解决处理Bug的具体步骤 问题 自定义弹窗有异常背景 问题代码 <mct:Popup xmlns"http://schemas.microsoft.com/dotnet/2021/maui"xmlns:x"http://schemas.microsoft.com/winfx/2009/xaml"xmlns:converters"clr-names…

C语言酒店管理系统:完整源码与深度解析

酒店管理系统通过自动化流程提升酒店运营效率。本系统采用C语言开发&#xff0c;基于模块化设计思想&#xff0c;包含以下核心功能&#xff1a; ​房间管理​&#xff1a;初始化房间信息、查看房间状态​预订管理​&#xff1a;按时间段预订房间、查询预订记录​入住管理​&am…

基于Gold-YOLO的聚合-分发机制改进YOLOv8教程

1. 引言 本文将详细介绍如何将Gold-YOLO的核心创新——聚合-分发(Gather-and-Distribute, GD)机制集成到YOLOv8架构中。Gold-YOLO是一种创新的目标检测架构,通过独特的信息融合策略实现了低延迟和高准确性的理想平衡。 1.1 Gold-YOLO核心特性 Gold-YOLO的主要创新点包括…

blob 的使用 文件下载 图片预览 大文件分片上传

1. 文件下载 function downloadFile(content, filename, type) {const blob new Blob([content], { type });const url URL.createObjectURL(blob);const a document.createElement(a);a.href url;a.download filename;a.click();URL.revokeObjectURL(url); }// 使用示例…

FlinkCDC-Hudi数据实时入湖原理篇

1.Hudi应用场景 面对海量数据开发场景&#xff0c;一种支持存储多种原始数据格式、多种计算引擎、高效的元数据统一管理的存储方式能极大的提高开发效率。所以在选择技术选型的时候&#xff0c;这种存储方式有以下几个特点&#xff1a; 存储原始数据&#xff0c;这些原始数据来…

sqldeveloper 创建新用户并访问其他空间特定表和视图

创建用户 右键选择创建用户 1.给用户取一个名字 VIEW_TEST 2.设置密码 123456&#xff08;建议用其他&#xff09; 3.选择表空间和临时空间 选择角色 CONNECT 连接角色 选择系统权限 然后点击应用就可以了 然后在用户哪里就能看到这个用户了 登录用户 出现成功就说明可以…

家用电器3d扫描逆向建模中科米堆手持式蓝光三维扫描仪数字建模

从厨房里的冰箱、微波炉&#xff0c;到客厅中的电视、空调&#xff0c;再到卧室的加湿器、空气净化器等&#xff0c;家用电器极大地提升了我们的生活品质。 家电市场的竞争日益激烈&#xff0c;产品更新换代速度加快&#xff0c;如何快速、精准地获取现有家电产品的三维数据&a…

从“数据困境”到“数据生态”:DaaS重塑三甲医院医疗数据治理

从“数据困境”到“数据生态”&#xff1a;DaaS如何重塑三甲医院医疗数据治理 医疗数据治理的现状剖析 在智慧医疗蓬勃发展的当下&#xff0c;三甲医院凭借其丰富的临床资源&#xff0c;积累了海量、多维度的医疗数据。这些数据犹如一座蕴藏着巨大价值的富矿&#xff0c;涵盖了…

LVS +Keepalived 高可用群集

目录 前言一. Keepalived 双机热备基础知识1. Keepalived 概述及安装&#xff08;1&#xff09;Keepalived 的热备方式&#xff08;2&#xff09;Keepalived 的安装与服务控制 2. 使用Keepalived 实现双机热备&#xff08;1&#xff09;主服务器的配置&#xff08;2&#xff09…

【Go语言基础】对齐边界与内存填充

文章目录 一、内存对齐的核心概念二、Go语言的内存对齐规则三、内存对齐示例示例1&#xff1a;字段顺序影响对齐示例2&#xff1a;指针与切片的对齐 四、如何查看内存对齐&#xff1f;五、内存对齐的优化建议六、总结&#xff1a;内存对齐的核心要点 在计算机科学中&#xff0c…

网络核心 - CNI、Service 与 Ingress/Gateway API 解析

网络核心 - CNI、Service 与 Ingress/Gateway API 解析 Kubernetes 的强大之处在于它极大地简化了容器化应用的部署和管理,但其网络模型的灵活性和复杂性也常常让初学者感到困惑。作为 SRE,我们需要拨开迷雾,理解流量在 K8s 集群内部以及进出集群时,到底是如何流转的。 Po…

20.jsBridge多页面交互与原生事件监听冲突问题

一、问题描述 • 安卓原生页面调起 H5A 页面&#xff1b; • H5A 页面跳转到 H5B 页面&#xff1b; • 在 H5B 页面点击“附件上传”&#xff0c;通过 JS Bridge 调用安卓的附件上传功能&#xff0c;弹出附件弹窗&#xff1b; • 然后 返回 到 H5A 页面&#xff0c;附件上传弹窗…