问题

我正在用three.js构建一个小型网站（我是一个绝对的初学者）。我的网站工作得很好，但我想从场景中移除一个OBJ。我该怎么做？

我想要的是，当我点击一个按钮时，OBJ会消失。我该怎么做？

我的代码：

function removeLoad(){
    var objToRemove = scene.getObjectByName('name_of_your_obj'); // 替换为你的OBJ的名称
    if (objToRemove) {
        scene.remove(objToRemove);
    }
}

<details>
<summary>英文:</summary>

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

</details>


# 答案1
**得分**: 0

如果您想使OBJ消失，只需更改其可见性：

    obj.visibility = false;

如果您想从场景中移除它，只需执行以下操作：

    scene.remove(obj);

<details>
<summary>英文:</summary>

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);

</details>