threejs 添加 CSS2DRenderer 导致 OrbitControls 控制器不能移动

threejs 添加 CSS2DRenderer 导致 OrbitControls 控制器不能移动

标签渲染器 CSS2DRenderer 会创建出一个div元素，有时因为位置原因导致 OrbitControls 不能移动

canvas 由 document.getElementById("***").appendChild(renderer.domElement); 产生

    // 标签渲染器
    var tagRenderer = new CSS2DRenderer();
    tagRenderer.setSize(window.innerWidth, window.innerHeight);
    tagRenderer.domElement.style.position = 'absolute';
    tagRenderer.domElement.style.top = '0px';
    tagRenderer.domElement.style.color = '#fff';
    // tagRenderer.domElement.style.pointerEvents = 'none'; // 添加此属性会使标签上的交互无法点击
    document.getElementById("threeDom").appendChild(tagRenderer.domElement)

解决方法1 添加 pointerEvents

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

pointer-events:none —元素永远不会成为鼠标事件的target。但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶触发父元素的事件侦听器。其他值只能应用在SVG上。

解决方法2 直接更换 OrbitControls 控制器 用于事件监听的HTML元素

OrbitControls 使用方式: OrbitControls（object：Camera，domElement：HTMLDOMElement）
object：（必需）要控制的摄像机。相机不得是其他对象的子对象，除非该对象是场景本身。
domElement：用于事件侦听器的HTML元素。

注意: 若换成 标签渲染器的dom元素 或 修改过 pointerEvents 为 none 则 css2d上面的点击交互无法响应

不要忘记函数中执行

labelRenderer.render(scene, camera)

边学边写中，以上方法不一定为最优解