# How to access geometries and materials after Collada is loaded

**URL:** <https://discourse.threejs.org/t/how-to-access-geometries-and-materials-after-collada-is-loaded/18079>\
**Category:** Questions\
**Tags:** collada-loader, materials, geometry\
**Created:** [August 23, 2020, 12:02pm UTC](https://discourse.threejs.org/t/how-to-access-geometries-and-materials-after-collada-is-loaded/18079 "2020-08-23T12:02:03Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![stewahn](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/stewahn/32/12656_2.png) [@stewahn](https://discourse.threejs.org/u/stewahn)\
**Post date:** [August 23, 2020, 12:02pm UTC](https://discourse.threejs.org/t/how-to-access-geometries-and-materials-after-collada-is-loaded/18079/1 "2020-08-23T12:02:03Z")

</div>

The following code loads a Collada with the name _1.dae_ in the scene. A click on the element with `id="red"` loads a new Collada with the name _2.dae_ in the scene and **replaced** the first. I know, I have to use `dispose()` for the first loaded model to make sure now, that the geometries and the materials of _1.dae_, which are **not used anymore** , gets deleted from browser cache. And here is my problem: I do not know, how to access the geometries and neither the materials of the loaded Collada to call `dispose()` on it. What I have to do, to get access to geometries and materials of the loaded _1.dae_ file?

```
    <script type="module">

    import * as THREE from '../three119/build/three.module.js'; //r119 31.07.2020
    import { ColladaLoader } from '../three119/examples/jsm/loaders/ColladaLoader.js'; //31.07.2020
    import { OrbitControls } from '../three119/examples/jsm/controls/OrbitControls.js'; //31.07.2020

    var canvas, camera, scene, renderer, model, controls, collada;
    var modelNumber = 1;

	init();
	animate();

	function init() {
        canvas = document.getElementById( 'canvas' );
        
        camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
        camera.position.set( 0, 0, 10 );

		scene = new THREE.Scene();

		// loading Collada when loading page
        
		var loadingManager = new THREE.LoadingManager(); 

		var loader = new ColladaLoader( loadingManager );
        
        loader.load( getModelURL(), function ( collada ) { model = collada.scene; scene.add( model ) } );

		// switch to next model

		document.getElementById ( "down" ).onclick = function () {
			
			modelNumber = modelNumber + 1;
			
			loader.load ( getModelURL (), function ( collada ) { 

				scene.remove(model);

				camera.position.set( 0, 0, 10 );
				
				model = collada.scene;
				
				scene.add( model );	

			}, undefined, function ( error ) {

				modelNumber = modelNumber - 1;

		} ) };	

		document.getElementById("up").onclick = function(){
			
			modelNumber = modelNumber - 1;
			
			loader.load ( getModelURL (), function ( collada ) { 

				scene.remove(model);
				
				camera.position.set( 0, 0, 10 );
				
				model = collada.scene;
				
				scene.add( model );
			
			}, undefined, function ( error ) {

				modelNumber = modelNumber + 1;
				
				console.log(modelNumber)

		} ) };	

		// Lights, Renderer, Controls

        var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
		scene.add( ambientLight );

		var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.8 );
		directionalLight.position.set( 1, 1, 0 ).normalize();
		scene.add( directionalLight );

		renderer = new THREE.WebGLRenderer();
		renderer.setPixelRatio( window.devicePixelRatio );
		renderer.setSize( window.innerWidth, window.innerHeight );
		canvas.appendChild( renderer.domElement );

        controls = new OrbitControls( camera, renderer.domElement );
        controls.addEventListener( 'change', render ); // call this only in static scenes (i.e., if there is no animation loop)
        controls.enableDamping = true; // an animation loop is required when either damping or auto-rotation are enabled
		controls.dampingFactor = 0.25;
        controls.screenSpacePanning = false;
        controls.minDistance = 10;
		controls.maxDistance = 500
        controls.maxPolarAngle = Math.PI / 2;

		window.addEventListener( 'resize', onWindowResize, false );

	};

	function onWindowResize() {

		camera.aspect = window.innerWidth / window.innerHeight;
		camera.updateProjectionMatrix();

		renderer.setSize( window.innerWidth, window.innerHeight );

	};

	function animate() {

		requestAnimationFrame( animate );

		controls.update();

		render();

	};

	function render() {

		renderer.render( scene, camera );
		
	};

    function getModelURL() {
        
		var modelFileName = '../DAE/' + modelNumber + '.dae';
        
		return modelFileName;

    };

</script>
</body>

```

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [August 23, 2020, 2:00pm UTC](https://discourse.threejs.org/t/how-to-access-geometries-and-materials-after-collada-is-loaded/18079/2 "2020-08-23T14:00:11Z")

</div>

The idea is to traverse through the object hierarchy and then access all geometries and materials. Please try:

> [@When to dispose: How to completely clean up a Three.js scene](https://discourse.threejs.org/t/how-to-completely-clean-up-a-three-js-scene-from-a-web-app-once-the-scene-is-no-longer-needed/1549/11):
>
> Alright, the following is what I have so far, and I’m doing it to see if there’s any difference in memory use compared to not doing it (my guess is there won’t be and the Garbage Collector will work great, but just in case). Am I missing anything? console.log('dispose renderer!') renderer.dispose() scene.traverse(object =\> { if (!object.isMesh) return console.log('dispose geometry!') object.geometry.dispose() if (object.material.isMaterial) { cleanMaterial(object.material) } else { …

Instead of using `scene`, use the code with your `model` variable.

---

<div class="post-metadata">

**Author:** ![stewahn](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/stewahn/32/12656_2.png) [@stewahn](https://discourse.threejs.org/u/stewahn)\
**Post date:** [August 25, 2020, 9:27pm UTC](https://discourse.threejs.org/t/how-to-access-geometries-and-materials-after-collada-is-loaded/18079/3 "2020-08-25T21:27:40Z")

</div>

Thanks @Mugen87. With the `model` variable it works, even if I thought, it has to work with the `scene` variable too. When I use the [mentioned approach](https://discourse.threejs.org/t/how-to-access-geometries-and-materials-after-collada-is-loaded/18079/2) i get this error:

![grafik](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/2/2bb09bab356ddb8bbcd57b65741736f5393a8df8.png)

I used a simple cube model made in SketchUp with only colors as materials. I think that’s why it’s automatically parsed as `MeshLambertMaterial`. Therefore I changed the code and no error appears.

```
model.traverse(object => {
					
	if (!object.isMesh) return

	object.geometry.dispose()
					
	console.log('dispose geometry done!')
					
	//if (!object.material instanceof THREE.MeshLambertMaterial) return

	if (!object.material.isMaterial) return

	object.material.dispose()
					
console.log('dispose material done!')})	 

```

I hope to find a way to control the free memory…  
🦊 🤷‍♂️

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [August 27, 2020, 8:05am UTC](https://discourse.threejs.org/t/how-to-access-geometries-and-materials-after-collada-is-loaded/18079/4 "2020-08-27T08:05:22Z")

</div>

This code is fine unless an object as multiple materials applied to it. In this case, no materials will be disposed. If the code form the other thread does not work, write `cleanMaterial()` less fancy like so:

```javascript
function cleanMaterial(material) {
	material.dispose();
	const keys = Object.keys(material);
	for(const key of keys) {
		const value = material[key];
		if (value && value.isTexture) {
			value.dispose();
		}
	}
}

```

---

<div class="post-metadata">

**Author:** ![stewahn](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/stewahn/32/12656_2.png) [@stewahn](https://discourse.threejs.org/u/stewahn)\
**Post date:** [August 27, 2020, 7:38pm UTC](https://discourse.threejs.org/t/how-to-access-geometries-and-materials-after-collada-is-loaded/18079/5 "2020-08-27T19:38:23Z")

</div>

It works perfect with “less fancy”.

![grafik](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/4/4bc57b9fd0903a1e987fcf522be47b9b3daf5cbc.png)

Thank you. 🐉