点赞 + 关注 + 收藏 = 学会了

如果你已经开始探索 p5.js 的 3D 世界,那么createModel()这个 API 绝对是你需要掌握的强大工具。它允许你创建自定义的 3D 几何模型,为你的创意提供无限可能。

什么是 createModel ()?

createModel() 用于从一个 OBJSTL 格式的 字符串 中加载 3D 模型,并返回一个 p5.Geometry 对象。它适用于已经以文本形式(例如通过 loadStrings() 读取文件后拼接的字符串)拿到模型数据的场景。

为什么要用 createModel()

  • 当你想在运行时动态获取模型(比如用户上传、通过网络接口拿到纯文本 OBJ/STL)并立即生成几何体时,createModel() 十分方便。
  • 如果只是从本地或服务器文件直接加载,更常用的是 loadModel(),它会返回同样的 p5.Geometry

语法

let geom = createModel(modelString, fileType, normalize, successCallback, failureCallback)
参数名类型说明
modelStringString必填,OBJ/STL 文件的文本内容。通常通过 loadStrings() 或者从服务器拉取后用 join('\n') 拼接。
fileTypeString必填,模型格式,'obj''stl'(不含点号)。
normalizeBoolean可选,是否在加载时对模型做统一缩放。若 true,自动根据模型最大边长进行缩放,便于在画布中展示。
successFunction可选,加载成功后的回调,参数为得到的 p5.Geometry 对象。
failureFunction可选,加载失败后的回调,参数为事件错误对象。
flipU, flipVBoolean可选,是否翻转 U/V 纹理坐标(OBJ/STL 若带纹理时使用)。

返回值:一个 p5.Geometry 实例,你可以直接用 model(geometry)draw() 中渲染。

基础 Demo:加载并绘制一个立方体

写一个最简立方体的 OBJ 文本,然后用 createModel() 加载并画出来。

let cubeGeo;  // 存放 p5.Geometryfunction setup() {createCanvas(400, 400, WEBGL);// 定义一个简单立方体的 OBJ 文本(8 个顶点,6 个面)const cubeObj = `
v -1 -1  1
v  1 -1  1
v  1  1  1
v -1  1  1
v -1 -1 -1
v  1 -1 -1
v  1  1 -1
v -1  1 -1
f 1 2 3 4
f 5 6 7 8
f 1 5 8 4
f 2 6 7 3
f 1 2 6 5
f 4 3 7 8`;// 加载几何体:传入字符串、格式、归一化为 truecubeGeo = createModel(cubeObj, '.obj', true, // 加载成功回调(可选)function(g) {console.log('模型加载完成,共有顶点:', g.vertices.length);},// 加载失败回调(可选)function(err) {console.error('模型加载失败:', err);});
}function draw() {background(30);orbitControl();              // 支持拖拽旋转视角ambientLight(100);directionalLight(255, 255, 255, 0.5, 1, -0.5);push();rotateY(frameCount * 0.01);rotateX(frameCount * 0.008);normalMaterial();          // 根据法线给模型着色model(cubeGeo);            // 渲染几何体pop();
}

一个可用鼠标拖拽姿态的彩色旋转立方体。


以上就是本文的全部内容啦,想了解更多 P5.js 用法欢迎关注 《P5.js中文教程》。

也可以➕我 green bubble 吹吹水咯

在这里插入图片描述

点赞 + 关注 + 收藏 = 学会了

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

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

相关文章

react 的 useTransition 、useDeferredValue

useTransition 用于 管理状态更新的过渡(pending)状态,避免因高优先级任务(如用户输入)被低优先级任务(如数据获取或复杂计算)阻塞而导致的界面卡顿。 它特别适用于,需要 区分紧急更…

Unity的GameObject.Instantiate的使用

在Unity游戏引擎中,GameObject.Instantiate 是一个核心方法,用于在运行时动态创建游戏对象的副本。它常用于实例化预制体(Prefab),例如生成敌人、子弹或场景元素。以下是其使用方法的详细说明,包括语法、参…

【CSS】盒子类型

CSS盒子模型是网页布局的核心基础,每个HTML元素都被视为一个矩形盒子,由​​内容(Content)、内边距(Padding)、边框(Border)、外边距(Margin)​​四部分组成。…

《嵌入式C语言笔记(十五):字符串操作与多维指针深度解析》

1.字符串与指针安全操作核心函数与陷阱函数功能安全替代功能strcpy字符串拷贝strncpy复制前n个,最多strlen个,超出有效长度,按原样复制strcat字符串拼接strncatdest只连接src的前n个,如果n超过有效长度,按原样链接strc…

每日学习笔记记录(分享更新版-凌乱)

函数和变量都需要满足:先声明后使用(重要)在 函数的声明中,形参的名字可以省略函数的定义是一种特殊的是声明,比声明更加强大;函数使用前必须进行声明,但不必要声明具体定义.h——函数的声明.c—…

Windows提权(MS09-012 巴西烤肉)

演示环境:windows-2003前提:提权的前提条件是拿到服务器的webshell演示以iis的中间件解析漏洞为例(test.asp;.jpg) Windows提权拿到webshell之后,使用菜刀,蚁剑,冰蝎或者哥斯拉连接上服务器&…

常见依赖于TCP/IP的应用层协议

Protocol 协议 Acronym 缩写 Port 端口 Description 描述 Telnet Telnet 23 Remote login service 远程登录服务 Secure Shell SSH 22 Secure remote login service 安全远程登录服务 Simple Network Management Protocol 简单网络管理协议 SNMP 161-162 Manage network d…

XML Schema 指示器:全面解析与深度应用

XML Schema 指示器:全面解析与深度应用 引言 XML Schema 是一种用于定义 XML 文档结构的语言,它为 XML 文档提供了严格的框架,以确保数据的准确性和一致性。在本文中,我们将深入探讨 XML Schema 的基本概念、关键特性、指示器的作用以及其实际应用。 XML Schema 的基本概…

13、select_points_object_model_3d解析

名字 select_points_object_model_3d- 将阈值应用于 3D 对象模型的属性。 签名 select_points_object_model_3d( : : ObjectModel3D, Attrib,

ThinkPHP6.1+Ratchet库 搭建websocket服务

Ratchet 是一个基于 ReactPHP 的 PHP WebSocket 库&#xff0c;无需依赖 Swoole 扩展。以下是实现步骤&#xff1a;首先安装 Ratchet&#xff1a;composer require cboden/ratchet创建 WebSocket 处理类&#xff1a;<?php /*** websocket处理类* DateTime 2025/7/28 10:38…

智慧工地系统:科技如何重塑建筑现场?

前几天路过一个正在施工的楼盘&#xff0c;看到现场虽然机器轰鸣&#xff0c;但秩序井然&#xff0c;工人们佩戴着设备&#xff0c;指挥塔上闪烁着指示灯&#xff0c;和印象中那种尘土飞扬、杂乱无章的工地景象完全不同。当时就感慨&#xff0c;现在工地也“智慧”起来了。后来…

Day 25:异常处理

Day 25: Python异常处理机制 Review 上一节主要是熟悉os等python中的文件操作&#xff0c;包含&#xff1a; 基础操作&#xff1a;目录获取、文件列举、路径拼接系统交互&#xff1a;环境变量管理、跨平台兼容性高级功能&#xff1a;目录树遍历、文件系统分析 Today 今天专…

Apache Ignite 的分布式队列(IgniteQueue)和分布式集合(IgniteSet)的介绍

以下的内容是关于 Apache Ignite 的分布式队列&#xff08;IgniteQueue&#xff09;和分布式集合&#xff08;IgniteSet&#xff09; 的介绍。它们是 Ignite 提供的分布式数据结构&#xff0c;让你可以在整个集群中像使用本地 BlockingQueue 或 Set 一样操作共享的数据。 下面我…

HTML5 `<figure>` 标签:提升网页语义化与可访问性的利器

目录什么是 <figure> 标签&#xff1f;为什么我们要用 <figure>&#xff1f;<figure> 标签的语法<figure> 标签的适用场景1 图片及其说明 (最常用)2 代码片段及其注释3 图表、流程图或数据可视化4 引用或引文 (Quote) 及其出处总结在现代网页开发中&am…

计算机网络五层模型

我们常说的“计算机网络五层协议模型”&#xff0c;是一个实际应用中广泛采用的简化模型&#xff08;介于OSI七层&#xff08;Open System Interconnect&#xff09;与TCP/IP四层之间&#xff09;&#xff0c;用于描述网络通信中各层的职责与作用。 文章目录第5层&#xff1a;应…

数据开源 | “白虎”数据集首批开源,迈出百万数据征途第一步

“白虎”数据集首批开源 在机器人智能不断迈向自主化、通用化的进程中&#xff0c;如何解决人形机器人的“喂养”难题、走出“数据荒漠”&#xff0c;已成为具身智能领域亟需攻克的关键课题。为此&#xff0c;2025 年初&#xff0c;全国首个异构人形机器人训练场在模力社区正式…

第17章——多元函数积分学的预备知识

文章目录思维导图场论初步方向导数梯度散度与旋度今日格言&#xff1a;如果凡事缺少了实行的勇气&#xff0c;再有智慧与仁爱也是枉然。思维导图 场论初步 场就是空间区域ΩΩΩ上的一种对应法则。可分为&#xff1a;数量场和向量场。 比如一个数量函数uu(x,y,z)uu(x,y,z)uu(x…

Vue》》Slot 插槽

插槽的概念 插槽就是子组件中的提供给父组件使用的一个占位符&#xff0c;用slot标签 表示&#xff0c;父组件可以在这个占位符中填充任何模板代码&#xff0c;如 HTML、组件等&#xff0c;填充的内容会替换子组件的slot标签。简单理解就是子组件中留下个“坑”&#xff0c;父组…

AKS部署.Net Shopping(K8S本地部署/AKS部署/key-value)

文章目录 项目地址 一、Api配置修改 1.1 配置docker 1. docker-compose配置环境变量 2. 修改appsettings 二、本地k8s部署 2.1 将本地镜像Push到dockerHub 2.2 制作K8S yaml文件 1. mogodb 2. shopping api 3. shoppingclient 3. port补充 4. Service 的type 三、部署到AKS 3.1…

vue3 el-table 去除小数

在 Vue 3 中使用 Element Plus 的 <el-table> 组件时&#xff0c;如果你希望去除表格列中的小数&#xff0c;你可以通过几种方式来实现&#xff1a;1. 使用 formatter 属性<el-table-column> 组件的 formatter 属性允许你自定义单元格的显示格式。你可以使用这个属…