three.js中加载ply格式的文件,并使用tween.js插件按照json姿态文件运动
先贴一下文件地址:
aa.ply 文件: https://download.csdn.net/download/yinge0508/89595650?spm=1001.2014.3001.5501
new.json
https://download.csdn.net/download/yinge0508/89595641?spm=1001.2014.3001.5501
代码:
<template><div><el-container><el-main><div class="box-card-left"><div id="threejs"></div><button @click="iterateArray" style="position:fixed;top:0;right:0;">开始动画</button></div></el-main></el-container></div>
</template>s
<script>
// 引入轨道控制器扩展库OrbitControls.js
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import { PLYLoader } from "three/examples/jsm/loaders/PLYLoader.js";
import TWEEN from "@tweenjs/tween.js";
import jsonData from "@/assets/new.json";
export default {data() {return {scene: null,mesh: null,camera: null,renderer: null,res1: null,res2: null,index: 0,};},created() {},mounted() {this.name = this.$route.query.name;this.init();},methods: {goBack() {this.$router.go(-1);},init() {// 场景this.scene = new this.$three.Scene();const spotLight = new this.$three.AmbientLight(0xffffff, 10);this.scene.add(spotLight);const spotLight1 = new this.$three.SpotLight(0xffffff, 1);// 设置聚光源位置spotLight1.position.set(1000, 1000, 1000);// 设置聚光源指向的目标位置this.scene.add(spotLight1);const axesHelper = new this.$three.AxesHelper(1000);this.scene.add(axesHelper);const material = new this.$three.MeshBasicMaterial({color: 0x00aadd,side: this.$three.DoubleSide,});// 相机this.camera = new this.$three.PerspectiveCamera(60, 1, 0.01, 2000);this.camera.position.set(1000, 1000, 1000);this.camera.lookAt(0, 0, 0);const loader = new PLYLoader();loader.load("/models/aa.ply", // URL of the PLY file(object) => {// 4, 创建网格模型对象this.mesh = new this.$three.Mesh(object, material);this.scene.add(this.mesh);this.renderer.render(this.scene, this.camera);// Called when the loading is completed},(xhr) => {// Optional progress callbackconsole.log((xhr.loaded / xhr.total) * 100 + "% loaded");},(error) => {// Optional error callbackconsole.error("An error happened", error);});this.renderer = new this.$three.WebGLRenderer();// this.renderer.setClearColor(0xffffff, 0.4); //设置背景颜色和透明度this.renderer.setSize(2000, 1200);this.renderer.render(this.scene, this.camera);window.document.getElementById("threejs").appendChild(this.renderer.domElement);// 渲染场景this.render();// 建相机空间轨道控制器对象const controls = new OrbitControls(this.camera, this.renderer.domElement);controls.addEventListener("change", () => {this.renderer.render(this.scene, this.camera);});},render() {// requestAnimationFrame(this.render);this.renderer.render(this.scene, this.camera);},// 假设这是你的数组// 这是你想要执行的方法processItem(item, index, callback) {setTimeout(() => {callback(); // 当方法执行完毕后调用回调函数}, 2000);
},// 开始遍历数组iterateArray() {this.next(); // 开始遍历
},
next() {if (this.index < jsonData.length) {const item = jsonData[this.index];this.processItem(item, this.index, () => {this.start();this.index++; // 更新索引this.next(); // 继续遍历});} else {console.log('All items processed.');}},start() {if (jsonData) {this.loop();if (this.index >= jsonData.length) {return;}let ele1 = JSON.parse(JSON.stringify(jsonData[this.index]));let ele = ele1[0].concat(ele1[1]).concat(ele1[2]).concat(ele1[3]);const mat4 = new this.$three.Matrix4();mat4.elements = ele;const tween0 = new TWEEN.Tween(this.camera.position);let new_p = JSON.parse(JSON.stringify(this.camera.position));const p = new this.$three.Vector3(new_p.x, new_p.y, new_p.z);p.applyMatrix4(mat4);tween0.to({x: p.x, y: p.y, z: p.z}, 2000).easing(TWEEN.Easing.Quadratic.Out);tween0.start()}},loop() {TWEEN.update();this.renderer.render(this.scene, this.camera);window.requestAnimationFrame(this.loop);},},
};
</script>
<style lang="less" scoped>
.box-card-left {display: flex;align-items: flex-start;flex-direction: row;width: 100%;.box-right {img {width: 500px;user-select: none;}}
}
</style>
相关文章:
three.js中加载ply格式的文件,并使用tween.js插件按照json姿态文件运动
先贴一下文件地址: aa.ply 文件: https://download.csdn.net/download/yinge0508/89595650?spm1001.2014.3001.5501 new.json https://download.csdn.net/download/yinge0508/89595641?spm1001.2014.3001.5501 代码: <template><div>&…...
性能对比:Memcached 与 Redis 的关键差异
性能对比:Memcached 与 Redis 的关键差异 在选择合适的缓存系统时,Memcached 和 Redis 是最常被提及的两种技术。它们都是内存存储系统,用于提高数据访问速度和应用性能。尽管它们在功能上有很多相似之处,但在性能、特性和应用场…...
app-routing.module.ts 简单介绍
Angular的路由是一种功能,它允许应用程序响应不同的URL路径或参数并根据这些路径加载不同的组件。app-routing.module.ts是Angular项目中负责设置应用程序路由的文件。 以下是一个简单的app-routing.module.ts文件示例,它配置了三个路由: i…...
基于JSP的水果销售管理网站
你好,我是计算机学姐码农小野!如果有相关需求,可以私信联系我。 开发语言: Java 数据库: MySQL 技术: JSP技术 工具: 未在文档中明确指出,可能包括但不限于IDEs(如Ec…...
web3d值得学习并长期发展,性价比高吗?
在数字化浪潮日益汹涌的今天,Web3D技术以其独特的魅力和广泛的应用前景,逐渐成为技术领域的焦点。对于许多热衷于技术探索和创新的人来说,学习并长期发展Web3D技术无疑是一个值得考虑的选择。那么,Web3D技术的学习和发展究竟是否性…...
【大数据面试题】38 说说 Hive 怎么行转列
一步一个脚印,一天一道大数据面试题 博主希望能够得到大家的点赞收藏支持!非常感谢 点赞,收藏是情分,不点是本分。祝你身体健康,事事顺心! 行转列 假设我们有一张名为 sales_data 的表,其中包含…...
C语言中的二维数组
文章目录 🍊自我介绍🍊二维数组🍊代码实战 你的点赞评论就是对博主最大的鼓励 当然喜欢的小伙伴可以:点赞关注评论收藏(一键四连)哦~ 🍊自我介绍 Hello,大家好,我是小珑也要变强&…...
Android12 添加屏幕方向旋转方案
添加屏幕方向属性值 device/qcom/qssi/system.prop persist.panel.orientation0修改开机动画方向 frameworks/base/cmds/bootanimation/BootAnimation.cpp status_t BootAnimation::readyToRun() {mAssets.addDefaultAssets();mDisplayToken SurfaceComposerClient::getIn…...
Harmony-(1)-TypeScript-ArkTs
1.TypeScript 1.1变量 布尔值let isDone: boolean false;数字let decLiteral: number 2023; let binaryLiteral: number 0b11111100111; let octalLiteral: number 0o3747; let hexLiteral: number 0x7e7; console.log(decLiteral is decLiteral)字符串let name: string…...
TC8:SOMEIP_ETS_007-008
SOMEIP_ETS_007: echoBitfields 目的 检查位字段是否能够被顺利地发送和接收。 测试步骤 Tester:创建SOME/IP消息Tester:使用method echoBitfields发送SOME/IP消息DUT:返回method响应消息,其中位字段的顺序与请求相比是反向的期望结果 3、DUT:返回method响应消息,其中位…...
[网络编程】网络编程的基础使用
系列文章目录 1、 初识网络 网络编程套接字 系列文章目录前言一、TCP和UDP协议的引入二、UDP网络编程1.Java中的UDP2.UDP回显代码案例3.UDP网络编程的注意事项 三、TCP网络编程1.TCP回显代码案例2.TCP多线程使用 总结 前言 在学习完基础的网络知识后,完成跨主机通…...
Postman中的Cookie和会话管理:掌握API测试的关键环节
Postman中的Cookie和会话管理:掌握API测试的关键环节 在API测试过程中,正确处理Cookie和会话管理对于模拟用户登录、维持会话状态以及测试需要用户认证的API至关重要。Postman提供了多种功能来帮助测试人员管理Cookie和会话,确保测试的准确性…...
python脚本,识别pdf数据,转换成表格形式
可以使用Python库来识别PDF文件并将其转换为表格形式。下面是一个示例脚本,使用了tabula-py库来进行PDF数据提取和转换操作。 首先,安装tabula-py库。可以使用以下命令来安装: pip install tabula-py然后,使用以下代码来实现PDF…...
Linux环境安装KubeSphere容器云平台并实现远程访问Web UI 界面
文章目录 前言1. 部署KubeSphere2. 本地测试访问3. Linux 安装Cpolar4. 配置KubeSphere公网访问地址5. 公网远程访问KubeSphere6. 固定KubeSphere公网地址 前言 本文主要介绍如何在Linux CentOS搭建KubeSphere并结合Cpolar内网穿透工具,实现远程访问,根…...
jumpserver web资源--远程应用发布机
1、环境 jumpserver:3.10.10 远程发布机:windows 2019 2、windows 2019准备 保证windows 正常登录,并且可以访问jumpserver 3、添加远程发布机 能正常连接就继续 可看到这里正常了 4、添加web资源 找到我们需要自动登录界面 获取相关元素选…...
Linux环境docker部署Firefox结合内网穿透远程使用浏览器测试
文章目录 前言1. 部署Firefox2. 本地访问Firefox3. Linux安装Cpolar4. 配置Firefox公网地址5. 远程访问Firefox6. 固定Firefox公网地址7. 固定地址访问Firefox 前言 本次实践部署环境为本地Linux环境,使用Docker部署Firefox浏览器后,并结合cpolar内网穿…...
人工智能与机器学习原理精解【8】
文章目录 马尔科夫过程论基础理论函数系的定义、例子和分类一、函数系的定义二、函数系的例子三、函数系的分类 什么是测度定义性质种类应用总结 计算测度的公式1. 长度(一维测度)2. 面积(二维测度)3. 体积(三维测度&a…...
关于Protobuf 输入输出中文到文件中的一系列问题
一、不含中文的常规处理 //定义 message Value {repeated uint32 uiMain 1; repeated uint32 uiSub 2; }message Simulate {repeated Value data 1; }//文件 data {uiMainAds : 36598uiMainAds : 35675uiMainAds : 36756 uiSubAds : 16924uiSubAds : 16488uiSu…...
后端笔记(1)--javaweb简介
1.JavaWeb简介 *用Java技术来解决相关web互联网领域的技术栈 1.网页:展现数据 2.数据库:存储和管理数据 3.JavaWeb程序:逻辑处理 2.mysql 1.初始化Mysql mysqld --initialized-insecure2.注册Mysql服务 mysqld -install3.启动Mysql…...
便携式气象监测系统的优势:精准高效,随行监测
在快速变化的自然环境中,气象信息的准确获取与及时分析对于农业生产、环境保护、科学研究乃至日常生活都至关重要。随着科技的飞速发展,便携式气象监测系统以其独特的优势,正逐步成为气象监测领域的新宠,引领着气象监测技术的革新…...
uniapp App判断是否安装某个app
参考文档:HTML5 API Reference 项目中需要判断是否安装了uber,这里拿uber举例 ,判断是否安装uber if (plus.runtime.isApplicationExist({pname: com.ubercab.eats, //Android平台通过pname属性(包名)查询action: ub…...
C/C++大雪纷飞代码
目录 写在前面 C语言简介 EasyX简介 大雪纷飞 运行结果 写在后面 写在前面 本期博主给大家带来了C/C实现的大雪纷飞代码,一起来看看吧! 系列推荐 序号目录直达链接1爱心代码https://want595.blog.csdn.net/article/details/1363606842李峋同款跳…...
【linux】【设备树】具有 GPIO 控制器和连接器的硬件配置的备树(Device Tree)代码讲解
具有 GPIO 控制器和连接器的硬件配置的备树(Device Tree)代码讲解 背景 -学习Linux设备树 代码 soc {soc_gpio1: gpio-controller1 {#gpio-cells = <2>;};soc_gpio2: gpio-controller2 {#gpio-cells = <2>;}; };connector: connector {#gpio-cells = <2>…...
【2025留学】德国留学真的很难毕业吗?为什么大家不来德国留学?
大家好!我是德国Viviane,一句话讲自己的背景:本科211,硕士在德国读的电子信息工程。 之前网上一句热梗:“德国留学三年将是你人生五年中最难忘的七年。”确实,德国大学的宽进严出机制,延毕、休…...
Apache Solr 最常用的命令
目录 一、Solr 安装与配置 1.1 下载与安装 1.2 启动与停止 二、Core 和 Collection 管理 2.1 创建与删除 2.2 核心操作 三、索引管理 3.1 添加与删除文档 3.2 批量操作 3.3 提交与优化 四、查询与检索 4.1 基本查询 4.2 高级查询 五、Schema 管理 5.1 字段管理 …...
经济下行,企业还在“裁员至上”?
最近小红书、B站崩溃,又延伸到某云服务厂商问题频发,让人忍不住戏谑:“这算不算裁员裁到大动脉?” 在阿道看来,各大企业的裁员动作,绕不开的依旧是“人月神话”:盲目加人带来的是成本的倍增和效…...
学习笔记之Java篇(0729)
p 数组 大纲知识点数组的概念数组的定义、四个特点数组的常见操作普通遍历、for-each遍历、java.util.Array类用法多维数组多维数组的内存结构、存储表格、Javabean和数组存储表格常见算法冒泡排序基础算法、冒泡排序优化算法、二分法查找(折半查找) 1、…...
吃肉的刷题记录4-基础知识-字符串
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 leetcode.186.反转字符串中的单词 leetcode.186.反转字符串中的单词 https://leetcode.cn/problems/reverse-words-in-a-string-ii/ 给你一个字符数组 s …...
人工智能与机器学习原理精解【7】
文章目录 凸优化基础理论加权正规方程线性回归模型加权最小二乘法加权正规方程注意使用Diagonal函数使用diagm函数总结 加权最小二乘法加权最小二乘法的定义加权最小二乘法的算法加权最小二乘法的计算加权最小二乘法的原理一、基本思想二、原理详解三、总结 加权最小二乘法的例…...
ResNet学习笔记
《Deep Residual Learning for Image Recongition》:用于图像分类的深度残差学习。 ResNet(残差网络)是在2015年由微软研究院的Kaiming He等人提出的,旨在解决深度神经网络训练过程中的梯度消失、梯度爆炸问题,并允许…...
使用chainlit快速构建类似OPEN AI一样的对话网页
快速开始 创建一个文件,例如“chainlit_chat” mkdir chainlit_chat进入 chainlit_chat文件夹下,执行命令创建python 虚拟环境空间(需要提前安装好python sdk。 Chainlit 需要python>3.8。,具体操作,由于文章长度问题就不在叙述…...
【根据字符出现频率排序】python刷题记录
R2-字符串算法 包哈希表的呀。 注意 class Solution:def frequencySort(self, s: str) -> str:dictdefaultdict(list)#字符串不能直接排序,需要转换为列表["a","b","c"]slist(s)for str in s:if not dict[str]:dict[str]1else:…...
活动报名小程序
#活动报名工具# # 活动报名小程序 ## 项目简介 一款通用的活动报名工具,包含活动展示,微信支付,订单管理,分享评价等功能。 品客聚精彩,有你才精彩!不只有线下活动还可以进行线上裂变活动。 …...
unity基础问题
1.一个列表中的UI有放大效果,用什么实现? 缩放,Layout组件可以勾选使用子级缩放,这样缩放之后也能保持间距 2.UGUI事件传递机制的冒泡机制是怎样的 事件系统从内向外遍历UI层次结构,通知父级UI元素有关该事件的信息。类…...
RedHat Enterprise Linux 7 YUM源(本地/网络源)配置详解
目录 一、挂载 二、建立本地源 三、建立网络源 四、验证可行性 一、挂载 ——将光盘挂载到 /mnt 下 当/mnt中有如图内容时,即挂载成功 若挂载光驱/dev/sr0时报错:mount: no medium found on /dev/sr0 解决措施:查看该设备状态是否全部勾选…...
关于顺序表数组下标的一些关系梳理
...
VS C++ Project(项目)的工作目录设置
如果只是简单创建一个VS CProject或者MFC Project,可能很多时候,只关心将Project放在硬盘的那个位置,与Project目录相关的的其他问题,并不引人注意,我们也不是十分在意。有时我们不得不进行工作目录方面的设置…...
STM32自定义协议串口接收解析指令程序
1、在使用串口接收自定义协议指令时,需要串口解析收到的是什么指令,举例通信报文为 上位机->单片机 名称 长度 备注 帧头 1Byte 0x5A 0x5A 帧长度 1Byte 数据包的长度0x00-0xFF 数据包 命令字 1Byte 功能标识 数据 可以为空 校验 …...
STM32——GPIO(点亮LEDLED闪烁)
一、什么是GPIO? GPIO(通用输入输出接口): 1.GPIO 功能概述 GPIO 是通用输入/输出(General Purpose I/O)的简称,既能当输入口使用,又能当输出口使用。端口,就是元器件…...
VulnHub靶机入门篇--kioptrix.level 3
1.环境准备 靶机:Kioptrix Level 3(Nat模式) 下载地址:https://download.vulnhub.com/kioptrix/KVM3.rar 攻击机:kali(192.168.26.128)(Nat模式) 2.渗透测试 信息收…...
aiGPT系统源码★重大升级★AI写作/AI绘画/AI音乐/AI视频
亲爱老铁们好,又一段时间未更新内容了,我依然是爱你们的神点妹,今天点妹给大家带来一波新的福利:咱们用的aiGPT经过攻城师们近半年来夜以继日的技术升级,今天终于迎来了新版上线首秀。此次升级内容包含:首先…...
Vue Router高级用法:动态路由与导航守卫
Vue Router是Vue.js官方的路由管理器,它和Vue.js的核心深度集成,让构建单页应用变得轻而易举。 动态路由 动态路由允许你在路由路径中使用变量,这些变量可以从实际的URL中获取,并传递给对应的路由组件。 定义动态路由 在route…...
江科大/江协科技 STM32学习笔记P9-11
文章目录 OLED1、OLED硬件main.c EXTI外部中断1、中断系统2、中断执行流程图3、STM32中断4、中断地址的作用5、EXTI6、EXTI基本结构7、AFIO复用IO口8、EXTI框图或门和与门 9、旋转编码器介绍10、硬件电路 OLED 1、OLED硬件 SCL和SDA是I2C的通信引脚,需要接在单片机…...
【培训通知】成为Power BI数据分析可视化实战第一人,加入3天直播即可
Power BI数据分析可视化实战课程培训是一门旨在提升学员在数据分析与可视化领域能力的专业课程。以下是对该培训课程的详细介绍: 一、课程概述 Power BI 是一种业务分析服务,能够提供深入的见解,帮助用户实现快速、明智的决策。该课程通过实…...
24暑假算法刷题 | Day22 | LeetCode 77. 组合,216. 组合总和 III,17. 电话号码的字母组合
目录 77. 组合题目描述题解 216. 组合总和 III题目描述题解 17. 电话号码的字母组合题目描述题解 77. 组合 点此跳转题目链接 题目描述 给定两个整数 n 和 k,返回范围 [1, n] 中所有可能的 k 个数的组合。 你可以按 任何顺序 返回答案。 示例 1: 输…...
一篇文章告诉你对讲机为什么不能被手机取代的7个原因
在智能时代,手机几乎无处不在,涵盖了从基本通信到多媒体娱乐的一切功能。然而,即使在这种情况下,对讲机仍然没有被完全取代。这不仅仅是出于怀旧或专业需求,还有许多实质性的原因使得对讲机在特定领域和情况下仍然保持…...
LION论文阅读
一、论文主要出发点 3D目标检测的性能受限于3D卷积的局部感受野。 Transformer在3D检测领域效果很好,但由于算力限制,已有的工作在pillar内,或将voxel分组在组内进行特征交互,阻碍了他们捕捉更远程的依赖关系。 线性RNN算子的计…...
在Android上实现汉字笔顺动画效果——HanZiWriter
序,万般皆是命,半点不由人。 Hanzi Writer 是 javascript 免费开源库,根据汉字书写时按照笔画顺序的特征,可以播放正确笔画顺序的描边动画和练习测试。支持简体字和繁体字。可以让全球用户能够通过手绘模仿的方式来学习和练习书写…...
黑马头条vue2.0项目实战(一)——项目初始化
1. 图标素材(iconfont简介) 制作字体图标的工具有很多,推荐使用:iconfont-阿里巴巴矢量图标库。 注册账户 创建项目 可以根据项目自定义 class 前缀 上传图标到项目 生成链接,复制 css 代码,在项目中使用…...
Unity Shader动画:用代码绘制动态视觉效果
在Unity中,Shader是运行在GPU上的小程序,用于控制顶点和像素的渲染过程。通过编写自定义Shader,开发者可以创造出各种令人惊叹的动画效果,从简单的颜色变化到复杂的流体模拟。本文将探讨如何使用Unity Shader来实现动画效果。 Sh…...