一、场景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';