Three.js 设置模型材质纹理贴图和修改材质颜色,材质透明度,材质网格

相关API的使用:

1 traverse (模型循环遍历方法)

2. THREE.TextureLoader(用于加载和处理图片纹理)

3. THREE.MeshLambertMaterial(用于创建材质)

4. getObjectByProperty(通过材质的属性值获取材质信息)

在上一篇 Three.js加载外部glb,fbx,gltf,obj 模型文件 的文章基础上加入onSetSystemModelMap (设置模型材质方法)和onSetModelMaterial(设置材质属性方法)
首先在 setModel 方法里获取到当前模型所有的材质 (traverse

setModel({ filePath, fileType, scale,  position }) {return new Promise((resolve, reject) => {const loader = this.fileLoaderMap[fileType]loader.load(filePath, (result) => {//加载不同类型的文件switch (fileType) {case 'glb':this.model = result.scene		break;case 'fbx':this.model = resultbreak;case 'gltf':this.model = result.scenebreak;case 'obj':this.model = resultbreak;default:break;}this.model.traverse((v) => {const { uuid } = vif (v.isMesh &&  v.materia) {this.modelMaterialList.push(v)}})// 设置模型大小if (scale) {this.model.scale.set(scale, scale, scale);}// 设置模型位置 if (position) {const { x, y, z } = positionthis.model.position.set(x, y, z)}// 设置相机位置this.camera.position.set(0, 2, 6)// 设置相机坐标系this.camera.lookAt(0, 0, 0)// 将模型添加到场景中去   this.scene.add(this.model)resolve(true)}, () => {}, (err) => {console.log(err)reject()})})}

通过 getObjectByProperty 方法传入 uuid 获取到当前材质信息
设置模型贴图

	onSetSystemModelMap({ url }) {// 当前uuid const uuid = store.state.selectMesh.uuid// 通过uuid 获取需要设置的材质const mesh = this.scene.getObjectByProperty('uuid', uuid)const { name, color } = mesh.material// 获取到贴图 url(图片实际地址)const mapTexture = new THREE.TextureLoader().load(url)mesh.material = new THREE.MeshLambertMaterial({map: mapTexture,transparent: true, // 允许材质可透明color,name,})}

设置材质属性

	// 设置材质属性onSetModelMaterial(config) {const { color, wireframe, depthWrite, opacity } = configconst uuid = store.state.selectMesh.uuidconst mesh = this.scene.getObjectByProperty('uuid', uuid)if (mesh && mesh.material) {//设置材质颜色mesh.material.color.set(new THREE.Color(color))//设置网格mesh.material.wireframe = wireframe// 设置深度写入mesh.material.depthWrite = depthWrite//设置透明度mesh.material.transparent = truemesh.material.opacity = opacity}}

完整的代码可参考:https://gitee.com/ZHANG_6666/Three.js3D/blob/master/src/views/renderModel.js

界面效果:
在这里插入图片描述
在这里插入图片描述

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

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

相关文章

交换排序——选择排序和冒泡排序的区别是什么?

今天重温一下算法,其实刚开始我觉得冒泡排序和选择排序是一样的,因为他们排序过程中都是通过相邻的数据比较找到最小/最大的数据,通过不断思考和学习才明白,两者还是有区别的。 冒泡排序 概念 冒泡排序(Bubble Sort)&#xff0…

Django实现音乐网站 ⑽

使用Python Django框架制作一个音乐网站, 本篇主要是后台对歌曲类型、歌单功能原有功能进行部分功能实现和显示优化。 目录 歌曲类型功能优化 新增编辑 优化输入项标题显示 父类型显示改为下拉菜单 列表显示 父类型显示名称 过滤器增加父类型 歌单表功能优化…

OpenStack监控工具

OpenStack是一个开源的云计算管理平台项目,是一系列软件开源项目的组合。由NASA和Rackspace合作研发并发起,以Apache许可证(Apache软件基金会发布的一个自由软件许可证)授权。 OpenStack为私有云和公有云提供可扩展的弹性的云计算…

V3s uboot 通过env 修改LCD 参数信息

实际项目中我们可能使用各种参数的LCD 显示器,有7吋,4.3 寸等等,我这里使用的uboot 版本是U-Boot 2017.01-rc2 ,在make menuconfig 时候会填入lcd 配置信息,如下: 所以这里使用起来很不方便,查看…

无涯教程-Perl - readline函数

描述 此函数从EXPR引用的文件句柄中读取一行,并返回输出。如果要直接使用FILEHANDLE,则必须将其作为typeglob传递。 Simply readline function is equvivalent to <>. 语法 以下是此函数的简单语法- readline EXPR返回值 此函数在标量context中仅返回一行,而在列表…

章节7:Burp Intruder模块

章节7&#xff1a;Burp Intruder模块 参考资料 https://portswigger.net/burp/documentation/desktop/tools/intruder 01 Intruder模块作用与原理 原理 http://xxx.xx.com/bbs/index.php?namewuyanzu&mottogo 对请求参数进行修改&#xff0c;分析响应内容&#xff0…

Markdown编辑器的使用

这里写自定义目录标题 欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题&#xff0c;有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants 创建一个自定义列表如何创建一个…

MySQL多表关联查询

目录 1. inner join&#xff1a; 2. left join&#xff1a; 3. right join&#xff1a; 4.自连接 5.交叉连接&#xff1a; 6、联合查询 7、子查询 1. inner join&#xff1a; 代表选择的是两个表的交差部分。 内连接就是表间的主键与外键相连&#xff0c;只取得键值一致…

mysql的高级查询语句

目录 一、本文前言 二、高效查询方式 1&#xff09;指定指字段进行查看 2&#xff09;对字段进行去重查看 3&#xff09;where条件查询 4&#xff09;and 和 or 进行逻辑关系的增加 5&#xff09;查询取值列表中的数据 6&#xff09;between的引用 7&#xff09;like…

ACL2023:成分对比学习生成句子嵌入表示

title:Composition-contrastive Learning for Sentence Embeddings 很多基于对比学习的方法用在无监督语料中&#xff0c;通过最大化对齐同一句子的最小扰动&#xff0c;并且鼓励向量在广泛文本语料中的均匀分布。本文方法提出最大化文本与其短语成分的组合之间的对齐。 …

linux 学习————LNMP之分布式部署

目录 一、概述 二、LNMP环境部署 三、配置nginx 四、 配置php使nginx能够解析.php 五、配置mysql 六、配置discuz进行登录论坛访问测试 一、概述 LNMP代表 Linux、Nginx、MySQL、PHP&#xff0c;是一种常用的服务器架构。它由以下组件组成&#xff1a; Linux&#xff1a;作…

Linux命令200例:dd命令详解及实际应用场景

&#x1f3c6;作者简介&#xff0c;黑夜开发者&#xff0c;全栈领域新星创作者✌。CSDN专家博主&#xff0c;阿里云社区专家博主&#xff0c;2023年6月csdn上海赛道top4。 &#x1f3c6;数年电商行业从业经验&#xff0c;历任核心研发工程师&#xff0c;项目技术负责人。 &…

JZ39 数组中出现次数超过一半的数字

目录 一、题目 二、代码 一、题目 数组中出现次数超过一半的数字_牛客题霸_牛客网 二、代码 class Solution { public:/*** 代码中的类名、方法名、参数名已经指定&#xff0c;请勿修改&#xff0c;直接返回方法规定的值即可** * param numbers int整型vector * return int…

Dynamic CRM开发 - 实体介绍

实体简介 在CRM中,实体(Entity)是数据的基本载体,也是构建业务逻辑网络的基础节点。 实体可以理解为数据库中的一张表(实体中的字段对应数据库表的字段),比如创建一个实体存储客户信息,创建一个实体存储产品信息,产品实体里可以创建一个查找类型的字段(类似表的外键)…

如何理解MySQL隔离性---3个记录隐藏字段、undo日志、Read View

目录 一、3个记录隐藏字段 二、undo 日志 三、read view 一、3个记录隐藏字段 本片文章是帮助理解上篇文章Mysql隔离性的辅助知识。 mysql在建表时&#xff0c;不仅仅创建了表的结构&#xff0c;还创建了3个隐藏字段。 DB_TRX_ID &#xff1a;6 byte&#xff0c;最近修改( 修…

考研408 | 【计算机网络】 数据链路层

导图&#xff1a; 数据链路层概念&#xff1a; 结点&#xff1a;主机、路由器 链路&#xff1a;网络中两个结点之间的物理通道&#xff0c;链路的传输介质主要有双绞线、光纤和微波。分为有线链路、无线链路。 数据链路&#xff1a;网络中两个结点之间的逻辑通道&#xff0…

常见的路由协议之RIP协议与OSPF协议

目录 RIP OSPF 洪泛和广播的区别 路由协议是用于在网络中确定最佳路径的一组规则。它们主要用于在路由器之间交换路由信息&#xff0c;以便找到从源到目标的最佳路径。 常见的路由协议&#xff1a; RIP (Routing Information Protocol)&#xff1a;RIP 是一种基于距离向量算…

Mac安装nvm教程及使用

nvm 是 node 版本管理器&#xff0c;也就是说一个 nvm 可以管理多个 node 版本&#xff08;包含 npm 与 npx&#xff09;&#xff0c;可以方便快捷的安装、切换 不同版本的 node。 1、直接通过brew安装 执行命令&#xff1a;brew install nvm PS&#xff1a; 如果没有安装br…

PostgreSQL查询慢sql原因和优化方案

PostgreSQL sql查询慢优化方案有一下几种解决方案&#xff1a; 1.关闭会话 查询慢sql的执行会话&#xff0c;关闭进程。 查看数据库后台连接进程 SELECT count(*) FROM pg_stat_activity;SELECT * FROM pg_stat_activity; 查看数据库后台连接进程&#xff0c;但是此条SQL不…

03_013内存分配api以及页表详解

前言 之前文章中物理ram中的最小单位一直用页来表示 这次又描述的详细了点 物理ram的最小单位 有的地方叫 块,框,页帧 在虚拟空间中最小单位也叫页 需要好好区分 不过后来想想管你虚拟页还是物理ram页 都存在物理ram上 都能想成一 一对应的关系 所以大家都叫页好像也行 内存分…