three.js 3D卡片化按钮，点击事件不触发

已于 2023-05-23 16:35:19 修改
阅读量1.8k 收藏 2
点赞数
文章标签： 前端 three.js
于 2022-02-24 13:19:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41026858/article/details/123109515
版权

使用THREE.CSS3DObject(DOMElement) 可以将按钮 Dom 元素转换为 object3D，结果却发现添加点击事件不触发，但是mousedown事件却可以触发
所以怀疑时three.js 版本的问题，现在我的版本为 “three”: “^0.137.5”,，随后将版本调整为 0.130.0
点击事件就可以正常触发了
在这里插入图片描述

前端小白小白白
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
threeJS 实现加载模型 + 页面按钮交互 + 显示css2Renderer标注
C_jian_的博客
09-06 1685
threeJS 实现加载模型 + 页面按钮交互 + 显示css2Renderer标注
字母三角形（AlphabetTriangle）
知屋安砖
07-14 1672
字母三角形（AlphabetTriangle）示例HTMLCSSJS 更多有趣示例 尽在小红砖社区 示例 HTML <html lang="en"> <head> <title>AlphabetTriangle</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale
ThreeJs CSS3DObject 点击失效问题
wv112406的博客
07-04 1656
想实现一个在选中物体，弹出菜单，结果发现，点击会失效。之前绑定在dom中click事件不会触发。Google了一下，找到解决方法。
three CSS2DRenderer 标签位置偏移和点击事件无效
weixin_45692986的博客
08-26 3059
three CSS2DRenderer 标签位置偏移和点击事件无效
Threejs进阶之五：使用CSS2DRenderer给模型添加HTML标签
九仞山的专栏
04-22 2954
详细介绍了CSS2DRenderer的使用，结合模型和Raycaster光线投射，实现了选中模型弹出标签显示信息的效果
three加入CSS2DRenderer后产生冲突的解决方法
qq_40712151的博客
01-06 592
加入CSS2DRenderer产生冲突的解决方法
Three.js-webgl物联网粮仓3D可视化
03-12
本项目名为"Three.js-webgl物联网粮仓3D可视化"，是基于WebGL技术的3D可视化管理系统，利用了Three.js库以及Vue.js框架，旨在实现对粮仓的高效管理和监控。通过JavaScript语言进行编程，结合物联网技术，该系统能够...
three.js 3D地球实例，支持国家点击和飞线
02-11
1. **three.js库**：three.js是JavaScript的3D库，它抽象了WebGL接口，让开发者无需深入了解底层图形编程就能创建复杂的3D场景。其核心概念包括场景（Scene）、相机（Camera）、几何体（Geometry）、材质（Material...
three.js 可视化大屏 3D场馆模型Demo
02-26
在本项目中，"three.js 可视化大屏 3D场馆模型Demo"是一个基于最新前端技术栈的实现，旨在帮助新手学习如何利用three.js创建3D场馆模型，并将其应用于大屏幕展示。这个项目结合了Vue3、Vite和TypeScript等现代Web...
three.js. 3D机房项目
09-06
【描述】"使用three.js开发的3D机房项目"意味着项目的核心是three.js，这是一个开源的JavaScript库，专门用于创建和展示3D计算机图形。通过这个项目，开发者可以构建交互式的、高细节度的机房模型，包括服务器、空调...
Three.js3D场景编辑器（vue3版本）
10-18
构建的three.js3D场景编辑器。支持场景导入，导出。自定义配置。 导出的文件支持https://www.npmjs.com/package/scene-view。解析器解析渲染。 目前为纯前端单机版。 当前文件为打包后文件，可自己启动服务进行查看...
Threejs官例解析，标签&css2dlabel（一）
映月潜的博客
01-16 6295
最近需要给自个儿项目的模型加上标签，来显示一些有的没的的数据。 去例子萌里瞄了一眼，发现了css2dlabel 这个例子。 远瞅是这样的！其实近瞅也这样，这个顶着一个moon的月亮会绕着这个地球一直旋转，上面的标签也会和他一起移动。（我总感觉应该顶一个奋斗当标签） 闲言少叙，来看看咋用的。 调用篇 拿月球举例子吧 生成球。这个瞄一眼应该不会有太大的问题。 shininess。默认是30，看起来会有...
three.js： 点击交互事件 含解决点击的物体与看到的不一致问题（非全屏/多边形偏移）
weixin_1095的博客
07-04 2550
在 three.js 中，可以通过添加事件监听器来实现点击交互事件。
使用CSS2DRenderer在3D项目中创建Label标签并添加点击事件（代替鼠标射线检测）
Zmikoo学习之路
05-12 1598
创建控制器的时候传入labelRenderer.domElement，这样在控制旋转移动3D模型的时候标签可以同步跟着动。创建lable，要把label放在3D场景中的什么位置就设置为什么位置(label本质是div标签)刷新渲染的时候记住同步刷新 labelRenderer。创建场景相机灯光加载模型等代码省略。引入CSS2DRenderer。
Threejs加载外部glb文件模型不显示
kk7521的博客
01-28 8893
文章目录一、问题代码1、主页面代码2、js代码二.问题分析总结 一、问题代码 1、主页面代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>军营展示</title>zhuyem
three.js模拟驾驶游览艺术展厅---打造超级相机控制器
liuhao9999的博客
06-22 639
three.js模拟驾驶游览艺术展厅---打造超级相机控制器
vue中使用threejs的CSS2DRenderer的问题
Beam
12-06 7445
引用与使用 1、配置webpack.base.conf文件 往CSS2DRenderer中导入THREE，配置webpack.base.conf文件如下： { test: require.resolve("three/examples/js/renderers/CSS2DRenderer"), use: "imports-loader?THREE=three" } 说明： 当报错THREE未...
网站基本布局CSS
最新发布
m0_46608027的博客
07-24 826
* 滚动条轨道样式 *//* 滚动条样式 *//* 滑块样式 */
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值