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 属性

你可能感兴趣的:(3D可视化,前端,3d)