我设法得到了一个使用 help of the stackoverflow community 的简单对象拾取示例。
工作代码是 here。
但这个例子是画布适合窗口的特殊情况。
如果画布比窗口小并且存在左上偏移,则拾取不起作用(准确地说)。
如何修正偏移量?必须改变什么才能使采摘再次适合?
我尝试了一些方法,包括设置 renderer.setSize(threejsCanvas.clientWidth, threejsCanvas.clientHeight);
但无济于事。
答案 0 :(得分:1)
问题在于您使用 window.innerWidth
和 .innerHeight
来获取光线投射器的位置:
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
如果画布的宽度不是 window.innerWidth
,则使用您指定的替代尺寸。此外,您可能不想将 "click"
事件添加到 document
,您可能希望将其添加到 renderer.domElement
以便它仅在点击画布时触发。