解决threejs切换页面后还触发三维展示页面的点击事件的问题

已于 2023-08-15 18:24:40 修改
阅读量205 收藏
点赞数 1
文章标签： vue.js 前端 javascript
于 2023-08-03 16:46:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhangnx10000/article/details/132086930
版权

我是用setup语法糖做的，所以当离开页面的时候，会触发生命周期中的onUnmounted钩子函数，然后只需要在里面使用cancelAnimationFrame函数把注册的渲染器注销一下就可以了。
注册的时候：
在这里插入图片描述
注销的时候：
在这里插入图片描述

步致道
关注
tweenjs动画库配合ThreeJS使用DEMO
12-09
tweenjs动画库配合ThreeJS使用DEMO
vue+ threeJS项目中取消鼠标右击选中默认弹框事件
weixin_58149434的博客
03-23 786
一个页面中，BODY中用oncontextmenu='return false'来取消鼠标右键；在JS中设置oncontextmenu='return true'用window.document.oncontextmenu = function(){ return false;禁止鼠标在页面被拖动；很多网站上的页面内容是不允许复制的，这样可以防止用户或者程序恶意的去抓取页面数据；网银转账时，输入对方卡号，需要输入两次，通常第二次输入的输入框是不允许粘贴的，这样就在一定程度上保证了卡号的准确性。
有关js改变class或remove掉class之后，原class绑定事件依旧存在的问题
十年砍柴的博客
10-19 664
今天在进行前端js（jquery）编写的时候需要在多个部分做关联事件，于是想到了不同阶段给予不同的class来进行事件委托，但是一切做完之后，发现改变或删除元素class之后，依旧会保持原class的绑定事件。就已经对页面上该元素绑定相关监听事件了，而不是你点击的时候才去匹配的，所以即使你后来改了，监听事件还是依然能够生效。 这个时候你可以在你最初的事件上进行分支判断，判断是否有某个class（hasClass）来进行不同的处理； ...
Threejs多个相同格式模型同一页面加载切换
qq_53479183的博客
03-21 1341
Threejs多个相同格式模型单页面切换加载
在vue中使用three.js切换页面后销毁，防止内存溢出
m0_49083276的博客
10-10 3059
用three.js写了一个webgl页面，发现这个webgl页面在和普通页面来回切换多次后会导致页面卡顿。
threejs切换模型界面卡顿问题
m0_73495473的博客
01-09 659
如下为threejs官方给出的代码，在销毁模型时使用，即可清除内存。没有在切换模型时清除上一个模型占用的内存。
三维机房(three.js).zip
05-17
总的来说，"三维机房(three.js)"项目展示了如何运用three.js来创建交互式的3D场景。通过学习这个项目，你可以掌握如何构造3D对象、设置光照、实现交互以及运用动画。对于想要深入了解WebGL和three.js的开发者来说，...
threejs 制作传送阵效果的贴图
12-23
Three.js是一个强大的3DWebGL库，它允许开发者在浏览器中创建丰富的三维图形和交互式体验。 首先，我们要理解"传送阵效果"的概念。在游戏或虚拟环境中，这种效果通常表现为一个闪烁的法阵，当角色或物体进入后会被...
three.js+photo-sphere-viewer.js 全景场景切换，全景家居，全景图效果预览
09-01
`three.js` 是一个强大的3D图形库，它利用WebGL API来在浏览器中呈现复杂的三维模型和场景。WebGL是一种JavaScript接口，允许在浏览器中进行硬件加速的3D图形渲染，无需任何插件。three.js通过提供简洁的API，降低了...
threejs 加载两个场景_threejs中的三维场景操作
weixin_39889788的博客
12-30 929
在threejs开发中，不可避免的需要对三维场景进行交互，例如对模型进行旋转，缩放，平移等操作。接下来，我们就聊一聊如何进行三维场景的交互。控制的对象是谁?在三维的世界中，如果想达到场景的TRS(translate、rotate、scale)操作，我们其实有两种办法来做到。一种是对模型本身进行TRS操作，通过改变模型的属性，达到视觉上的效果。第二种是对相机进行操作，把相机拉远模型自然缩小了，把相机...
three.js： 点击交互事件 含解决点击的物体与看到的不一致问题（非全屏/多边形偏移）
weixin_1095的博客
07-04 2873
在 three.js 中，可以通过添加事件监听器来实现点击交互事件。
threejs学习 ，GUI控制面板更改dom后问题记录
add_ysd的博客
10-17 308
threejs 学习文章
vue-cli + three.js 解决页面跳转时Css2dObject遗留在dom的问题
Bruce_wjh的博客
05-31 3609
最近再做项目的时候，采用vue + three.js进行开发大型的3d场景项目，该项目中涉及到需要为建筑中的元素添加标签说明一些信息、名称，遂决定使用three.js的CSS2DRenderer和CSS2DObject进行标签的绘制，用的代码如下： function makeCSS2DObject(position, radius, text) { const div = document.createElement( 'div' ); div.className = 'scene-la
vue+threejs 销毁临时加载的模型
tutouxiaoyaonie的博客
10-08 1568
vue+threejs 销毁临时加载的模型
SprinBoot+Vue远程教育网站的设计与实现
赵广陆
09-10 1243
目录1 项目介绍2 项目截图3 核心代码3.1 Controller3.2 Service3.3 Dao3.4 application.yml3.5 SpringbootApplication3.5 Vue4 数据库表设计5 文档参考6 计算机毕设选题推荐7 源码获取 1 项目介绍 博主个人介绍：CSDN认证博客专家，CSDN平台Java领域优质创作者，全网30w+粉丝，超300w访问量，专注于大学生项目实战开发、讲解和答疑辅导，对于专业性数据证明一切！ 主要项目：javaweb、ssm、spring
Vue CLI：初学者指南与深入理解
x15514104477的博客
09-10 975
本文为初学者提供了一个关于如何使用 Vue CLI 的指南，并帮助读者深入理解其核心概念。Vue CLI 是一个用于快速搭建 Vue.js 项目的命令行工具，适用于所有水平的开发者。
美术|基于java+vue的美术外包管理信息系统(源码+数据库+文档)
weixin_66413741的博客
09-10 876
游戏美术管理信息系统。该系统基于B/S即所谓浏览器/服务器模式，应用java技术，选择MySQL作为后台数据库。系统主要包括系统首页，个人中心，用户管理，公司管理，作品信息管理，作品订单管理，外包需求管理，外包应征管理，流程追踪管理，在线交流管理，在线回复管理，管理员管理，留言反馈，系统管理等功能模块。本文首先介绍了游戏美术外包管理信息技术发展背景与发展现状，然后遵循软件常规开发流程，首先针对系统选取适用的语言和开发平台，
el-input设置type=‘number‘和v-model.number的区别
最新发布
weixin_46394325的博客
09-11 417
el-input设置type=‘number’和.number修饰符的区别
解决Vue路由切换页面不更新问题的三种方法
本文主要探讨了Vue路由切换页面不更新的问题及其解决方案。在Vue应用中，由于路由切换实际上是组件的动态加载而不是实际的页面刷新，可能会导致某些情况下组件未能正确更新。针对这个问题，本文提供了两种解决方案：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值