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 只眼睛的网格 的相关文章

  • 如何让Three.js全屏显示?

    我想用 Three js 制作游戏 但如何使其全屏显示 我看见本文 http learningthreejs com blog 2011 11 17 lets make a 3d game make it fullscreen 并且我在代码
  • Three.js - 从点缩放圆柱体

    是否可以从特定点开始增加 Y 轴上圆柱体的比例 与圆柱体从其原点向上和向下生长到新比例不同 它只是像条形图一样从顶部向上 向下生长 当前代码 function animate render cylinder scale y 0 1 requ
  • 有什么方法可以从 Three.js Object3D 中获取边界框吗?

    我正在使用 Three js 和 OBJLoader js 加载 OBJ 文件 这将返回一个 Three Object3D 对象 它具有您期望从 3D 模型中获得的内容 位置向量 向上向量 我不明白的是如何获得它的边界框 这可能吗 您不需要
  • 向该对象的每一面添加不同的颜色

    我为我的应用程序重新创建了一个包模型 并将其作为 obj 导出到 ThreeJs 中 我为模型几何中发现的每个面分配了不同的颜色 如下所示 var geometry new THREE Geometry fromBufferGeometry
  • 具有材质颜色的三个 js 动画搅拌机模型

    我有一个导出的 三个 js json 格式 搅拌机模型 该模型有一些带有颜色的材料 如果我使用 THREE MorphAnimMesh 和 THREE MeshPhongMaterial 动画工作正常 但没有材质颜色 如果我使用 THREE
  • 在 ThreeJS 中将 2D 鼠标坐标转换为世界 XZ 坐标

    我需要将鼠标屏幕坐标转换为 XZ 平面上的 ThreeJS 世界坐标 我发现这个工作代码可以将鼠标位置转换为 XY 世界坐标 但我不知道如何修改它以获取 XZ 坐标 var vector new THREE Vector3 vector s
  • 使用 Three.js 在片段着色器中手动选择 mipmap 的 lod

    我正在使用 Three js 中的 glsl es 编写一个基于物理的着色器 为了添加镜面全局照明 我使用内部带有 mipmap 链的立方体贴图 dds 纹理 按照 CubeMapGen 的说明进行预先计算here http seblaga
  • Three.js - 在自定义几何体上平滑兰伯特材质着色的问题

    我在 Three js 中创建了一个自定义几何体 现在 我想创建一个使用平滑阴影兰伯特材质的网格 使用循环 我创建了顶点数组 然后创建了面 然后我调用了 geometry computeCentroids geometry computeF
  • 如何在 Three.js 上覆盖 HTML 文本/按钮?

    好的 很新three js在这里 但我正在努力实现谷歌所拥有的https beinternetawesome withgoogle com interland https beinternetawesome withgoogle com i
  • Three.js 中几何图形的事件处理? [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我正在寻找对 Three js 中的几何图形 相机 灯光 我们添加到场景中的东西 进行某种事件处理 我用谷歌搜索但找不到任何相关内容
  • 深度图三.js

    Three js中有没有办法获取深度图 我感兴趣的是制作类似于 Kinect 为给定场景制作的东西 我遇到了一种不使用颜色和雾来模仿这一点的黑客方法 但这并不理想 因为它会使用两个不同的场景并且会因光照而变化 我认为执行此操作的另一种方法是
  • FontLoader 和 TextGeometry 未在 Threejs 中正确导入

    我正在尝试在 BoxGeometry 侧面的前 右 左和顶部添加 3D 文本 我实现了这个代码如下 loadFont gt const loader new THREE FontLoader loader load https threej
  • 可点击的精灵标签?

    我一直在玩精灵文本标签 更具体地说是这个例子 http stemkoski github io Three js Sprite Text Labels html http stemkoski github io Three js Sprit
  • 在 Three.js 中渲染具有大量对象的多个场景的最佳方式

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

    我正在尝试修改这个例子 https github com timoxley threejs blob master examples webgl morphtargets md2 control html来自 Three js 通过鼠标点击
  • 将颜色渐变应用于网格上的材质 - Three.js

    我有一个 STL 文件加载到我的场景中 并将单一颜色应用于 phong 材质 我想要一种方法 将两种颜色应用于该网格物体的材质 并在 Z 轴上应用渐变效果 如下例所示 渐变花瓶 https i stack imgur com Ty9gq j
  • 解决 Three.js / webGL 中的 gl_PointSize 限制

    我正在使用 Three js 创建交互式数据可视化 此可视化涉及渲染 68000 个节点 其中每个不同的节点具有不同的大小和颜色 最初我尝试通过渲染网格来实现此目的 但事实证明这非常昂贵 我当前的尝试是使用 Three js 粒子系统 每个
  • Three.js :face4 生成三角形而不是正方形

    我正在尝试使用 tree js 自定义几何图形生成一个正方形 但是这段代码 var cubeGeo new THREE Geometry cubeGeo vertices push new THREE Vector3 25 25 25 cu
  • Three.js canvas.toDataURL 有时为空

    我正在尝试使用 html2canvas js 渲染 THREE js 场景 一些覆盖的 HTML 元素 有用大多数时候 但并非一直如此 在失败的情况下 将渲染 HTML 元素 背景 覆盖层等 但不会渲染其他元素 THREE js 场景表现得
  • 在 Webpack 中使用 Three.js 以便我可以使用 OrbitControls 的正确方法是什么?

    在我的 webpack 配置中 resolve alias three path resolve node modules three build three js OrbitControls path resolve node modul

随机推荐

  • 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 应该自动完成 我不必自己复制它们 我尝试复制它们 但这是很多