在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)