CODEWITHSUNDEEP
three.js
Sirab33
Sirab33

Reputation: 1285

THREE js OrbitControl Misbehaving

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!

Upvotes: 0

Views: 308

Answers (1)

Brakebein
Brakebein

Reputation: 2237

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.

Upvotes: 2

Related Questions