CSS2DObject无法触发点击事件

肛肠科冯主任2025-03-21 15:09

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

解决办法是:

在实例化 OrbitControls 时绑定renderer(而不是CSS2DRenderer)
这时候OrbitControls无法转动，因为CSS2DRenderer的图层较高，所以还需要给 CSS2DRenderer的pointerEvents='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)