在鼠标点击的地方绘制精灵

Question

对于three.js我是noobie，在阅读https://threejs.org/examples/?q=inter#canvas_interactive_cubes之后，我想添加一个函数绘制点，我点击了我的项目（加载和显示stl文件），我在那个例子中使用了公式，< / p>

mouse.x = ( event.clientX / renderer.domElement.clientWidth ) * 2 - 1;
mouse.y = - ( event.clientY / renderer.domElement.clientHeight ) * 2 + 1;

但是我发现精灵没有在我点击的地方绘制，但是稍低一些，你可以在http://static.medi-tool.cn/share/ds1/index.html看到（首先点击模型会绘制一个精灵，第二次会绘制一个精灵并计算出来两点之间的距离，然后两个精灵将在2秒内被删除）。谁能告诉我为什么？非常感谢。

Answer 1

我发现这是因为我对画布有一个div，当使用公式时，我必须减去该div的高度，换句话说，当计算mouse.x，mouse.y，'event。 clientX'＆amp; 'event.clientY'应该相对于画布，而不是视口。

问题中的测试页现在可以。