three.js 平面的奇怪现象

Posted

技术标签:

【中文标题】three.js 平面的奇怪现象【英文标题】:Weird phenomenon with three.js plane 【发布时间】:2016-01-03 08:38:52 【问题描述】:

这是我在这里问的第一个问题!如果我做错了,请提前道歉。

我编写了一个程序,它在 three.js 中堆叠球体。

每个球体都以随机生成的(在特定范围内)x 和 z 坐标以及高于地平面的 y 坐标开始。我从球体的每个顶点投射光线,以查看它在与现有网格相交之前可以下降多远。

对于每个球体,我在 80 个不同的随机 xz 位置对其进行测试,看看它在哪里可以落得最远,然后将其“放下”到那个位置。

这是为了创造像这样的泡泡塔:

但是,我注意到当我将气泡半径设置得非常小而塔的基础尺寸变大时,会发生这种情况:

如果我将递归从 80 降低,这种效果就不那么明显了。出于某种原因,three.js 似乎认为球体可以在基础正方形的角落进一步下降。原点正好在基础正方形的中心 - 也许这是相关的。

当我在控制台记录我从光线投射器接收到的所有跌落距离时,它们确实越大,距离广场中心越远……但仅在小数点后第 11 位或第 12 位。

这不是我要解决的问题(我可以在选择最大的一个之前将跌落距离四舍五入到最接近的小数点后 10 位),但我很好奇。有谁知道为什么会这样?有没有人遇到过类似的情况?

编辑:

我编辑了我的代码以移动所有内容,使原点不再位于基础正方形的中心:

所以我的想法是否正确...这种现象与与原点的距离有关,而不是与球落到的表面有关?

【问题讨论】:

我对three.js一无所知,但这听起来像是一个浮点精度问题。顺便说一句,第一个问题很好,欢迎。 谢谢!这不是我所知道的——你能把我链接到任何可以从头开始解释浮点精度的好资源吗? 您可以尝试增加您用于单位的数量级。 如果你能提供一个我们可以检查的jsfiddle,我们会更容易帮助你。 我认为第一个评论者是正确的,如果你检查了数学。而不是与原点的距离,它可能是累积误差,因为浮点尾数远离零 - 这有点相同。 【参考方案1】:

确实,您看到的模式正是因为您的塔底的角和边缘距离您投球的原点最远。您正在创建一个直角三角形(见下图),其中垂直“腿”是从您将球落下的原点到网状地板正下方点的线(在直角与地板 - 因此名称,直角三角形)。 斜边始终是直角三角形的最长边,从原点正下方的点投射的光线越远,斜边就越长,您的算法就越倾向于更长距离(无论分数如何)。

增加塔基的尺寸会夸大这种效果,因为斜边测量值现在可以变得更大。减小球的大小也会有利于您所看到的图案,因为现在每个球都不会占用太多空间,因此对角的远距离测量不会像用更大的球那样快速填充,这样现在更多的球会聚集在边缘,然后再填充剩余的空间。

将你的下落原点移动到一侧或另一侧会产生更长的距离(斜边)到相对的两侧和角落,以便球首先填充那些遥远的位置。

当您将样本量从 80 减少到 20 时,您看不到效果的原因是,检测到这些球可能落到的更远位置的机会更少(赔率游戏)。

直角三角形:

餐巾纸背面草图:

【讨论】:

您好,感谢您的意见 - 但是,这不是问题所在。我将球体移动到地平面上方高处的一系列随机 x、z 位置并直接向下检查距离,我不保持球体静止和居中并检查到地平面上不同 x、z 位置的距离。 @Martha - 嗯。最好能提供一些代码 sn-ps 或小提琴,这样我们就可以确切地看到它是如何工作的

以上是关于three.js 平面的奇怪现象的主要内容,如果未能解决你的问题,请参考以下文章

Blender 导出 three.js 动画 - 骨骼奇怪地旋转

collada 模型看起来很奇怪(three.js)

three.js - 相机变化的非常奇怪的行为

Three.js:FBX 骨骼正确旋转,而 GLTF 骨骼奇怪地旋转

Three.js - 立方体和球体与平面奇怪地剪裁

THREE.JS 2.0 场景及场景中的对象