Three.js StereoEffect 显示 2 只眼睛的网格

2024-04-22

我有一个使用 StereoEffect 渲染器的 THREE.js 场景。但是,当我向场景添加新网格时,它们会显示在两只眼睛上,而不是为每只眼睛重复显示。我相信 THREE.js 应该自动完成,我不必自己复制它们? (我尝试复制它们,但这是很多烦人的计算,我无法管理它)

我的网格实际上是透明平面,我在它们的顶部添加了一个 DOM 元素以实现平面显示。

举例说明 https://i.stack.imgur.com/YUo0W.png


好吧我终于找到了!我尝试在网格上放回纹理(不是不可见的),然后我发现了问题。

当我们使用 StereoEffect 时,我们看到我们的网格在两个视图上都是重复的,它实际上是一个illusion:THREE.JS 在那里放置了一个图像,但是actual物体是不可见的,正好放在两个图像的中间! 请参阅此处的图片:解释 https://i.stack.imgur.com/ZRIXe.png

例如,如果您使用光线投射,它会告诉您没有交叉点see网格,但位于从左图像到右图像的线的中心!与 mesh.position 相同。

所以我所做的就是保留一个不可见的纹理,并创建两个 div 标签,将它们对称地放置在网格位置周围:

var middleX = window.offsetWidth/2;
//left div
if(this.element.id.indexOf("-2") == -1){
    var posL = coords2d.x - middleX/2;
    this.element.style.left = posL + 'px';
    //Hide if gets on the right part of the screen
    if(posL > middleX) this.element.style.display = 'none';
}
//right div
else{
    var posR = coords2d.x + middleX/2;
    this.element.style.left = posR + 'px';
    //Hide if gets on the left part of the screen
    if(posR < middleX) this.element.style.display = 'none';
}                    

这给出了illusion我的网格就在那里,只是空的 div。

然后,为了检查是否有人点击我的网格,我做了相反的事情:我回到real在将网格发送到 raycaster 之前先确定网格的位置!

function hasClicked(e) {
        e.preventDefault();
        var clientX,clientY;

        //GET REAL POSITION OF OBJECT
        var middleX = window.offsetWidth/2;
        //Right screen
        if(e.clientX>middleX){
            clientX = e.clientX - middleX/2;
        }
        //Left screen
        else {
            clientX = e.clientX + middleX/2;
        } 
        clientY = e.clientY;  //Keep same Y coordinate

        //TRANSFORM THESE COORDS ON SCREEN INTO THREE.JS COORDS
        var mouse = new THREE.Vector2();
        mouse.x = (clientX / window.innerWidth) * 2 - 1;
        mouse.y = -(clientY / window.innerHeight) * 2 + 1;

        //USE RAYCASTER
        raycaster.setFromCamera(mouse, camera);

        var intersects = raycaster.intersectObjects(arrowManager.storage);

        if (intersects.length > 0) {
            //It works !!!
        }
    }

而且效果非常好!希望这可以帮助别人,我在这里真的很绝望;)

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

Three.js StereoEffect 显示 2 只眼睛的网格 的相关文章

  • 使用三个 JS 和 React JS 加载 GLTF 模型

    我使用 React JS 加载从 sketchfab 下载的 GLTF 文件时遇到问题 当我尝试在不使用React 使用常规index html和index js 的情况下执行此操作时 它可以工作 但是当我将代码带入React应用程序时 它
  • 将球体 a 旋转到自身的 b 点

    我试图弄清楚如何将球体从 A 点旋转到 B 点 我找到了一些Unity3d代码 Quaternion rot Quaternion FromToRotation pointA pointB sphere transform rotation
  • 重复凹凸贴图

    我正在尝试使用 Three js r55 将凹凸贴图应用到平面上 以创建一个模糊的感觉表面 这是我的代码 var mapHeight THREE ImageUtils loadTexture images felt png mapHeigh
  • 在 Three.js 中渲染具有大量对象的多个场景的最佳方式

    想象一下 您想要绘制两个场景 每个场景都有数百个球体 并提供在这些场景之间切换的功能 做到这一点的最佳方法是什么 目前 一个开关大约需要 4 到 5 秒 因为我要删除 创建和绘制每个开关上的所有球体 下面是在场景切换上运行的代码示例 cle
  • 调试 Three.js 中的低 FPS

    我正在处理 Three js WebGL 场景 当我缩小时 我注意到 60 FPS 以便所有观察结果 约 20 000 个三角形 都在视图中 但当我放大时 FPS 非常低 因此只有一个小三角形的子集在视野中 我想弄清楚是什么导致了这种差异
  • 在 Three.js 中将贝塞尔曲线转换为平面道路

    我试图根据之前计算得到的一些贝塞尔曲线在 Three js 中绘制一条弯曲的道路 问题是我找不到转换曲线序列的方法 一条从上一条曲线的末尾开始 到一个曲面 我有一个 3D 场景 其中有一些汽车 一条用飞机创建的道路 并且绘制了即将到来的道路
  • 一次性渲染阴影

    考虑到阴影投射的成本 我想知道对于动态定位的静态对象 例如 程序城市 是否有一个功能或可能 实验性的方法可以在 Three js 中仅渲染一次阴影贴图 甚至在 webgl 中 因此 结果可以在静态对象的下一帧中免费使用 仅当物体移动时才会进
  • 在 Three.js 中获取 Object3D 的大小

    我的场景中有这个 3D 对象 var icon new THREE Object3D var iconTexture THREE ImageUtils loadTexture images icon png iconMaterial new
  • 渲染 ThreeJS 应用程序第一帧时的性能问题

    目前 当我渲染以下内容时 我的 ThreeJS 应用程序的性能受到很大影响第一帧 它会导致 Edge 和 IE 11 浏览器冻结 5 秒 并弹出窗口指示 此窗口没有响应 这可能会吓到我的用户 使用 Chrome 的性能分析器 问题似乎来自几
  • 如何在 Three.js 中从 3D 点创建 3D 表面?

    我正在制作一个项目来制作带有点和线 弯曲或非弯曲 的简单 3D 模型 对于第一个版本 我使用 SVG 元素进行简单渲染 平滑曲线和鼠标事件 现在我正在尝试使用Three js渲染器而不是 SVG 我必须创建 3d 管来替换曲线 但我不知道如
  • 如何使用 HTML 元素阻止 THREE.js 光线投射?

    我希望页面上的 HTML 元素阻止 THREE js 光线投射 我该如何执行此操作 我遇到的问题是 当用户单击打开的 DIV 元素时 光线投射会检索场景中的对象 它会检索 DIV 后面的对象 我不想在 DIV 打开时禁用光线投射 我纯粹希望
  • 如何使用三个JS导出然后导入场景?

    我有一个用三个 JS 和大量 Javascript 代码构建的复杂 3D 场景 我需要将此场景导出为一个文件 然后通过简单的 ThreeJS 场景播放器在我的网站上使用它 我尝试过 ObjectExporter 和 SceneExporte
  • Tween JS 基础知识之三个 JS 立方体

    我是 Tween JS 的新手 尝试使用 Tween 制作一个向右移动的简单动画 下面是我在 init 函数中的代码 我使用的是三个 JS var geometry new THREE CylinderGeometry 200 200 20
  • 使用 Three.js 遮挡现实世界的对象

    我在实验性增强现实网络浏览器中使用 Three js 该浏览器称为 Argon 本质上 Argon 使用高通的 Vuforia AR SDK 来跟踪手机摄像头中的图像和物体 Argon 将跟踪信息发送到 Javascript 中 在 Jav
  • OrbitControls 和 dat.gui 文本不起作用

    我正在使用 Three js 和 dat gui 以及text财产 另外 我的场景中有 OrbitControls cameraControl new THREE OrbitControls camera cameraControl upd
  • Three.js - 重叠层闪烁

    当多个物体重叠在同一平面上时 它们开始闪烁 如何告诉渲染器将其中一个对象放在前面 我尝试使用 renderDepth 但它只能部分起作用 请参阅此处的示例 http liveweave com ahTdFQ http liveweave c
  • Three.js、自定义着色器和具有透明度的 png 纹理

    我有一个非常简单的 PNG 纹理 一个带有透明背景的灰色圆圈 我用它作为制服map for a THREE ShaderMaterial var uniforms THREE UniformsUtils merge basicShader
  • Three.js:为相机添加灯光

    我想移动和旋转相机 但将点光源保持在相对于相机的相同位置 我读过很多帖子 说您可以将灯光对象添加到相机而不是场景中 就像这样 pointLight new THREE PointLight 0xffffff pointLight posit
  • 是否可以将立方体环境贴图绕 Y 轴旋转 180 度?

    我想旋转立方体贴图Y轴旋转 180 度 scene new THREE Scene scene background new THREE CubeTextureLoader setPath path to my docs load posX
  • Three.js:缩放几何图形后错误的 BoundingBox

    在我的场景中 我有一个简单的立方体 var test new THREE Mesh new THREE CubeGeometry 10 10 10 new THREE MeshBasicMaterial scene add test 该立方

随机推荐

  • Python BigQuery 超时确实很奇怪

    我正在构建一项将数据流式传输到 bigquery 的服务 如果我删除需要 4 5 分钟加载的部分 我正在预缓存一些映射 则以下代码可以完美运行 from googleapiclient import discovery from oauth
  • Ruby 2.3 - 向 net:http 请求添加超时错误和通知

    我有一个工作系统可以产生错误并将其发送给活动管理员使用 例如 在活动管理中 对于我们 CMS 的特定页面 该页面可能会执行 url must be accessible http www exmaple com field url part
  • 使用 stack 安装 shuffle 库时出错

    Using stack 1 2 0 and LTS 7 0我在安装时遇到以下错误shuffle https hackage haskell org package shuffle 图书馆 cabal get shuffle cd shuff
  • 滚动时删除#anchor-id

    我正在使用这个jqueryhttp css tricks com examples SmoothPageScroll http css tricks com examples SmoothPageScroll 创建平滑的页面滚动 但是每次我
  • 加入同一存储库旧版本的历史记录

    我有一个包含这段历史的存储库 A B C D 然后 这个存储库被 拆分 基本上 使用 git subtrees 创建了另一个存储库 其历史记录从 D 开始 现在 我有另一个具有这段历史的存储库 The same D as the other
  • 使用 C# 写入 Excel 文件的最佳和最快方法是什么?

    我正在尝试使用 OLEDB 没有自动化 写入 Excel 文件 我有大约 500 行数据 这些数据是从其他应用程序获取的 然后使用 INSERT INTO 查询将其一一写入 Excel 文件 我确信从其他应用程序读取数据没有延迟 我查了一下
  • 发现同一依赖程序集的不同版本之间存在冲突

    我目前使用 net 3 5 框架和 microsoft interops 在 Visual Studio 中编写一个程序来与 Office 产品交互 我的 app config 文件有问题 每次我编译我的解决方案 重建或构建它时 错误列表中
  • 高分辨率图像 IE 浏览器渲染

    我正在针对这些更高分辨率的显示器 尤其是新的 iPad 优化我的网站 我按照我想要的方式格式化了网站 我只是增加了每个图像的分辨率 但仍然将其限制为我当前拥有的 DIV 例如 我有一个分辨率为 483x246 的图像 并将其适合设置大小为
  • 绕过 C++ 中的复制语义

    请考虑这段代码 class A int main std vector a test test push back A 构造函数和析构函数将被调用两次 内存将被分配两次并且对象将被复制 现在这不仅可能对性能不利 还可能导致运行时错误 特别是
  • jQuery文件上传不提交额外参数

    我需要使用 jQuery 文件上传控件中提供的 formData 参数在提交时将附加数据发送到服务器 formData 的默认实现是调用一个函数 该函数获取表单中的所有控件并将它们序列化为数组 使用 jQuery serializeArra
  • 在 Windows 7 64 位上运行 gem 安装时出错

    我刚刚使用 ruby installer org 的安装程序安装了 ruby 1 9 2 p136 现在我正在尝试安装 Rails 当我执行 gem install Rails 时 出现以下错误 C Users Clayton USA gt
  • 如何使用mockito模拟字符串?

    我需要模拟一个测试场景 其中我调用getBytes String 对象的方法 我得到一个 UnsupportedEncodingException 我尝试使用以下代码来实现这一点 String nonEncodedString mock S
  • 使用 jquery 验证插件滚动到特定错误

    我在这里找到了关于如何处理错误和滚动的很好的参考 如何在 jquery 验证器插件中发生错误时触发事件 https stackoverflow com questions 2885346 how to fire an event on er
  • 我们可以将值的正则表达式放入 DTD 中吗?

    我想知道是否有一种方法可以将正则表达式与属性值关联起来 就像 XML 模式中的那样
  • C# 中的抽象枚举

    有没有办法制作一个 protected enum abstract in C 基类示例 protected abstract enum commands CS0106 protected abstract void useCommands
  • 在 SQL 表的列中分离大小相关数据是否更有效?

    我有一个 MySQL 数据库表 其中有一列类型为 varchar 386 我选择这个字符数是因为我事先计算了最长条目的字符数 我目前有 400 000 个条目 但预计会随着时间的推移而增加 我进行了一些测试 发现大约 390 000 个条目
  • 如何使 Maven 程序集插件 dependencySets 描述符包含 POM 文件中定义的依赖项?

    例如 POM 依赖声明 这仅用于演示目的 而不是我的实际代码
  • DB2 400 落柱

    我想删除一个名为id这是一个自动递增的PK SQL alter table CO88GT XGLCTL drop column id cascade 我得到 Error SQL0952 Processing of the SQL state
  • 如何在其他标记之上显示 Google 地图 Android 标记?

    我的应用程序中有多个标记 有时其中一些位于同一位置 我希望其中一些标记始终显示在其他标记的前面 我应该如何进行 先感谢您 标记 setZIndex Float MAX VALUE
  • Three.js StereoEffect 显示 2 只眼睛的网格

    我有一个使用 StereoEffect 渲染器的 THREE js 场景 但是 当我向场景添加新网格时 它们会显示在两只眼睛上 而不是为每只眼睛重复显示 我相信 THREE js 应该自动完成 我不必自己复制它们 我尝试复制它们 但这是很多