在[email protected]版本后，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)