目录

CSS2DObject无法触发点击事件

three.js@0.13X版本后,CSS2DRenderer中的 CSS2DObject无法触发点击事件。 原因是OrbitControls中会对绑定的Dom进行事件监听,并且阻止穿透。

解决办法是:

  • 在实例化 OrbitControls 时绑定renderer(而不是CSS2DRenderer)
  • 这时候OrbitControls无法转动,因为CSS2DRenderer的图层较高,所以还需要给 CSS2DRendererpointerEvents='none'
  • 再给 CSS2DObject的el的pointerEvents='auto'
Typescript 复制代码
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far)
const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true })
renderer.setSize(element.offsetWidth, element.offsetHeight)
element.appendChild(renderer.domElement)
const CSSRenderer = new CSS2DRenderer()
CSSRenderer.setSize(element.offsetWidth, element.offsetHeight)
CSSRenderer.domElement.style.position = 'absolute'
CSSRenderer.domElement.style.top = '0px'
element.appendChild(CSSRenderer.domElement)
const control = new OrbitControls(camera, renderer.domElement) // important!
CSSRenderer.domElement.style.pointerEvents = 'none' // important!
// CSSObject
const div = document.createElement("div")
div.style.pointerEvents = "auto" // important!
const object = new CSS2DObject(div)
本文是转载文章,点击查看原文
如有侵权,请联系 xyy@jishuzhan.net 删除
相关推荐
带娃的IT创业者7 分钟前
《AI大模型趣味实战 》第8集:多端适配 个人新闻头条 基于大模型和RSS聚合打造个人新闻电台(Flask WEB版) 2
前端·人工智能·flask
飞天牛牛23 分钟前
解决前端异步请求中的数据竞争问题
前端
夕阳下的橘子34 分钟前
What I Learned from State of React 2024
前端
helloworld_工程师38 分钟前
调用DeepSeek API增强版纯前端实现方案,支持文件上传和内容解析功能
前端·javascript·后端
前端付杰38 分钟前
轻松搞定 TIFF:基于 Three.js 和 Cesium 的渲染技巧分享
前端·three.js·cesium
前端咸鱼陈42 分钟前
🔥【2025 Vue技术风暴】Vue 3.6性能革命:Vapor模式+Alien Signals,如何颠覆前端开发?实战代码解析!
前端·vue.js
日升43 分钟前
Vite CVE-2025-30208 安全漏洞
前端·vue.js·vite
渔樵江渚上43 分钟前
TypeScript 完全指南
前端·javascript·typescript
一个public的class44 分钟前
从0开始配置 React 开发环境
前端·react.js·前端框架·node.js