在ThreeJS中将2D鼠标坐标转换为世界XZ坐标
Converting 2D mouse coordinates to world XZ coordinates in ThreeJS
我需要将鼠标屏幕坐标转换为XZ平面上的ThreeJS世界坐标。
我发现这个工作代码将鼠标位置转换为XY世界坐标,但我不知道如何修改它以获得XZ坐标:
var vector = new THREE.Vector3();
vector.set((event.clientX / window.innerWidth) * 2 - 1, - (event.clientY / window.innerHeight) * 2 + 1, 0.5);
vector.unproject(camera);
var dir = vector.sub(camera.position).normalize();
var distance = - camera.position.z / dir.z;
var position = camera.position.clone().add(dir.multiplyScalar(distance));
console.log("x: " + position.x + " y: " + position.y);
通过修改从这里找到的代码获得:http://www.osd.net/blog/web-development/3d-board-game-in-a-browser-using-webgl-and-three-js-part-3/
var x, y;
//
if (event.offsetX !== undefined) {
x = event.offsetX;
y = event.offsetY;
} else {
x = event.layerX;
y = event.layerY;
}
var pos = new THREE.Vector3(0, 0, 0);
var pMouse = new THREE.Vector3(
( event.clientX / window.innerWidth ) * 2 - 1,
- ( event.clientY / window.innerHeight ) * 2 + 1,
1);
//
var projector = new THREE.Projector();
projector.unprojectVector(pMouse, camera);
var cam = camera.position;
var m = pMouse.y / ( pMouse.y - cam.y );
pos.x = pMouse.x + ( cam.x - pMouse.x ) * m;
pos.z = pMouse.z + ( cam.z - pMouse.z ) * m;
相关文章:
- 将event.offsetX和event.offset Y的坐标转换为webGL本机坐标
- OpenLayers:自动将 EPSG 4326 - 文本图层的坐标转换为地图的投影 (EPSG:900913)
- 将 GPS 坐标转换为距离,并以十进制度为单位将距离转换为半径
- 将 GeoJSON 坐标转换为其他投影以用于草坪.js
- 将位置坐标转换为画布坐标
- 如何将像素坐标转换为等轴测网格坐标
- Pixi.js / WebGL方法,用于将数据模型坐标转换为画布像素坐标
- 将坐标转换为阵列中的块位置
- 将lat/lng坐标转换为给定地图上的像素(使用JavaScript)
- 如何从(x, y)屏幕坐标转换为LatLng(谷歌地图)
- 如何将屏幕坐标转换为z变换元素上的坐标
- 在ThreeJS中将2D鼠标坐标转换为世界XZ坐标
- 将经纬度坐标转换为图像地图坐标
- 天文坐标转换的Bug
- HTML5地理定位将当前GPS位置的长宽坐标转换为一个变量
- 反向地理编码:将GPS坐标转换为位置名称的函数调用永远不会执行
- 将贴图的xyz坐标转换为经度/纬度
- 如何将画布坐标转换为tile坐标
- 将上/左偏移坐标转换为日/时间
- 如何转换“正常”"坐标转换为OpenLayers中的OSM坐标