我正在使用three.js和webGL，试图将html对象覆盖在webGL模型上。
我打算使用three.js对象加载器来渲染3D模型，然后允许用户通过自定义UI在3D空间中叠加HTML DOM对象。
我主要在Three.js文档（https://threejs.org/examples/和https://codepen.io/AdamEDGE/pen/RRjEwz）中使用了各种不同的示例。
为了允许用户通过UI移动覆盖的HTML对象，我添加了转换控件（https://threejs.org/examples/misc_controls_transform.html）。 到目前为止，一切似乎都进行得比较顺利，但是现在我看到控件无法悬停或单击以移动元素。 我怀疑我缺少代码或相机无法正确对准的问题，但是我对此很陌生，所以我在猜测。
我还尝试了Jerome Etienne的混合教程，但是在测试中引发了其他问题，我认为这样做并不值得（http://learningthreejs.com/blog/2013/04/30/closing-the-gap-between-html-and-webgl/index.html）。
我创建了一个显示问题的示例（单击一个对象，控件应该显示）。 它是一个简单的webGL圆环，上面有两个HTML图像，这些图像重叠并映射到了Mesh上，因此我可以将控件链接到位于不同场景中的HTML元素。
https://jsfiddle.net/mattscotty/h5wuq86y/
control = new THREE.TransformControls(camera, glRenderer.domElement);
control.addEventListener('change', render);
按预期方式单击时，控件会显示在所有正确的位置上，并且我可以使用键盘来更改变换类型（有关如何工作，请再次参见https://threejs.org/examples/misc_controls_transform.html）。 由于我无法点击或悬停，因此无法了解相关事件。
我对此是陌生的，我很确定自己缺少明显的东西，因此可以提供任何帮助。