Three.js 中几何图形的事件处理? [关闭]

2024-04-18

我正在寻找对 Three.js 中的几何图形/相机/灯光(我们添加到场景中的东西)进行某种事件处理?

我用谷歌搜索但找不到任何相关内容。我做了一个简单的球体渲染,并尝试在 firebug 中查看 DIV 内容,但只有一个画布,并添加任何onclickto the canvas 使事件适用于所有画布,也就是说,它不仅仅是针对球体或灯光。

有什么建议吗?


要获得 3D 交互性,您需要做一些事情:

  1. 获取鼠标位置的向量
  2. 根据相机取消投影鼠标矢量
  3. 从相机位置向未投影的鼠标矢量发射光线
  4. 检查哪些对象)与该射线相交并相应更新。

听起来可能很复杂,但代码已经存在:

function onDocumentMouseDown( event ) {

                event.preventDefault();

                var vector = new THREE.Vector3( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 );
                projector.unprojectVector( vector, camera );

                var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() );

                var intersects = ray.intersectObjects( objects );

                if ( intersects.length > 0 ) {

                    intersects[ 0 ].object.material.color.setHex( Math.random() * 0xffffff );

                    var particle = new THREE.Particle( particleMaterial );
                    particle.position = intersects[ 0 ].point;
                    particle.scale.x = particle.scale.y = 8;
                    scene.add( particle );

                }

                /*
                // Parse all the faces
                for ( var i in intersects ) {

                    intersects[ i ].face.material[ 0 ].color.setHex( Math.random() * 0xffffff | 0x80000000 );

                }
                */
            }

上面这段代码来自canvas_interactive_cubes http://mrdoob.github.com/three.js/examples/canvas_interactive_cubes.html库附带的示例。 如有疑问,最好检查一下是否已有解决问题的示例。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Three.js 中几何图形的事件处理? [关闭] 的相关文章

  • 解决方案:动态加载独立编译的 Webpack 2 包 [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 我想分享如何捆绑一个充当插件主机以及它如何加载已安装的插件动态地 应用程序和插件都与 Webpack 捆绑在一起 应用程序和插件被编译和分
  • 没有函数或 json 的 JavaScript 大括号

    刚刚打开客户端的 javascript 文件 第一行是这样的 var s account blog 我不明白 通常 根据我的经验 花括号包裹着一个函数 function welcome or a json JavaScript object
  • 使用 Intern 测试自定义 JavaScript(不是 Node 模块)

    是否可以为自定义客户端创建和运行测试套件 JavaScript 不是作为 Node 模块创建的 应该如何 那么配置要改吗 Intern 配置中有 loader 部分 指定了 如果我做对了 将会加载的包 是否有必要 以某种方式在这里包含我的自
  • jQuery 模式窗口从我的表单中删除元素

    jQuery 当我用它创建一个包含表单元素的模式窗口时 当我提交表单时 它会取出这些元素 表格示例
  • JavaScript 对象镜像/单向属性同步

    出于安全目的 我需要一个 镜像 对象 也就是说 如果我创建对象 A 并浅克隆 A 的副本并将其称为 B 则每当 A 的属性发生更改时 我希望 B 自动更新自身以反映更改 但反之则不然 换句话说 单向属性同步 我的问题 是否已经存在我不知道的
  • 定时器内嵌套异步等待 - 不返回所需的值

    我必须使用 Mocha 和 chai 测试来测试端点的响应 下面是相同的代码 async function getData userId let response let interval setInterval async gt resp
  • 页面其余部分完成加载后延迟加载 html5 视频

    我有一个视频元素用作我正在构建的页面底部部分的背景 我试图通过将 src 存储为 data src 属性并使用 jQuery 在其他资源加载后将其应用到 src 属性 因为它不是英雄图像或任何东西 我想加载海报以节省加载时间 然后稍后加载视
  • 无法让 CloudKit 进行身份验证(使用 Javascript 和服务器到服务器密钥)

    我正在尝试使用苹果的cloudkit js文件以建立与 CloudKit 的服务器到服务器连接 然而 尽管配置混乱了几个小时 我似乎无法让 CloudKit 认为我的请求有效 我的配置逻辑非常简单 const privateKeyFile
  • JSLint 错误:意外的“这个”

    无法理解为什么 JSLint 对我的使用感到惊讶this在下面的代码中 function testConstr x use strict this joker Whyyy sooo seriousss this x x 对于这两个属性分配
  • 检测 iPad Safari 用户的最佳方法

    添加用于检测 iPad Safari 用户的代码的最佳方法是什么 我的意思是我们应该使用 1 CSS 通过链接媒体 2 JS 通过navigator对象 我听说使用用户代理字符串并不是检测 iPad 的最佳方法 因为存在不一致的情况 请建议
  • Antd 选择搜索框未呈现匹配项

    我有产品数据 我正在使用搜索值过滤数据 然后使用过滤后的数据呈现选项 产品数据作为道具来自全局 redux 存储 由于某种原因 下拉列表仅在搜索值为空时显示数据 当我开始输入时 filteredData已更新 组件也重新渲染 但选项不显示任
  • 使用点符号将数字传递到函数中

    如果我有一个对象和函数 var obj 1234 example sample 5678 example sample function example num str if obj num hasOwnProperty str manip
  • Javascript - 对父母调用 super 父母?

    我在 Odoo 中定义了当前自定义 javascript 视图的扩展 openerp account move journal test function instance var t instance web t lt instance
  • 如何在没有 DOM 的情况下将 javascript 作为 node.js 脚本运行?

    https github com jasondavies d3 cloud https github com jasondavies d3 cloud是一个使用 D3 库的 javascript 文字云 这是一个交互式演示 http www
  • 什么是闭包编译器?

    如果您不知道我在说什么 请查看以下内容 http closure compiler appspot com home http closure compiler appspot com home 这是一个 JavaScript 压缩器 在他
  • JavaScript:嵌套循环?

    我想实现这样的动画 序列 动画以循环开始 想象一下car从 x1 移动到 x2 然后暂停 1 秒 然后再次播放动画 想象一下car从 x2 移动到 x3 等 the car循环是通过向汽车左侧添加 1px 来实现的 值 但我无法弄清楚嵌套循
  • 如何制作实时jquery效果?

    我想制作一个实时提要阅读器 并且我想要一个解决方案 使新项目无需刷新页面即可出现 并且具有像friendfeed一样的滚动效果 你可以在这里看到我在说什么 http www vimeo com 4029954 http www vimeo
  • Three.js canvas.toDataURL 有时为空

    我正在尝试使用 html2canvas js 渲染 THREE js 场景 一些覆盖的 HTML 元素 有用大多数时候 但并非一直如此 在失败的情况下 将渲染 HTML 元素 背景 覆盖层等 但不会渲染其他元素 THREE js 场景表现得
  • Apollo 客户端“未找到命名导出‘删除’”

    我正在尝试创建一个apollo client插件Nuxt 3应用 它当前抛出有关名为的包的错误ts invariant file Users my name Repositories project node modules apollo
  • Escape String - 在 Javascript 中输出rails字符串[重复]

    这个问题在这里已经有答案了 我正在尝试将字符串值分配给 erb 文件中的 javascript 对象 如下所示 var data name 问题是 如果name is Tom s small ears 的输出data name将会Tom x

随机推荐