在three.js中标签渲染器中不工作的html按钮

内容来源于 Stack Overflow,遵循 CC BY-SA 4.0 许可协议进行翻译与使用。IT领域专用引擎提供翻译支持

腾讯云小微IT领域专用引擎提供翻译支持

原文
Stack Overflow用户 修改于2022-04-14
  • 该问题已被编辑
  • 提问者: Stack Overflow用户
  • 提问时间: 2022-04-14 08:41

Html按钮在标签渲染器中不工作。有什么解决方案我可以在我的代码中。问题是我同时使用了webglrenderer和标签渲染器.So,很多问题都会发生,比如轨道控制不能工作按钮,不能点击,以及我在运行时创建的注释按钮不能工作。

let div = document.createElement( 'div' );
div.className = 'label';
div.textContent = '+';
div.type='button';
div.id='label6';
div.style.marginTop = '-1em';
div.addEventListener("mousedown",scope_AC.uiHandler.addConnectionBtns,false);
let label = new CSS2DObject( div );
label.position.copy(pos);
childModel.add( label );
scope_AC.modeler.labelRenderer.setSize( innerWidth, innerHeight );
scope_AC.modeler.labelRenderer.domElement.style.position = 'absolute';
scope_AC.modeler.labelRenderer.domElement.style.top = '15px';
scope_AC.modeler.labelRenderer.domElement.style.pointerEvents = 'none'
document.body.appendChild(scope_AC.modeler.labelRenderer.domElement );

当我标记注释时,我的场景没有任何pointerEvent=none,但是当我应用这个注释时,注释是不可点击的。

浏览 34 关注 0 得票数 0
  • 得票数为Stack Overflow原文数据
原文
回答于2022-04-20
得票数 0

Prisoner849提出了一个很好的观点:

尝试 pointerdown 而不是 mousedown

下面是您的代码将如何处理:

let div = document.createElement( 'div' );
div.className = 'label';
div.textContent = '+';
div.type='button';
div.id='label6';
div.style.marginTop = '-1em';
    div.addEventListener("pointerdown",scope_AC.uiHandler.addConnectionBtns,false);
let label = new CSS2DObject( div );
label.position.copy(pos);