Scene-in-Scene problems

Questions
1

Hey guys,

REALLY need your help here cause I’m pretty stuck…

I’ve managed to get a little mini-app working on js fiddle (actually several of you were instrumental in answering Q’s that helped me get this fiddle working) - 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/164/

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” pops-open and shows me the enlarged view of the cube, the cube 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, it 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.
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 SO question:

I’ve been at this all day - not getting anywhere.

So my question is simply: has any of you run into this sort of error before?
Any ideas what might be causing something like this to happen - and how I might go about troubleshooting it?

Would appreciate any and all help!

2

Hello,

im not sure if my answer could help or if it is the origin of problem

in code i ve read

import * as THREE from ‘https://cdn.jsdelivr.net/npm/three@0.125.2/build/three.module.js’;

in my project i use for example import { OBB } from ‘./OBB.js’; ( so local file )

and in OBB.js i change original import for import {
Box3,
MathUtils,
Matrix4,
Matrix3,
Ray,
Vector3
} from ‘…/js/three.module.js’;

3

my main.js is probably your js/bizlogicfile.js

in my project i does call js like that , at the end of index.html before 

<script  src="js/three.js"></script>
    <script  src="js/stats.js" ></script>
    <script  src="js/GLTFLoader.js"></script>
    <script  src="js/PointerLockControls.js"></script>
    <script  src="js/maquette.js"></script>
     <script  type="module" src="js/main.js"></script>
4

I’m not sure what you mean by "main.js", but I am importing several different .js files, and I’m doing that in the head section of my HTML file, as follows:

<head> 
	<script type="text/javascript" src="JS/bizLogicFile.js"></script>
</head>

After that I also import all the THREE.js file in the <body> section of the page, as follows:

   <script type="module">
      import { OrbitControls } from "./node_modules/three/examples/jsm/controls/OrbitControls.js";
      import { GLTFLoader } from "./node_modules/three/examples/jsm/loaders/GLTFLoader.js";
 . . .

   </script>
5

if in your bizLogicFile.js there is only “classic” three.object , try to put all .js file need in the same js folder as your bislogicfile.js file and call them like me with a simple src=“js/three.js” etc

in my case i use one type=module because OBB.js is not yet a classic three.object