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)
边学边写中,以上方法不一定为最优解