Javascript 3.js雷卡斯特
我正在尝试检测平面网格上的单击。我使用示例作为指导设置了一个光线投射器 代码如下: 单击标记线下方时,即使单击在平面内,也不会检测到任何单击(标记线无效) 还可以尝试调整屏幕大小。然后,即使在标记线上方单击也可能不起作用 也许这与使用正交摄影机有关?或者不更新一些必要的矩阵Javascript 3.js雷卡斯特,javascript,three.js,Javascript,Three.js,我正在尝试检测平面网格上的单击。我使用示例作为指导设置了一个光线投射器 代码如下: 单击标记线下方时,即使单击在平面内,也不会检测到任何单击(标记线无效) 还可以尝试调整屏幕大小。然后,即使在标记线上方单击也可能不起作用 也许这与使用正交摄影机有关?或者不更新一些必要的矩阵 function onMouseDown(event) { event.preventDefault(); mouse.x = (event.clientX / window.innerWidth) * 2 -
function onMouseDown(event) {
event.preventDefault();
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
//console.log("x: " + mouse.x + ", y: " + mouse.y);
raycaster.setFromCamera(mouse, camera)
var intersects = raycaster.intersectObjects(objects);
if (intersects.length > 0) {
console.log("touched:" + intersects[0]);
} else {
console.log("not touched");
}
}
CSS将影响光线投射计算。你可以做的一件事就是设定
body {
margin: 0px;
}
有关详细信息,请参阅
您还必须正确处理窗口大小调整。典型的模式如下所示:
function onWindowResize() {
var aspect = window.innerWidth / window.innerHeight;
camera.left = - frustumSize * aspect / 2;
camera.right = frustumSize * aspect / 2;
camera.top = frustumSize / 2;
camera.bottom = - frustumSize / 2;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
研究三个.js示例。具体请参见
另外,请阅读,其中描述了如何正确实例化正交摄影机
three.js r.80试试这个。。。它将工作在任何地方,即使你有边距和滚动
function onMouseDown(event) {
event.preventDefault();
var position = $(WGL.ctx.domElement).offset(); // i'm using jquery to get position
var scrollUp = $(document).scrollTop();
if (event.clientX != undefined) {
mouse.x = ((event.clientX - position.left) / WGL.ctx.domElement.clientWidth) * 2 - 1;
mouse.y = - ((event.clientY - position.top + scrollUp) / WGL.ctx.domElement.clientHeight) * 2 + 1;
} else {
mouse.x = ((event.originalEvent.touches[0].pageX - position.left) / WGL.ctx.domElement.clientWidth) * 2 - 1;
mouse.y = - ((event.originalEvent.touches[0].pageY + position.top - scrollUp) / WGL.ctx.domElement.clientHeight) * 2 + 1;
}
raycaster.setFromCamera(mouse, camera)
var intersects = raycaster.intersectObjects(objects);
}
看起来它修复了小提琴的例子。明天我将测试我的程序。谢谢