我正在 WebGL 中构建一个棋盘游戏。该板可以旋转/缩放。我需要一种方法将画布元素 (x,y) 上的点击转换为 3D 空间 (x, y, z) 中的相关点。最终的结果是我想知道（x，y，z）坐标，该坐标包含与用户最近的物体接触的点。例如，用户点击一个棋子，你想象一条光线穿过 3D 空间，穿过棋子和游戏板，但我想要棋子的 (x, y, z) 坐标在它所在的点感动。
我觉得这一定是一个非常普遍的问题，但我似乎无法在我的谷歌中找到解决方案。必须有某种方法将 3D 空间的当前视图投影到 2D 中，以便您可以将 2D 空间中的每个点映射到 3D 空间中的相关点。我希望用户能够将鼠标悬停在板上的空间上，并让专色更改颜色。
您正在寻找一个 unproject 函数，它将屏幕坐标转换为从相机位置投射到 3D 世界的光线。然后，您必须执行光线/三角形相交测试，以找到距离相机最近且也与光线相交的三角形。
我在jax/camera.js#L568 上有一个取消投影的例子——但你仍然需要实现光线/三角形相交。我在jax/triangle.js#L113有一个实现。
然而，有一种更简单且（通常）更快的替代方法，称为“挑选”。如果您想选择整个对象（例如，棋子），并且您不关心鼠标实际单击的位置，请使用此选项。WebGL 的方法是将整个场景以各种深浅不一的蓝色（蓝色是关键，而红色和绿色用于场景中对象的唯一 ID）渲染到纹理，然后从那种质地。将 RGB 解码为对象的 ID 将为您提供单击的对象。同样，我已经实现了这个，它可以在jax/world.js#L82 上找到。（另见第 146、162、175 行。）
这两种方法都有利有弊（在此处和之后的一些评论中进行了讨论），您需要确定哪种方法最能满足您的需求。大场景的选择速度较慢，但在纯 JS 中取消投影非常慢（因为 JS 本身并不是那么快）所以我最好的建议是对两者进行试验。
仅供参考，您还可以查看 GLU 项目和取消项目代码，我的代码松散地基于这些代码：http : //www.opengl.org/wiki/GluProject_and_gluUnProject_code
我目前正在解决这个问题 - 我采取的方法是
这是工作演示
function onMouseUp(event) {
event.preventDefault();
x_pos = (event.clientX / window.innerWidth) * 2 - 1;
y_pos = -(event.clientY / window.innerHeight) * 2 + 1;
z_pos = 0.5;
var vector = new THREE.Vector3( x_pos , y_pos , z_pos );
var projector = new THREE.Projector();
projector.unprojectVector(vector, camera);
var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
var intersects = raycaster.intersectObjects(intersectObjects);
if (intersects.length > 0) {
xp = intersects[0].point.x.toFixed(2);
yp = intersects[0].point.y.toFixed(2);
zp = intersects[0].point.z.toFixed(2);
destination = new THREE.Vector3( xp , yp , zp );
radians = Math.atan2( ( driller.position.x - xp) , (driller.position.z - zp));
radians += 90 * (Math.PI / 180);
console.log(radians);
var tween = new TWEEN.Tween(driller.rotation).to({ y : radians },200).easing(TWEEN.Easing.Linear.None).start();
}
weissner-doors.de/drone/
从其中一个线程中培养出来的。不确定 (x,y,z) 但你可以得到canvas(x,y)使用
getBoundingClientRect()
function getCanvasCoord(){
var mx = event.clientX;
var my = event.clientY;
var canvas = document.getElementById('canvasId');
var rect = canvas.getBoundingClientRect();// check if your browser supports this
mx = mx - rect.left;
my = my - rect.top;
return {x: mx , y: my};
}