How to remove obj form three.js scene - html

Question

I am building a small website with three.js (I am a absolute beginner). My website is working fine but I want to remove a obj from the scene. How can I do this?
What I want is that when I click a button, the OBJ disappears. How can I do this?
My code:
<script async src="https://unpkg.com/es-module-shims#1.3.6/dist/es-module-shims.js"></script>
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three#0.149.0/build/three.module.js",
"three/addons/": "https://unpkg.com/three#0.149.0/examples/jsm/"
}
}
</script>
<script type="module">
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';
import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
const scene = new THREE.Scene();
const renderer = new THREE.WebGLRenderer({ antialias: true });;
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
const controls = new OrbitControls( camera, renderer.domElement );
const loader = new OBJLoader();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
camera.position.z = 20;
camera.position.y = 20;
const light = new THREE.SpotLight()
light.position.set(10, 5, 5)
scene.add(light)
function loadtavel(){
loader.load(
// resource URL
'assets/objtest.obj',
// called when resource is loaded
function ( object ) {
scene.add( object );
// object.translateZ( 10 );
},
// called when loading is in progresses
function ( xhr ) {
console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
},
// called when loading has errors
function ( error ) {
console.log( 'An error happened' );
}
);
}
loader.load(
// resource URL
'assets/untitled.obj',
// called when resource is loaded
function ( object ) {
scene.add( object );
object.translateY( 10 );
},
// called when loading is in progresses
function ( xhr ) {
console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
},
// called when loading has errors
function ( error ) {
console.log( 'An error happened' );
}
);
renderer.setClearColor( 0xffffff, 0);
function removeLoad(){
}
// renderer.physicallyCorrectLights = true
// renderer.shadowMap.enabled = true
renderer.outputEncoding = THREE.sRGBEncoding
// texture.encoding = THREE.sRGBEncoding;
var obj = {
add: function() {
loadtavel();
}
};
var obj2 = {
add: function() {
removeLoad()
}
};
function animate() {
requestAnimationFrame( animate );
// cube.rotation.x += 0.01;
// cube.rotation.y += 0.01;
renderer.render( scene, camera );
};
animate();
const gui = new GUI()
const cubeFolder = gui.addFolder('Cube')
cubeFolder.add(obj, 'add').name('Load!');
cubeFolder.add(obj2, 'add').name('Unload!');
cubeFolder.open()
</script>
</html>
I already searched for a solution but I couldn't find anything

Answer 1

If you want to make the OBJ disappear, you could just change its visibility:
obj.visibility = false;
If you want to remove it from the scene, just do so with:
scene.remove(obj);