Add automatically a model to selected part of the grid

Questions
1

Hello! in this project i can select a part of the grid when the build mode is "on " and when i select one of the models “cube” or “cylindre” it will be added to the center of the scene. The problem is that i want when i click on the cube or the cylinder it will added to the selected part! any suggestions plzz!
this is the howl project

2

Not sure I 100% understand your code but this should at least partly work:

  • In your mouseDown() function, create a cloned vector of startPoint.
  • Copy the values of this vector to your loaded glTF’s position property.
function mouseDown( event ) {

	if ( buildMode && onPlanePoint ) {

		buildStarted = true;

		var newRectGeom = new THREE.PlaneGeometry( 1, 1 );
		newRectGeom.rotateX( - Math.PI / 2 );
		var newRectMaterial = new THREE.MeshBasicMaterial( {
			color: 0xcc0000, transparent: true, opacity: 0.25
		} );
		newRect = new THREE.Mesh( newRectGeom, newRectMaterial );
		startPoint.copy( onPlanePoint );
		scene.add( newRect );

		const target = startPoint.clone();


		// Model loader instance
		const modelLoader = new GLTFLoader();


		// Shared model material
		const material = new THREE.MeshNormalMaterial();

		const createModel = async model => {

			// Cleanup old models
			scene.traverse( object => {

							if ( ! object.isMesh || object.name === 'grid' ) return;

							scene.remove( object );

							object.geometry.dispose();
							object.material.dispose();
			} );

			// Load model
			const gltf = await modelLoader.loadAsync( `./models/${model}.glb` );
			const [ object ] = gltf.scene.children;

			// Overwrite object material (from Blender)
			object.material = material;

			object.position.copy( target );

			// Add model to scene
			scene.add( object );

		};

		// Setup button events
		document.querySelector( '.cube' ).onclick = () => createModel( 'cube' );
		document.querySelector( '.cylinder' ).onclick = () => createModel( 'cylinder' );

	}

}
3

when I click on the cube or cylinder the selected part disappears, i think this part of code make some problem “object.geometry.dispose();
object.material.dispose();” but i dont know how can i solve this problem

4

When downloading your project and hosting on my local web server, I’ve realized that the path from where you are loading your glTF assets was wrong. A . was missing at the beginning of the path.

5

u mean this line of code " const gltf = await modelLoader.loadAsync( ./models/${model}.glb );
"?

1 Like
6

thanks for the correction but there is one little thing, when i click on the cube it will be added at the side of the selected part and not exactly in the selected part , hope that u understand me

7

Have you considered to compute the center point of the selected area?

8

i don’t know how

9

Well, it’s in between two points on the plane:
newRect.position.addVectors(startPoint, onPlanePoint).divideScalar(2);

1 Like
10

thank u <3