131. HTML标签遮挡Canvas画布事件

HTML元素标签<div id="tag"></div>外面div父元素遮挡了Canvas画布鼠标事件，会造成相机控件OrbitControls的旋转、缩放等操作无效，也有可能会影响你的射线拾取,等等任何与canvas画布有关的鼠标事件都有可能收到影响，不过这算是普通web前端内容，选择前端方式解决即可。

.style.pointerEvents

设置.style.pointerEvents = none，就可以解决HTML元素标签对threejs canvas画布鼠标事件的遮挡。

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

这时候你在测试threejs代码执行效果，你会发现OrbitControls旋转缩放是正常的、射线也能正常拾取模型。

CSS属性z-index

说到模型标签CSS2DRenderer.domElement遮挡canvas画布的问题，有必要给大家提一下CSS属性z-index，简单说就是HTML元素位置重合的时候，谁在上，谁在下的问题。如果你不熟悉CSS属性z-index熟悉，可以百度了解下，下面主要给大家说下该属性对threejs HTML标签的影响。

在实际开发中，有时候可能会出现threejs canvas画布遮挡标签HTML元素的问题，这种现象可能出现，也可能不出现，具体和你的前端代码有关。如果你的代码中HTML元素标签被canvas画布挡住了，这时候你可以调整CSS布局代码，或者直接修改z-index的值。

本节课和上节课案例，threejs标签默认是叠加在canvas画布上，下面就通过强制修改z-index值给大家演示下。

css2Renderer.domElement在下，threejs canvas画布在上，标签被canvas画布遮挡，看不到标签。

renderer.domElement.style.zIndex = 1;
css2Renderer.domElement.style.zIndex = -1;

css2Renderer.domElement在上，threejs canvas画布在下，可以看到标签

renderer.domElement.style.zIndex = -1;
css2Renderer.domElement.style.zIndex = 1;

原文地址：https://blog.csdn.net/Miller777_/article/details/143730197

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！