在 ThreeJS 中将 2D 鼠标坐标转换为世界 XZ 坐标

2024-04-01

我需要将鼠标屏幕坐标转换为 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/ 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;
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在 ThreeJS 中将 2D 鼠标坐标转换为世界 XZ 坐标 的相关文章

  • 如何将 ThreeJS 与 PhoneGap 一起使用?

    这个探索是非常自我描述的 我已经用一个简单的 3D 立方体进行了测试 它在浏览器中运行良好 但只在模拟器中显示空白页面 有人说 Threejs 不能与 PhoneGap 一起使用 但也有人说他们使用过并且工作正常 在 Android 中 您
  • Firebase Function 从其他文件导入函数 - javascript

    我正在使用 javascript 构建 firebase 函数 现在我有很多内部调用函数 我计划将这些函数移动到不同的文件中 以避免 index js 变得非常混乱 下面是当前的文件结构 functions index js interna
  • 如何在 Highcharts / Highstock 上显示 x 轴上的十字线选定值和 y 轴上选定的日期?

    我正在研究这个项目 其中包括在交互式图表上显示历史数据 我得出的结论是 Highcharts Highstock 是最好的选择 因为它提供了最多的定制选项 我想要实现的目标是 当我将鼠标悬停在一个点上时 分别在 x 轴和 y 轴上显示所选值
  • JSON对象的长度[重复]

    这个问题在这里已经有答案了 该函数生成一个包含 json 对象的数组 var estoque function unpack estoque tnm total estoque vl id tid st tnm tnm split tota
  • 为什么 JSON.stringify 对于似乎具有属性的对象返回空对象符号“{}”?

    下面的例子表明JSON stringify 返回字符串 对于 SpeechSynthesisVoice 对象 var voiceObject window speechSynthesis getVoices 0 JSON stringify
  • 使用 jquery 通配符检查 cookie 名称

    我有一个生成动态 cookie 的表单 例如 webform 62 1234356 62 1234356 可以是任意数字 我需要使用一些通配符检查来检查名称以 webform 开头的 cookie 是否存在 下面不起作用 if cookie
  • express 或express-generator:我需要两者吗?

    只是探索 Node js 并遇到了 Express 在 npm 存储库站点上https www npmjs com package express https www npmjs com package express它明确指出安装是 np
  • 在overlayImage中应用滤镜的方法在哪里?

    我想在overlayImage中应用一个过滤器 唯一的方法是在渲染后在整个画布上应用过滤器 对此没有内置支持 但很容易 破解 var overlayImageUrl load overlay image first fabric Image
  • 使用本机 JavaScript 获取过渡中的 CSS 值

    这个问题之前被问过 但答案使用了 jQuery here https stackoverflow com q 8920934 3186555 因此 我将调整问题以专门询问native解决方案 to 最小化依赖关系 假设您有一个 div 然后
  • React + Semantic-UI:在 UI MODAL 中使用表单

    在没有 React 的普通旧 Semantic UI 中 我已经能够毫无问题地将表单放入 Modal 中 使用 Semantic UI React 版本 我能够在模态中显示表单 但它并没有按照我期望的方式工作 例如 模态框显示后 模态框内的
  • 如何设置在浏览器的新选项卡(_blank)中打开的pdf文件的标题

    这是我的尝试 是否在新选项卡上打开 但它总是显示test pdf如题 function titlepath path name alert path alert name document title name window open pa
  • Cosmos DB 中的 MaxItemCount 源选项属性不起作用

    我正在尝试编写一个运行 SQL 查询的简单存储过程 并且我想通过使用 MaxItemCount 属性来限制结果 查询生成 3 个文档 但我只想返回 1 个文档 我使用 MaxItemCount 属性强制执行此限制 但这似乎不起作用 func
  • 限制 jQuery id 字符串吗?

    简而言之 我的问题是字符串在 jQuery 中作为可搜索 id 或可搜索内容有什么限制 更新 我得到了 ID 部分 但不是为什么我什至无法使用该字符串搜索 html 内容 对于任何愿意告诉我一个正则表达式来将模式从 MM dd yy HH
  • D3v6 嵌套图 - 嵌套 join()?

    我想可视化每个节点的 孩子 洞察力 我猜 D3v6 join 函数可以嵌套 不幸的是我找不到任何例子 下面的代码片段包含一个具有 3 个节点和子节点作为属性的outerGraph 到目前为止 这些孩子还没有被使用 相反 innerGraph
  • 为什么从浏览器上传到 S3 时出现 403 错误?

    因此 我尝试查看此处之前的答案 但似乎没有任何效果 我正在使用 Dropzone 它似乎发出 OPTIONS 请求来获取所有允许的 CORS 相关信息 但它似乎没有正确返回 因此 通过查看 Chrome 开发工具 我有以下请求标头 Host
  • javascript:window.print() 打印 2 页,而我有 1 页

    我有一个简单的 HTML 文档 其中仅包含图像标签 我想在文档加载后打印图像 我的代码 img src form1 jpg alt form1 style margin 0 auto display block 它可以工作 但问题是它打印图
  • 允许使用 grunt browserify 进行全局转换

    我已将 jQuery 添加为 html 文件中的脚本标记 并将其添加到package json与一起工作browserify shim如下 browserify transform browserify shim browserify sh
  • 如何按字母顺序排序并先小写排序

    如何获得以下排序的结果Food to Eat然后是 食物123 显然 第二个较低的 o 应该将 要吃的食物 带到排序后的第一个项目中 我很惊讶这个问题不容易通过谷歌找到答案 这个壮举没有包含在 javascript 标准中也让我感到惊讶 F
  • WooCommerce 使用 AJAX 设置购物车数量?

    我已经为此绞尽脑汁好几天了 需要一些指导 我正在为 WooCommerce 网站完全从头开始制作自定义主题 现在我正在尝试让购物车功能正常工作 我一直试图使用按钮 来更新购物车中产品的数量 对我来说问题似乎是WC 我在functions p
  • 利用重力效果拖动元素

    我想完成类似于 photoshop com 和此网站的功能 http mrdoob com projects chromeexperiments google gravity http mrdoob com projects chromee

随机推荐