Three.js 实现模型材质分解,拆分,拆解效果

原理:通过修改模型材质的 x,y,z 轴坐标 positon.set( x,y,z) 来实现拆解,分解的效果。

注意:支持模型材质position 修改的材质类型为 type=“Mesh” ,其他类型的材质修改了position 可能没有实际效果

在上一篇 Three.js加载外部glb,fbx,gltf,obj 模型文件 的文章基础上新增一个 setModelMeshDecompose(模型拆解方法)

安装 tween.js (用于处理模型拆解的位置移动缓冲动画效果)

yarn add @tweenjs/tween.js
import TWEEN from "@tweenjs/tween.js";

setModelMeshDecompose 方法

   // decompose 分解的大小距离
	setModelMeshDecompose(decompose ) {
	    // 如果当前模型只有一个材质则不进行拆解
		if (this.glowMaterialList.length <= 1) return false
		// 修改材质位置移动
		const modelDecomposeMove = (obj, position) => {
			new TWEEN.Tween(obj.position)
				.to(position, 500)
				.onUpdate(function (val) {
					obj.position.set(val.x || 0, val.y || 0, val.z || 0);
				})
				.start();
		}
		const length = this.glowMaterialList.length
		const angleStep = (2 * Math.PI) / length;
		// TODD glowMaterialList:当前模型的所有材质列表名称
		this.glowMaterialList.forEach((name, i) => {
		   // 通过 getObjectByName 获取 要修改的材质
			const mesh = this.model.getObjectByName(name)
			// 如果 type 类型为Mesh 则修改材质的位置
			if (mesh.type == 'Mesh') {
		     	    // 拆解位置移动的计算公式
                 	const angle = i * angleStep;
					const x = (decompose) * Math.cos(angle);
					const y = (decompose) * Math.sin(angle);
					const position = {
						x, y, z: 0
					}
					// 执行拆解
					modelDecomposeMove(mesh, position)
			}
		})
	}

获取当前模型的所有材质名称的方法

   getFlowMeaterList(){
        const modelMaterialList= []
  		this.model.traverse((v) => {
			if (v.isMesh && v.material) {
				modelMaterialList.push(v)	
			}
		})
		this.glowMaterialList = modelMaterialList.map(v=>v.name)
   }

在场景渲染动画帧方法中添加 TWEEN.update()

 render(){
	  this.renderer.render(this.scene, this.camera)
	  TWEEN.update()
}

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

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

实战:大数据Spark简介与docker-compose搭建独立集群

文章目录 前言技术积累Spark简介Spark核心功能及优势Spark运行架构 Spark独立集群搭建安装docker和docker-composedocker-compose编排docker-compose编排并运行容器 Spark集群官方案例测试写在最后 前言 很多同学都使用过经典的大数据分布式计算框架hadoop&#xff0c;其分布式…

Spring Boot 整合MyBatis(超详细)

&#x1f600;前言 本篇博文关于Spring Boot 整合MyBatis&#xff0c;希望你能够喜欢 &#x1f3e0;个人主页&#xff1a;晨犀主页 &#x1f9d1;个人简介&#xff1a;大家好&#xff0c;我是晨犀&#xff0c;希望我的文章可以帮助到大家&#xff0c;您的满意是我的动力&#x…

论文《LoRA: Low-Rank Adaptation of Large Language Models》阅读

论文《LoRA: Low-Rank Adaptation of Large Language Models》阅读 BackgroundIntroducitonProblem StatementMethodology Δ W \Delta W ΔW 的选择 W W W的选择 总结 今天带来的是由微软Edward Hu等人完成并发表在ICLR 2022上的论文《LoRA: Low-Rank Adaptation of Large Lan…

【Python机器学习】实验16 卷积、下采样、经典卷积网络

文章目录 卷积、下采样、经典卷积网络1. 对图像进行卷积处理2. 池化3. VGGNET4. 采用预训练的Resnet实现猫狗识别 TensorFlow2.2基本应用5. 使用深度学习进行手写数字识别 卷积、下采样、经典卷积网络 1. 对图像进行卷积处理 import cv2 path data\instance\p67.jpg input_…

海外ios应用商店优化排名因素之关键词

与Google Play Store相比&#xff0c;在Apple的App Store中&#xff0c;应用描述不会影响关键词排名。不过有一个专门针对App Store的关键词列表&#xff0c;我们可以在其中放置相关关键词。 1、关键词列表的限制仅为100个字符。 使用排名的竞争性较低的关键词&#xff0c;尝试…

HTML-常见标签、HTML5新特性

HTML 软件架构 1.C/S架构 (1) C/S架构即Client/Server&#xff08;客户机/服务器&#xff09;结构。 (2) C/S 架构特点 ​ C/S结构在技术上很成熟&#xff0c;它的主要特点是交互性强、具有安全的存取模式、网络通信量低、响应速度快、利于处理大量数据。但是该结构的程序是…

基于Linux操作系统中的shell脚本

目录 前言 一、概述 1、什么是shell&#xff1f; 2、shell脚本的用途有哪些&#xff1f; 3、常见的shell有哪些&#xff1f; 4、学习shell应该从哪几个方面入手&#xff1f; 4.1、表达式 1&#xff09;变量 2&#xff09;运算符 4.2、语句 1&#xff09;条件语句&am…

odoo安装启动遇到的问题

问题&#xff1a;在第一次加载odoo配置文件的时候&#xff0c;启动失败 方法&#xff1a; 1、先检查odoo.conf的内容&#xff0c;尤其是路径 [options] ; This is the password that allows database operations: ; admin_passwd admin db_host 127.0.0.1 db_port 5432 d…

【LangChain系列 1】 LangChain初探

原文链接&#xff1a;【LangChain系列 1】LangChain初探https://mp.weixin.qq.com/s/9UpbM84LlsHOaMS7cbRfeQ 本文速读&#xff1a; LangChain是什么 LangChain初探 环境准备 LLMs Prompt Templates Output Parser 第一个LLMChain应用 01 LangChain是什么 LangChain是一…

MongoDB快速上手

MongoDB快速上手 MongoDB用起来-快速上手&集群和安全系列 课程目标&#xff1a; 理解MongoDB的业务场景、熟悉MongoDB的简介、特点和体系结构、数据类型等能够在windows和linux下安装和启动MongoDB、图形化管理界面Compass的安装使用掌握MongoDB基本常用命令实现数据的C…

计算机毕业设计源码-基于java+springboot+vue开发的短视频播放系统-lw

参考源码 文章目录 前言一、项目运行环境配置二、主要技术javaMysql数据库JSP技术B/S结构 三、系统设计四、功能截图总结 前言 随着社会的不断发展与进步&#xff0c;21世纪的今天&#xff0c;人们对信息科学的认识已由低层次向高层次发展&#xff0c;从感性认识逐渐提高到理…

17.2 【Linux】通过 systemctl 管理服务

systemd这个启动服务的机制&#xff0c;是通过一支名为systemctl的指令来处理的。跟以前 systemV 需要 service / chkconfig / setup / init 等指令来协助不同&#xff0c; systemd 就是仅有systemctl 这个指令来处理而已。 17.2.1 通过 systemctl 管理单一服务 &#xff08;s…

logstash配置文件

input { kafka { topics > “xxxx” bootstrap_servers > “ip:port” auto_offset_reset > “xxxx” group_id > “xxxx” consumer_threads > 3 codec > “json” } } filter { grok { match > { “message” > ‘%{IP:client_ip} - - [%{HTTPDATE:…

神仙般的css动画参考网址,使用animate.css

Animate.css | A cross-browser library of CSS animations.Animate.css is a library of ready-to-use, cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and attention-guiding hints.https://animate.style/这里面有很…

大语言模型微调实践——LoRA 微调细节

1. 引言 近年来人工智能领域不断进步&#xff0c;大语言模型的崛起引领了自然语言处理的革命。这些参数量巨大的预训练模型&#xff0c;凭借其在大规模数据上学习到的丰富语言表示&#xff0c;为我们带来了前所未有的文本理解和生成能力。然而&#xff0c;要使这些通用模型在特…

全流程R语言Meta分析核心技术应用

Meta分析是针对某一科研问题&#xff0c;根据明确的搜索策略、选择筛选文献标准、采用严格的评价方法&#xff0c;对来源不同的研究成果进行收集、合并及定量统计分析的方法&#xff0c;最早出现于“循证医学”&#xff0c;现已广泛应用于农林生态&#xff0c;资源环境等方面。…

写之前的项目关于使用git remote -v 找不到项目地址的解决方案

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 一、报错解析1. 报错内容2. 报错翻译3. 报错解析&#xff08;1&#xff09;使用git branch来查看git仓库有几个分支&#xff08;2&#xff09;使用git remote -v&am…

商城-学习整理-高级-性能压测缓存问题(十一)

目录 一、基本介绍1、性能指标2、JMeter1、JMeter 安装2、JMeter 压测示例1、添加线程组2、添加 HTTP 请求3、添加监听器4、启动压测&查看分析结果 3、JMeter Address Already in use 错误解决 二、性能监控1、jvm 内存模型2、堆3、jconsole 与 jvisualvm1、jvisualvm 能干…

暴力递归汉诺塔问题

暴力递归 将问题转化为规模缩小了的同类问题的子问题。有明确的不需要继续递归的条件&#xff08;base case&#xff09;有当得到了子问题的结果之后的决策过程不记录每一个子问题的解 暴力递归的要点大致可以分为以上四条&#xff0c;但是总结起来就是一句话&#xff1a;不断…

记录Taro巨坑,找不到sass类型定义文件

问题 taronutuisassts项目里tsconfig.json一直报红报错。 找不到“sass”的类型定义文件。 程序包含该文件是因为: 隐式类型库 “sass” 的入口点 其实正常人想的肯定是装上 types/sass试试。开始我试过了&#xff0c;没用。删了依赖重装也没用。后面在issue中找到答案了 解决…