三个 js OrbitControl 行为异常 [英] THREE js OrbitControl Misbehaving

问题描述

在这里撕我的头发...

我有一个小应用程序可以在 js fiddle 上完美运行 - 但是在这个 fiddle 中运行的代码在我的实际现实世界"中失败项目，因为它给了我以下警告:

三个js UniformLocation 不是来自当前活动的程序

我不确定这到底是什么意思(我只使用了 THREE.js 大约 5-6 个月，兼职工作，所以我还没有遇到这个特定的错误.)

>

首先是第一件事 - 这是小提琴，效果很好:https://jsfiddle.net/gilomer88/tcpwez72/165/

该应用程序的要点是，当您在主场景中点击立方体时，右上角会出现一个小弹出detailsS​​cene"，显示您点击的立方体在.然后，您可以在 detailsS​​cene" 中旋转和玩立方体 - 独立于主场景.

问题是，当我在实际项目中实现完全相同的代码时，会发生奇怪的事情:虽然 detailsS​​cene" 会弹出并显示我点击的立方体的放大视图，但当我尝试与它进行实际交互时，立方体本身完全变得疯狂.

具体来说:只要我在 detailsS​​cene" 中点击立方体并将鼠标移动一根头发，立方体就会消失！它只是从 detailsS​​cene" 中完全消失了.

我不太清楚这个微小的鼠标移动是否导致 detailsS​​cene" 中的 camera 有点飞到一个非常远的地方 -从而使它看起来像立方体消失了，或者如果真的是立方体本身消失了.无论哪种方式，它都会消失，我无法让它重新出现.(我尝试了各种鼠标移动来让它重新出现 - 没有任何效果.)而且这种立方体消失的行为每次都在不断发生.

更清楚地说，这不会发生在 mousedown(或 pointerdown)事件上，而是在我按住鼠标然后开始移动它时发生.换句话说，如果我按住鼠标然后松开它 - 没有移动它，立方体会保持原位.但是如果我点击并移动 - 它就会消失.所以肯定是鼠标移动导致了这个问题.

除此之外，如果我然后关闭 detailsS​​cene"，然后点击 MAIN 场景中的另一个对象 - 这会导致 detailsS​​cene" 再次打开，这一次，它打开了 EMPTY.所以它不再像第一次那样向我展示立方体.这也是一致的.

detailsS​​cene" 唯一有效的时间是第一次尝试.在那之后 - 好吧，我必须刷新页面才能让它再次工作.

我不太明白我收到的警告 - 这个:

三个js UniformLocation 不是来自当前活动的程序

我在 UniformLocation 上没有找到太多内容.这是一个 S.O.我发现的问题:随机位置不适用于当前程序"；错误

无论如何，我一整天都在做这件事 - 但我什么也没有得到.

所以我的问题很简单:你们之前有没有遇到过这种错误?任何想法它甚至指的是什么?

希望得到任何帮助！

解决方案

我不明白你为什么有这个 onMouseMove 方法.导航完全由OrbitControls 完成，您不需要在每次鼠标移动时(甚至在animate 循环中)设置光线投射器.您只需要在实际对 onPointerDown 方法中的内容进行光线投射时设置光线投射器.这样，它会在第一次点击时在细节场景中显示相应的立方体(以防你想知道为什么它只在第二次点击时显示).

细节场景中的相机有一个非常近的远剪裁平面，可以在视觉上切割立方体.远剪裁平面应该更远.也许这会导致你的立方体消失.只要立方体不移动，轨道控件就应该始终看着立方体.

我在您的小提琴中更新了这些更改:https://jsfiddle.net/L6kbv7es/

另一件事是，每次单击立方体并调用 makeDetailsS​​cene 时，都会实例化一个新场景、相机、webgl 渲染器和轨道控件.这可能会导致问题.每次调用都会有一个新的 OrbitControls 实例监听细节画布的鼠标事件.要么重用细节场景、渲染器、控件等，要么正确处理它们:如何处理对象.也许这以某种方式导致您的错误.我还没有在我的三个.js 项目中遇到过这个错误.

Tearing my hair out here...

I’ve got a little app working perfectly on js fiddle - but the very same code that’s working in this fiddle is failing in my actual "real-world" project, as it gives me the following warning:

three js UniformLocation is not from the current active Program

I’m not really sure what that even means (I’ve only been working with THREE.js for like 5-6 months, part-time, so I’ve yet to run into this particular error.)

First thing’s first though - here’s the fiddle,which is working great: https://jsfiddle.net/gilomer88/tcpwez72/165/

The gist of the app there is that when you tap on a cube in the Main Scene, a little pop-up "detailsScene" appears in the top right corner, showing you the Cube you tapped on. You can then spin and play with the cube in the "detailsScene" - independently of the main scene.

The problem is that when I implement this exact same code in my actual project, a weird thing happens: while the "detailsScene" does pop-open and does show the enlarged view of the cube I tapped on, the cube itself totally goes bonkers when I try to actually interact with it.

To be specific: as soon as I tap on the cube in the "detailsScene" and move the mouse just a hair, the cube disappears! It just totally vanishes from the "detailsScene".

I can’t quite tell if this tiny mouse-movement is causing the camera in that "detailsScene" to just sorta fly off to a really far away point - thereby making it look like the cube disappeared, or if it’s really the cube itself that’s disappearing. Either way, it disappears, and I can not get it to reappear. (I tried all sorts of mouse-movements to make it reappear - nothing works.) And this cube-disappearing act is consistently happening every single time.

To be even clearer, this isn’t happening on the mousedown (or pointerdown ) event, it’s happening when I hold the mouse down, and then start moving it. In other words, if I hold the mouse down and then release it - without having moved it all, the cube stays in position. But if I click and move - it disappears. So it’s definitely the mouse-movement that’s causing this issue.

Beyond that, if I then close the "detailsScene", then tap on another object in the MAIN scene - which causes the "detailsScene" to open up again, this time around, it opens up EMPTY. So it no longer shows me the cube the way it did the first time around. And that’s also consistent.

The only time the "detailsScene" works is on the very first try. After that - well I have to refresh the page to get it working again.

I don’t quite understand the warning I got - this:

three js UniformLocation is not from the current active Program

I haven’t found much on UniformLocation. Here’s one S.O. question I found: Random "location not for current program" error

Anyway, I’ve been at this all day - and I'm not getting anywhere.

So my question is simply: has any of you run into this sort of error before? Any ideas what it's even referring to?

Would appreciate any and all help!

解决方案

I don't understand why you have this onMouseMove method anyway. The navigation is completely done by OrbitControls, and you don't need to set the raycaster on every mouse move (or even in the animate loop). You only need to set the raycaster when you actually raycasting something which is in your onPointerDown method. This way it will show the respective cube in the details scene on first click (in case you wondered why it only shows on second click).

The camera in the details scene has a very close far clipping plane that visually cuts the cube. The far clipping plane should be further away. Maybe this is causing your disappearing of the cube. The orbit controls should always look at the cube as long as the cube does not move.

I updated these changes in your fiddle: https://jsfiddle.net/L6kbv7es/

Another thing is that every time you click on a cube and call the makeDetailsScene you instantiate a new scene, camera, webgl renderer, and orbit controls. This may cause problems. With each call a new OrbitControls instance is listening to mouse events of the details canvas. Either reuse the details scene, renderer, controls, etc., or properly dispose them: How to dispose of objects. Maybe this is causing your error somehow. I haven't yet encountered this error in any of my three.js projects.

这篇关于三个 js OrbitControl 行为异常的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！