Problem deleting object

Questions
1

hello in this example i try to delete the body but it doesn’t work how i should

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js webgl - materials - car</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<link type="text/css" rel="stylesheet" href="main.css">
		<style>
			body {
				color: #444;
				background: #eee;
			}
			a {
				color: #08f;
			}
			.colorPicker {
				display: inline-block;
				margin: 0 10px
			}
		</style>
	</head>

	<body>
		<div id="info">
			
			<span class="colorPicker"><input id="body-color" type="color" value="#ff0000"></input><br/>Body</span>
			<span class="colorPicker"><input id="details-color" type="color" value="#ffffff"></input><br/>Details</span>
			<span class="colorPicker"><input id="glass-color" type="color" value="#ffffff"></input><br/>Glass</span>
		</div>

		<div id="container"></div>

		<script type="module">

			import * as THREE from './build/three.module.js';

			import Stats from './jsm/libs/stats.module.js';

			import { OrbitControls } from './jsm/controls/OrbitControls.js';
			import { RoomEnvironment } from './jsm/environments/RoomEnvironment.js';

			import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
			import { DRACOLoader } from './jsm/loaders/DRACOLoader.js';

			let camera, scene, renderer;
			let stats;

			let grid;
			let controls;

			const wheels = [];

			function init() {

				const container = document.getElementById( 'container' );

				renderer = new THREE.WebGLRenderer( { antialias: true } );
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( window.innerWidth, window.innerHeight );
				renderer.setAnimationLoop( render );
				renderer.outputEncoding = THREE.sRGBEncoding;
				renderer.toneMapping = THREE.ACESFilmicToneMapping;
				renderer.toneMappingExposure = 0.85;
				container.appendChild( renderer.domElement );

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

				stats = new Stats();
				container.appendChild( stats.dom );

				//

				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 0.1, 100 );
				camera.position.set( 4.25, 1.4, - 4.5 );

				controls = new OrbitControls( camera, container );
				controls.target.set( 0, 0.5, 0 );
				controls.update();

				const environment = new RoomEnvironment();
				const pmremGenerator = new THREE.PMREMGenerator( renderer );

				scene = new THREE.Scene();
				scene.background = new THREE.Color( 0xeeeeee );
				scene.environment = pmremGenerator.fromScene( environment ).texture;
				scene.fog = new THREE.Fog( 0xeeeeee, 10, 50 );

				grid = new THREE.GridHelper( 100, 40, 0x000000, 0x000000 );
				grid.material.opacity = 0.1;
				grid.material.depthWrite = false;
				grid.material.transparent = true;
				scene.add( grid );

				// materials

				const bodyMaterial = new THREE.MeshPhysicalMaterial( {
					color: 0xff0000, metalness: 0.6, roughness: 0.4, clearcoat: 0.05, clearcoatRoughness: 0.05
				} );

				const detailsMaterial = new THREE.MeshStandardMaterial( {
					color: 0xffffff, metalness: 1.0, roughness: 0.5
				} );

				const glassMaterial = new THREE.MeshPhysicalMaterial( {
					color: 0xffffff, metalness: 0, roughness: 0.1, transmission: 0.9, transparent: true
				} );

				const bodyColorInput = document.getElementById( 'body-color' );
				bodyColorInput.addEventListener( 'input', function () {

					bodyMaterial.color.set( this.value );

				} );

				const detailsColorInput = document.getElementById( 'details-color' );
				detailsColorInput.addEventListener( 'input', function () {

					detailsMaterial.color.set( this.value );

				} );

				const glassColorInput = document.getElementById( 'glass-color' );
				glassColorInput.addEventListener( 'input', function () {

					glassMaterial.color.set( this.value );

				} );

				// Car

				const shadow = new THREE.TextureLoader().load( './ferrari_ao.png' );

				const dracoLoader = new DRACOLoader();
				dracoLoader.setDecoderPath( '' );

				const loader = new GLTFLoader();
				loader.setDRACOLoader( dracoLoader );

				loader.load( 'models/ferrari.glb', function ( gltf ) {

					const carModel = gltf.scene.children[ 0 ];

					carModel.getObjectByName( 'body' ).material = bodyMaterial;

					carModel.getObjectByName( 'rim_fl' ).material = detailsMaterial;
					carModel.getObjectByName( 'rim_fr' ).material = detailsMaterial;
					carModel.getObjectByName( 'rim_rr' ).material = detailsMaterial;
					carModel.getObjectByName( 'rim_rl' ).material = detailsMaterial;
					carModel.getObjectByName( 'trim' ).material = detailsMaterial;

					carModel.getObjectByName( 'glass' ).material = glassMaterial;

					wheels.push(
						carModel.getObjectByName( 'wheel_fl' ),
						carModel.getObjectByName( 'wheel_fr' ),
						carModel.getObjectByName( 'wheel_rl' ),
						carModel.getObjectByName( 'wheel_rr' )
					);

					// shadow
					const mesh = new THREE.Mesh(
						new THREE.PlaneBufferGeometry( 0.655 * 4, 1.3 * 4 ),
						new THREE.MeshBasicMaterial( {
							map: shadow, blending: THREE.MultiplyBlending, toneMapped: false, transparent: true
						} )
					);
					mesh.rotation.x = - Math.PI / 2;
					mesh.renderOrder = 2;
					carModel.add( mesh );

					scene.add( carModel );

				} );

			}

			function onWindowResize() {

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

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

			}

			function render() {

				const time = - performance.now() / 10;

				for ( let i = 0; i < wheels.length; i ++ ) {

					wheels[ i ].rotation.x = time * Math.PI;

				}

				grid.position.z = - ( time ) % 5;

				renderer.render( scene, camera );

				stats.update();

			}

			init();




    document.querySelector('#delete').addEventListener('click', () => {
	
		
	   scene.remove(scene.getObjectByName('body'));
	   
		
	});

		</script>
<a class="element btn aktivitebutton" style=";width:300px;font-size:33px;position:absolute;z-index:99;top:300px;left:15%" href="#" id="delete" title="dd">delete body</a>
		


	</body>
</html>
2

Can you please make sure whether the code in your event listener is executed or not?

Besides, try it with a <button> element instead of link tag. Also move the markup above your script tag.

3

I did as you said but unfortunately
very interesting problem, as shown in the video the object changes its position but does not delete it.

4

Please demonstrate the issue with a live example.

5
7

aaa I found the solution here;

8

@sagir

i was trying to get you a pen that would work but it seems your original model hierarchy is not quite right for the task you need to achieve…

here as you can see the button will now remove the part “body” but as it was only a mesh child of “main” it needs to be an Object3D of it’s own to be added and removed from the scene if i’m not mistaken, in adding it to its own Object3D the model is left in the wrong orientation… i would suggest modifying your original model file so that all pivot points are centered and all transforms are frozen as well as seperate “main” into any seperate objects you would like to manipulate in this way…

2 Likes
9

…
body = carModel.getObjectByName( ‘body’ )
scene.add(body);

document.querySelector(’#delete’).addEventListener(‘click’, () => {

   scene.remove( body);
	
});

hmm that is good solition, 2 thank you

1 Like