Remove an object from scene

Question

my problem is that i have buttons : "view" button that enable OrbitControls , "move" button that disable OrbitControls so i can use DragControls, "cube" button that add a cube (or many cubes) to the scene and everything works fine, but when i added a "remove" button so i can remove the cube, it didnt work it says that the cube is not defined. So what should i do ? `

//variables : 
var objects = [];

//scene
var scene = new THREE.Scene();
scene.background = new THREE.Color( 0xf0f0f0 );

//camera
var camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 1000;



//renderer
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );




//adding light
scene.add( new THREE.AmbientLight( 0x0f0f0f ) );
var light = new THREE.SpotLight( 0xffffff, 1 );
light.position.set( 0, 500, 2000 );
scene.add(light);





//controls

const orbitControls = new THREE.OrbitControls( camera, renderer.domElement );
const dragControls = new THREE.DragControls( objects, camera, renderer.domElement );


//fix the window resize problem 
window.addEventListener('resize', function(){
    renderer.setSize(window.innerWidth,window.innerHeight) ; 
    camera.aspect = window.innerWidth / window.innerHeight ; 
    camera.updateProjectionMatrix();
}) ;



    
    

//animate 
function animate() {
    requestAnimationFrame( animate );
    renderer.render(scene, camera);
};

//cloning
function createCube () {
    
    var geometry = new THREE.BoxGeometry( 120, 120, 120 );
    var cube = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: 0x00004B } ) );
    scene.add( cube );
    objects.push( cube );
    cube.position.x = 0;
    cube.position.y = -30;

}



function createRockCube() {
    var texture = new THREE.TextureLoader().load( 'rock.jpg' );
    var rock_geometry = new THREE.BoxGeometry( 120, 120, 120 );
    var rock_material = new THREE.MeshBasicMaterial( {map: texture} );
    var rock_cube = new THREE.Mesh( rock_geometry, rock_material );
    scene.add( rock_cube );
    objects.push( rock_cube );
    rock_cube.position.x = -200;
    rock_cube.position.y = -30;
}


function createRobot() {
    var objLoader = new THREE.OBJLoader();
    objLoader.setPath('/examples/3d-obj-loader/assets/') ;
    objLoader.load('r2-d2.obj', function (object) {
        object.position.x = 500 ;
        object.position.y = -100 ;
        object.traverse( ( o )=> {

            if ( o.isMesh ) objects.push( o );
        
        } );
        scene.add(object);
}) ; 
}

function createRobot2() {
    var mtlLoader = new THREE.MTLLoader();
    mtlLoader.setPath('/examples/3d-obj-loader/assets/') ; 
    mtlLoader.load('r2-d2.mtl',  (materials)=> {
    materials.preload(); 
        
        var objLoader2 = new THREE.OBJLoader();
        objLoader2.setMaterials(materials);
        objLoader2.setPath('/examples/3d-obj-loader/assets/') ;
        objLoader2.load('r2-d2.obj',  (object2) =>{
            object2.position.x = 300 ;
            object2.position.y = -100 ;
            object2.traverse( ( o ) => {

                if ( o.isMesh ) objects.push( o );
            
            } );
        scene.add(object2);
        });
})
}

function disableControl(){
    orbitControls.enabled = false;
}

function enableControl(){
    orbitControls.enabled = true;
}

function removeCube () {
    
        cube.geometry.dispose();
        cube.material.dispose();
        scene.remove(cube);
    }




animate();

body { 
    margin: 0px;
    background-color: rgb(240, 240, 240);
}
        

canvas {
    width: 100%; 
    height: 100vh ;
    position: absolute;
}

/* objects buttons */

#btn-cube  {
    background-color: rgb(0, 0, 75);
    position: absolute;
    left: 70px;
    height: 50px;  
    width: 100px;
    cursor: pointer;
}

#rock-btn img {
    position: absolute;
    top: 75px;
    left: 70px;
    height: 50px;  
    width: 100px;
    cursor: pointer;
}


#robot-btn  {
    position: absolute;
    left: 70px;
    height: 50px;  
    width: 100px;
    cursor: pointer;
}

#robot2-btn {
    position: absolute;
    top: 55%;
    left: 70px;
    height: 50px;  
    width: 100px;
    cursor: pointer;
}

#move-btn {
    position: absolute;
    top: 90%;
    left: 55%;
    height: 50px;  
    width: 100px;
    background-color: Transparent;
    background-repeat:no-repeat;
    border: none;
    cursor:pointer;
    overflow: hidden;   
    font-size: 20px;  
    font-family: cursive;
}
#view-btn {
    position: absolute;
    top: 90%;
    left: 45%;
    height: 50px;  
    width: 100px;
    background-color: Transparent;
    background-repeat:no-repeat;
    border: none;
    cursor:pointer;
    overflow: hidden;   
    font-size: 20px;   
    font-family: cursive;
}

/*menu*/

nav {
    width: 250px;
    position: absolute;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    box-shadow: 5px 7px 10px rgba(0, 0, 0, 0.5);
    transition: 0.3s ease;
}

nav ul {
    position: relative;
    top: 50px;
    list-style-type: none;
}

nav ul li a {
    display: flex;
    align-items: center;
    font-family: cursive;
    font-size: 20px;
    text-decoration: none;
    text-transform: capitalize;
    color:black;
    padding: 10px 30px;
    height: 50px;
    transition: 0.5s ease;
    
}

nav ul li a:hover {
    cursor: pointer;
    color: #fff;
}

nav ul .cubes {
    position: absolute;
    left: 250px;
    width: 200px;
    top : 0; 
    display: none;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, 0.1);
}

nav ul .robots {
    position: absolute;
    left: 250px;
    width: 200px;
    top : 80; 
    display: none;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, 0.1);
}

nav ul span {
    position: absolute;
    right: 20px;
    font-size: 20px;
}



nav ul .dropdown:hover ul{
    display: initial;
}


nav ul .dropdown2:hover ul{
    display: initial;
}

#open-btn {
    display: none;
    position: absolute;
    top: 12px;
    cursor: pointer;
    font-size: 30px;
}

 .close-btn {
    position: absolute;
    top: 10px;
    right: 5px;
    cursor: pointer;
    font-size: 36px;
    color: rgb(66, 64, 40);
}

#remove-btn {
    position: absolute;
    top: 90%;
    left: 30%;
    height: 50px;  
    width: 100px;
    background-color: Transparent;
    background-repeat:no-repeat;
    border: none;
    cursor:pointer;
    overflow: hidden;   
    font-size: 20px;   
    font-family: cursive;
}

<html>
    <head>
        <title>Kitchen Planner Ama Mn Jumia </title>
        <link rel="stylesheet" href="/style.css">
    </head>
    <body>
        <script  src="./three.min.js"></script>
        <script  src="./DragControls.js"></script>
        <script  src="./OrbitControls.js"></script>
        <script  src="./OBJLoader.js"></script>
        <script  src="./MTLLoader.js"></script>
        <script  src="./app.js"></script>
        <script src="./menu.js"></script>
        
        
        
        <nav id="menu" >
            <div id="open-btn" onclick="openFunction()"> &#9776; </div>
                <a href="#" class="close-btn" onclick="closeFunction()">&times;</a>
            <ul>
                <li id="dropdown" class="dropdown"><a href="#">Cubes <span>&rsaquo;</span></a>
                    <ul class="cubes">
                        <li><a href="#"><button id="btn-cube" onclick="createCube()"></button></a>
                        <li><a href="#"><button id="rock-btn"    onclick="createRockCube()" ><img src="./rock.jpg"></button></a>
                    </ul>
                </li>
                <li id="dropdown2" class="dropdown2"><a href="#">Robots <span>&rsaquo;</span></a>
                    <ul class="robots">
                        <li><a href="#"><button id="robot-btn"   onclick="createRobot()"> Robot </button></a>
                        <li><a href="#"><button id="robot2-btn"  onclick="createRobot2()"> Robot 2 </button></a>
                    </ul>
                </li>
            </ul>
            
        </nav>
            
            <button id="move-btn"    onclick="disableControl()">move</button>
            <button id="view-btn"    onclick="enableControl()"> view </button>
            <button id="remove-btn"    onclick="removeCube()"> remove </button>
        

    </body>
</html>

`

Answer 1

You have to declare your cube variable outside of createCube(). It's then in a scope that can be accessed by removeCube().