ThreeJs CSS2DRenderer、OrbitControls 鼠标事件问题

一、场景A：在ThreeJs3D场景中国使用CSS2DRenderer渲染Html元素，OrbitControls 功能失效

原因分析：

        CSS2DRenderer渲染器会在页面渲染出一个Div，里面包含自定义的html片段，默认情况下该Div或捕获页面的键盘、鼠标事件，导致OrbitControls的相关事件失效

处理方案：

        方案1：修改css2DRenderer对应dom元素的pointerEvents属性为none：

 css2DRenderer.domElement.style.pointerEvents = 'none';

        方案2：修改OrbitControls关联的Dom元素为当前的css2DRenderer.domElement

const controls = new OrbitControls( camera, css2DRenderer.domElement );

二、场景B：在ThreeJs3D场景中国使用CSS2DRenderer渲染Html元素，Html元素中需要绑定鼠标事件，由于为了支持OrbitControls 的事件，按照上述场景A-方案1中的思路设置了禁止事件，所以html元素绑定的事件（click)无效

处理方案：

        直接针对Html元素中需要绑定鼠标事件的dom元素设置

labelDiv.style.pointerEvents = 'auto';

参考文档：CSS pointer-events 属性