ThreeJs CSS3DObject 点击失效问题

这篇具有很好参考价值的文章主要介绍了ThreeJs CSS3DObject 点击失效问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

想实现一个在选中物体,弹出菜单,结果发现,点击会失效

	  <ul id="menu" class="list-group list-group-full">
        <li class="list-group-item" onclick="test()">24小时曲线</li>
        <li class="list-group-item" onclick="test()">72小时曲线</li>
      </ul>
	  const tag = new CSS3DObject(dom);
      tag.scale.set(0.05, 0.05, 0.05); //缩放标签尺寸

      let position = this.getWorldPosition(this.hightLightObject);
      let size = this.getSize(this.hightLightObject);
      let offsetY = size.y / 2;

      tag.position.x = position.x + offset.x;
      tag.position.y = position.y + offsetY + offsetY / 4 + offset.y;
      tag.position.z = position.z + offset.z;
      this.scene.add(tag);

之前绑定在dom中click事件不会触发。

Google了一下,找到解决方法
https://discourse.threejs.org/t/onclick-is-not-working-on-css3dobject/31108文章来源地址https://www.toymoban.com/news/detail-534887.html

dom.addEventListener('pointerdown', () => { alert(2) })

到了这里,关于ThreeJs CSS3DObject 点击失效问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • CSS3提高: CSS3 3D转换

    3D 转换   我们生活的环境是 3D 的 ,照片就是 3D 物体 在 2D 平面 呈现的 例子。 有什么特点 近大远小。 物体后面遮挡不可见 我们在网页上构建 3D 效果的时候参考这些特点就能产出 3D 效果。 三维坐标系 三维 坐标系其实就是指立体空间,立体空间是由 3 个轴共同组成 的。

    2024年02月01日
    浏览(54)
  • Vue点击事件失效

    在码代码的时候发现, 使用Vue的点击事件突然失效,就算是打印输出也没有反应 , 回过头来发现是自己在引入better-scroll 的时候出现的问题, 实现滑动效果的时候 , 没有添加配置项 click: true; 导致子组件的点击事件失效  另外其他两种可能导致点击事件失效的原因:  1. divspan 事件

    2024年02月14日
    浏览(49)
  • uniapp h5 echarts 打包后图表点击失效/及其他失效

    pc端 window11 hbuilderx版本 3.8.12 echarts版本 5.4.3 在main.js 加上 window.wx = {} // 开发正常 打包后 图表点击等也会失效 window.wx = null 会报错 打包后自动检测环境,会优先走到 wx里去。进去就不出来了。拉都拉不出来那种。所以重写一下wx

    2024年02月08日
    浏览(39)
  • HTML5和CSS3七CSS3四

    代码下载地址 Transision过渡动画是从一个状态到另一个状态,而Animation动画可以有多个关键帧 animation-name:设置动画ID animation-duration:设置动画总时长 animation-timing-function:设置动画时间函数,同过渡动画 animation-iteration-count:设置动画播放次数,默认1次,可以是具体次数也可

    2023年04月23日
    浏览(52)
  • airtest_touch未点击失效

    在使用Airtest进行WEB测试自动化相关功能开发过程中,突然发现在本地机器上使用airtest_touch函数时,对于截图扫描后却无法点击对应页面中图片。 尝试从网络上进行搜索,有同学说是版本的问题,不置可否!!! 当我们打开测试报告,发现对于图片识别算法,已经是准确识别

    2023年04月22日
    浏览(35)
  • day8 CSS3渐变gradients+CSS3过渡transition

    属性 transition 简写属性,用于在一个属性中设置四个过渡属性。 transition-property 规定应用过渡的 CSS 属性的名称。 transition-duration 定义过渡效果花费的时间。默认是 0。 transition-timing-function 规定过渡效果的时间曲线。默认是 “ease”。 transition-delay 规定过渡效果何时开始。默认

    2024年01月17日
    浏览(43)
  • 【CSS3】CSS3 3D 转换 ② ( 3D 透视视图 | “ 透视 “ 概念简介 | 视距与成像关系 | CSS3 中 “ 透视 “ 属性设置 | “ 透视 “ 语法设置 | 代码示例 )

    在本博客中引入 3D 效果 透视视图 Perspective 概念 ; 3D 视图中 产生 3D 效果 , 最终要的是有透视效果 , 通俗的讲 \\\" 透视 \\\" 就是实现 \\\" 近大远小 \\\" 的效果 ; 透视 就是 将 3D 空间中的物体 投影显示到 2D 平面中 ; 透视视图 ( Perspective View ) : 近大远小 , 符合正常人眼观察 3D 世界的规律

    2024年02月13日
    浏览(41)
  • CSS选择器-CSS3属性

    持续更新… 1、CSS3的概念和优势 CSS3是CSS技术的升级版本,CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂,所以,把它分解为一些小的模块,更多新的模块也被加入进来。这些模块包括:盒子模型、列表模块、超链接方式、语言模块、

    2024年02月11日
    浏览(42)
  • 【CSS3】CSS3 3D 转换 ① ( CSS3 3D 转换简介 | 3D 物体与 2D 物体区别 | 3D 空间坐标系 | 常用的 3D 转换属性 | 3D 位移转换语法 | 代码示例 )

    3D 显示的物体 与 平面 2D 显示的物体有明显的不同 , 3D 显示效果有 近大远小 的 特点 ; 元素的 2D 的 转换效果 有 平移 , 旋转 , 缩放 效果 , 同样有对应的 3D 转换效果 ; 2D 平面坐标系 中 , 只有 x 轴 和 y 轴 ; 3D 空间坐标系 比 2D 平面坐标系 多了一个 Z 轴 ; x 轴 : 水平向右 ; 左侧是

    2024年02月12日
    浏览(42)
  • VUE使用Three.js实现模型,点击交互,相机旋转视角跟随移动(Threejs中使用Tweenjs,含demo源码)

    目录 一、Three.js是什么? 二、VUE简单使用Three.js步骤 1.npm安装 2.template模板 3.引入库 4.定义全局变量 5.初始化场景 6.初始化相机 7.初始化灯光 8.初始化渲染器 9.创建模型(这里我搭建的模型是一个简单双面货架模型) 10.根据浏览器窗口自适应 11.初始化函数,页面加载完成时调用

    2024年02月03日
    浏览(61)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包