threejs学习（十）threejs添加mousedown和mouseup事件无效

最新推荐文章于 2024-04-17 16:18:25 发布
最新推荐文章于 2024-04-17 16:18:25 发布
阅读量1.4k 收藏 1
点赞数 4
分类专栏： threejs从入门到进阶 文章标签： vue js three.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zps925458125/article/details/113309657
版权
在Vue项目中，使用three.js时遇到mousedown和mouseup事件无法正常触发的问题。原因在于Vue与原生JavaScript事件处理存在差异。解决方案是改用pointerdown和pointerup事件，这两个事件在Vue和原生JS环境下都适用。参考解决方案来源于对window对象pointerdown属性的研究。
摘要由CSDN通过智能技术生成

看到网上说是普通js版本和vue项目之间存在不同；
普通的引入threejs可以使用mousedown和mouseup触发事件；
但是vue项目无法使用这两个事件，得用pointerdown和pointerup事件

pointerdown属性也是原生js属性

// 鼠标按下事件
document.addEventListener('pointerdown', this.spriteClick, false);

参考文章地址
windown属性：pointerdown

干饭两斤半
关注
专栏目录
订阅专栏
通过js实现动态化生成列表
络庆钟朔专栏
12-31 1万+
1、Test.html Modal //E-NAME,E-TYPE,E-MON,E-T_MON,REDUCE,E-MONTH var source_data = [ ['农、林、牧、渔业','10','1000','2000','0.12','201507'], ['工业','17','1000','20
JavaScript笔记
shine_my的博客
03-13 3412
JavaScript笔记
three.js加载obj模型添加点击事件及其他
01-04
目前点击物体让物体单独变色还有问题，其他的都是自己敲的，欢迎下载指导
THREEJS - mousedown/mouseup等鼠标相关事件失效
Kreme的博客
05-30 2964
在three.js的场景中，我们经常会给鼠标的点击添加交互事件，最常见的方式就是： container.addEventListener("mousedown", function(){ }); 但是，在监听的过程中，发现鼠标的点击事件并不能触发监听事件，造成这种情况的原因一般就是场景中引入了orbitControl控件导致，解决这个问题的方式有如下两种方式： 方式一：修改orbitControl源码 在OrbitControls.js的源码中，搜索关键字mousedown找到onMouseDow
vue中使用three.js加载3d模型，绑定 mouseup 和 mousedown 事件不起作用
qq_37656005的博客
12-17 1758
vue中使用three.js加载3d模型，绑定 mouseup 和 mousedown 事件不起作用， 在Three场景中，如果想要对鼠标进行操作就要引入OrbitControls.js文件，在这种控制方式下，鼠标左键为旋转视角，鼠标中键为拉伸视角，鼠标右键为平移视角。
Three.js mousedown不触发
eevee_1的博客
11-04 408
想点击3D物体触发事件，然后进行旋转操作之后再抬起的时候也会触发click事件，因此想在鼠标按下的时候记录一下鼠标位置，click触发的时候判断位置是否相等再触发事件。 但是试了好久mousedown事件怎么都不触发，最后发现是和OrbitControls冲突了。 需要去修改OrbitControls的源码，搜索mousedown找到onMouseDown函数里的event.preventDefa...
selenium自动化之js处理点击事件失效
weixin_34184158的博客
11-27 4276
　　有时候，元素明明已经找到了，使用click()就是无法触发点击事件（当然，这种情况十分少见，至少我只遇到过一次）。下面告诉大家这种场景的解决方案。 　　 　　使用js代码来点击【博客园】这个按钮 　　代码： 　　#!/usr/bin/python3　　# -*- coding: utf-8 -*-　　# @创建时间: 2018/11/27 9:43　　# @创建人 ...
前端面试题干货汇总（超详细）
王俊的博客
07-11 3728
前端面试干货汇总，包括HTTP、JS、CSS等
前端非框架类知识点汇总
weixin_46044936的博客
07-26 2555
html单词库 <link rel="stylesheet" href="css文件路径">css引入 <iframe src="danghang.html" width="100%" height="310px" frameborder="0"></iframe> 图片标签： img src="" title="" alt="" src属性 是指图像文件路径 alt属性 是在图片加载不出来时替换成文本 title属性 是在鼠标悬停的时候显示 srcset属性 是在不
threejs Object的点击(鼠标)事件(获取点击事件的object)
qq_42039996的博客
12-16 2252
objects=[]; raycaster = new THREE.Raycaster(); mouse = new THREE.Vector2(); //监听全局点击事件,通过ray检测选中哪一个object document.addEventListener("mousedown", (event) => { 　　event.preventDefault(); 　　this.mouse...
threejs操作glb，gltf格式3D模型案例，包含点击部位高亮操作
08-24
threejs操作glb，gltf格式3D模型案例，包含点击部位高亮操作，控件提示等，也可直接引入到vue项目中使用
CesiumJs+ThreeJs实测
热门推荐
qq_36266612的博客
04-01 2万+
原帖：https://blog.csdn.net/zhishiqu/article/details/79077883 这篇帖子讲述了如何将cesium和threejs结合，但是如果跟着代码敲一遍，会发现并不能加载出threejs的模型。仔细跟着写了编，把遇到的坑做一下说明。 1.要注意threejs的版本。文中所用为r87版的threejs，尝试换成r92，r103，都找不到模型，这个问题后续再探...
ThreeJs 选中物体事件
liudanyang_21的博客
08-02 1347
选中物体变红色demo: https://threejs.org/examples/#webgl_raycast_sprite <!DOCTYPE html> <html lang="en"> <head> <title>three.js webgl - raycast - sprite</title> <meta charset="utf-8"> <meta name="viewport" content="wi
threejs下的鼠标事件的各种XY坐标
qq_40712151的博客
06-16 1486
转载于：https://blog.csdn.net/weixin_41342585/article/details/80659736
three.js（二）
敖丙007的博客
12-13 1031
three.js（二）入门开发
Three.js如何三维建模
u014291990的博客
11-08 6451
Three.js如何三维建模 如果你想开发一款基于浏览器Web平台环境运行的一款三维建模软件，选择WebGL的一款三维引擎Three.js是可行的。 基于WebGL技术的三维建模软件。 目前大多数三维建模软件都是基于OpenGL技术开发，运行在操作系统上，随着5G发展带来的网速提高和浏览器性能的提高，三维建模软件迁移到Web运行是必然的趋势，只是时间问题，下面对目前市场上基于WebGL技术开发的一...
Threejs鼠标
usdnfo的专栏
12-13 699
var raycaster = new THREE.Raycaster(); var mouse = new THREE.Vector2(); function onMouseClick( event ) { //通过鼠标点击的位置计算出raycaster所需要的点的位置，以屏幕中心为原点，值的范围为-1到1. mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1; mous...
Three.js || 优化 || 旋转不触发点击
最新发布
weixin_45862553的博客
04-17 320
优化思路一：新增mousedown监听，设置定时器，落下300秒后值为真；（则长按旋转时值为假，点击时值为真。优化思路二：新增mousedown监听，计算左键落下与抬起时间差，小于阈值才触发查看事件。优化思路三：新增mousedown监听，计算左键落下和抬起位置差，完全相等才触发查看事件。目前采用的是思路三，怕有的人点击快，有的人点击慢，300ms的阈值不普适。
Threejs进阶之十：让模型移动到鼠标点击的指定位置
九仞山的专栏
04-29 2879
介绍了让模型移动到鼠标点击的指定位置的详细思路和方法，里面用到了HTML中DOM获取坐标的属性和方法，Threejs中光线折射的方法，归一化，向量等知识
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

干饭两斤半

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值