We Keep Coding

Three.JS instance can't be re-created

I'm trying to destroy (or destruct or dispose) an 'instance' of Three.JS using this:
Full example: https://jsfiddle.net/v7oLzs4m/58/
function kill() {
const rendererDomWas = renderer.domElement;
renderer.dispose();
controls.dispose();
renderer = scene = camera = controls = null;
document.body.removeChild( rendererDomWas );
shouldRender = false;
}
function animate() {
if(!shouldRender) {return} // no more requesting animation frames if 'shouldRender' is false
frameID = window.requestAnimationFrame( animate );
renderer.render( scene, camera );
}
(i.e. disposing, setting references to null, and stopping the draw loop from touching renderer while shouldRender is false)
It appears to work at first (The renderer content stops showing) but when I re-create the instance, it never comes back.
It's as if something is still... holding onto the GLContext which prevents it from being invoked again.
Why can't I re-create a new instance of Three.JS?

I'm not sure why this works (since I was already doing this in my Fiddle...)
But it turns out the secret ingredient (for me) to letting Three.JS get GC'd/disposed is this:
window.cancelAnimationFrame(frameID);
I suppose that this stops the render function from being stored in the hardware-level draw loop, which holds references to GLContext (and the chain)
The GC can't ever happen unless the 'loop is broken'
(Correct me if I'm wrong please)

How to remove and dispose of all child geometry and meshes from an Object3D?

In this project I am working on I have several Collada models being displayed and then removed when not needed anymore. There seems to be a memory leak somewhere in the project and I am looking for ways to get it to run as smooth as possible as time is not on my side…
I feel like I don't remove the meshes the right way and that this might cause some of the memory leakage I have.
I load the objects with LoadObject(level_1_character, "Assets/Level_1_Character.dae"); for example, where level_1_character is a Object3D. This calls the following function:
function LoadObject(name, url) {
var mesh, geometry, material, animation;
var loader = new THREE.ColladaLoader();
loader.options.convertUpAxis = true;
loader.load(url, function(col) {
mesh = col;
geometry = col.scene;
name.name = url.toString();
name.add(geometry);
});
}
I add the objects to the scene depending on the level through scene.add(level_1_character); and then remove it by doing the following:
level_1_character.traverse(function(child){
if (child instanceof THREE.Mesh) {
child.material.dispose();
child.geometry.dispose();
}
});
I am not sure if this actually fully removes the object though. It seems as though the objects still are present in memory. Any idea what I'm doing wrong here?

Cannot render Three js objects added to the scene within a jQuery $.get request function

I'm a three.js beginner. I'm attempting to add a sphere to the scene, using position coordinates returned from a JavaScript get request.
A sphere created before the get request is rendered properly, but a sphere created and added to the scene in the callback function is not rendered - although if I debug and inspect the scene, both spheres exist as its children.
My code:
var sphere = new THREE.Mesh(
new THREE.SphereGeometry(radius),
sphereMaterial);
sphere.position.set(-20,-20,-20);
scene.add(sphere); // this sphere shows
sphere2 = sphere.clone();
sphere2.position.set(50,50,50); // testing initializing outside
$.get("{% /graph %}",function(data,status){
scene.add(sphere2); // this sphere does not show
});
renderer.render(scene, camera);
I tried initializing the second sphere inside and outside the callback, I've tried creating the new sphere instead of cloning, I'm not sure what else to try and I don't know what I'm missing.

The jQuery get request is an asynchronous request. The callback function will not be called until after the render call. This means that the object will get added to the scene, but never drawn.
You will need to call the render function inside the get handler.
$.get("{% /graph %}",function(data,status){
scene.add(sphere2);
renderer.render(scene, camera);
});
Alternately, if you create a rendering loop for things like animation, this is unnecessary.

THREE.js static scene, detect when webgl render is complete

I am creating a static scene with a lot of objects and I want to save as image after it is rendered. How do I do that in THREE.js r69?

Most probably, you are not going in the right direction.
if you have some function like this
function animate() {
requestAnimationFrame(animate);
render ();
}
The render is doing it's work all the time.
When you are seeing the scene unfinished, it's because the meshes haven't finished loading, not because the render hasn't finished rendering.
So, you have to listen for some onload event on the models that you are loading, that will depend on the method that you use to load them (and that you don't explain, so I can't help you more)
Given the code in your reply, it isn't clear when you add the mesh to the scene. Anyway, I would try something in the line of
function loaderCallback() {
mesh = new THREE.Mesh (...
scene.add (mesh);
requestAnimationFrame(saveImage);
render ();
}
the function invoked at requestAnimationFrame should be called when render finishes.

How can I destroy THREEJS Scene?

I created a Threejs Scene, adding camera, lights and various objects.
The question is simple: how can I destroy scene? Removing from scene all components?
I need to destroy scene because and I do not want to delegate the task to the garbage collector.

I used this:
cancelAnimationFrame(this.id);// Stop the animation
this.renderer.domElement.addEventListener('dblclick', null, false); //remove listener to render
this.scene = null;
this.projector = null;
this.camera = null;
this.controls = null;
empty(this.modelContainer);
The method empty is a substitute to jQuery empty, you can use it:
function empty(elem) {
while (elem.lastChild) elem.removeChild(elem.lastChild);
}