Moving an OBJ via drag and drop

subhomoy · November 19, 2018, 11:51am

Hello there… i have a canvas where i can add object and it can be drag and drop but now i cant to drag a material that is loaded with mtl file and obj file. But i cant do it.

The code i used for creating object is below

var geometry = new THREE.BoxBufferGeometry( 200, 200, 200 );
for ( var i = 0; i < 1; i ++ ) {
var object = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: Math.random() * 0xffffff } ) );					
object.position.set(100,100,100);				
object.scale.x = 0.2;
object.scale.y = 0.2;
object.scale.z = 0.2;
scene.add( object );
objects.push( object );

}

and the code for adding material is

var onProgress = function ( xhr ) {

				if ( xhr.lengthComputable ) {

					var percentComplete = xhr.loaded / xhr.total * 100;
					console.log( Math.round( percentComplete, 2 ) + '% downloaded' );

				}

			};
			var onError = function () { };

			THREE.Loader.Handlers.add( /\.dds$/i, new THREE.DDSLoader() );

			new THREE.MTLLoader()
				.setPath( 'Crate/' )
				.load( 'Crate1.mtl', function ( materials ) {

					materials.preload();

					new THREE.OBJLoader()
						.setMaterials( materials )
						.setPath( 'Crate/' )
						.load( 'Crate1.obj', function ( object ) {

							object.position.z =  0;
							object.position.y =  -1.9;
							object.scale.set(0.5,0.5,0.5);								
							scene.add( object );
							objects.push( object );

						}, onProgress, onError );

				} );

i want to drag and drop the material like the box… can anyone help me…

subhomoy · November 20, 2018, 7:50am

@Mugen87 I’ve already added enough details in the post. I’ve shared the code what i’ve done till now. i want to drag and drop the a materials but its position is getting fixed and when dragging, the camera is the one which is moving…

Mugen87 · November 20, 2018, 10:23am

Your question is unclear since the term “drag and drop a material” in context with your shared code makes no sense.

subhomoy · November 20, 2018, 10:27am

sorry for that. let me share the code once again.

for drag and drop i’ve used this code…

    var dragControls = new THREE.DragControls( objects, camera, renderer.domElement );
			dragControls.addEventListener( 'dragstart', function () {

				//console.log(dragControls);
				controls.enabled = false;

			} );
			dragControls.addEventListener( 'dragend', function () {

				controls.enabled = true;

			} );

and for object creation i used this code,.

var geometry = new THREE.BoxBufferGeometry( 175, 10, 40 );
			for ( var i = 0; i < 1; i ++ ) {

				var object = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: 0x8B4513 } ) );
				object.position.z = 0.5;
				object.scale.x = 0.01;
				object.scale.y = 0.01;
				object.scale.z = 0.01;
				scene.add( object );
				console.log(object);
				objects.push( object );
			}

and for the material creation, i’m using the a 3d model

var onProgress = function ( xhr ) {

				if ( xhr.lengthComputable ) {

					var percentComplete = xhr.loaded / xhr.total * 100;
					//console.log( Math.round( percentComplete, 2 ) + '% downloaded' );

				}

			};
			var onError = function () { };

			THREE.Loader.Handlers.add( /\.dds$/i, new THREE.DDSLoader() );

			var obj = new THREE.MTLLoader()
				.setPath( 'Shelves/' )
				.load( 'Shelves.mtl', function ( materials ) {

					materials.preload();

					new THREE.OBJLoader()
						.setMaterials( materials )
						.setPath( 'Shelves/' )
						.load( 'Shelves.obj', function ( object ) {

							object.position.z =  1;
							object.position.y =  -1.9;
							object.scale.set(1,1,1);								
							scene.add( object );
							console.log(object);							
							objects.push( object );
						}, onProgress, onError );
				} );

when the object is created, i can easily drag and drop in the canvas but when the material is created, i cant drag it. it remains fixed in the same position. only the camera rotates…

Hope i;ve explained completely this time…

Mugen87 · November 20, 2018, 10:41am

You should have mentioned the usage of THREE.DragControls already in your first post.

Again, it is just wrong to say you want to drag a “material”. I guess you refer in this context on your loaded OBJ model, right? If so, I suggest you try to demonstrate the problem with a live example since your code looks actually correct.

subhomoy · November 20, 2018, 11:51am

@Mugen87 please check the link for more information.

http://navsoft.co.in/rigel/index4.html

clicking on add closet will add a demo closet and clicking on add object will add object that you can drag and move accross the canvas.

clicking on add box will insert a material. this is the thing i want to drag and drop like the object. so that i can find the intersection of different models and do stuffs according to it.

Mugen87 · November 20, 2018, 12:41pm

Okay, I see. Can you please make a test with the latest dev version of THREE.DragControls? There was recently a change that introduced the support of drag’n’drop objects with transformed parents:

subhomoy · November 20, 2018, 12:51pm

@Mugen87 updated the code with the latest dragControls.js but still showing the same issue…

any help…

Mugen87 · November 20, 2018, 1:06pm

If you want to raycast against object with children, you have to do this:

var intersects = raycaster.intersectObjects( objects, true );

Notice the second parameter that indicate a recursive processing of objects. So child objects are also testes.

The problem is now that DragControls does currently not support object hierarchies. You have to ensure that your objects array only contains 3D objects without children. So when loading your OBJ, you have to select the mesh from the object variable (which is of type THREE.Group) and then add it to the objects array.

subhomoy · November 20, 2018, 1:22pm

@Mugen87 I think you have not understood my queries… when you visit this link, http://navsoft.co.in/rigel/index4.html, and click on ‘Add Closet’ and ‘Add box’ button, i want to move the box move using mouse drag and drop.

when i add an object, using ‘Add Object’ button, it can be moved to any place. i want the box to move like the object using the drag and drop…

Mugen87 · November 20, 2018, 1:28pm

Sry, maybe someone else of the community can have a look. I think I have posted a solution for your problem.

subhomoy · November 20, 2018, 1:33pm

@Mugen87 my intension was not to hurt you brother, and i’m sorry if it does. you have been a great help for me learning three js and i really appreciate for that. I consider you as my mentor so i’m extremely sorry.

prisoner849 · November 20, 2018, 1:37pm

@subhomoy

When you click “Add Box” you load Shelves.obj. The result of that operation is THREE.Group(), as you can see it in your console log. And you add this object to the array of objects, that you pass to the drag controls.
Drag controls can’t work with children of the objects, because of this:

github.com

mrdoob/three.js/blob/0c51e577afd011aea8d635db2eeb9185b3999889/examples/js/controls/DragControls.js#L88


			}

			scope.dispatchEvent( { type: 'drag', object: _selected } );

			return;

		}

		_raycaster.setFromCamera( _mouse, _camera );

		var intersects = _raycaster.intersectObjects( _objects );

		if ( intersects.length > 0 ) {

			var object = intersects[ 0 ].object;

			_plane.setFromNormalAndCoplanarPoint( _camera.getWorldDirection( _plane.normal ), _worldPosition.setFromMatrixPosition( object.matrixWorld ) );

			if ( _hovered !== object ) {

				scope.dispatchEvent( { type: 'hoveron', object: object } );

PS Not sure, if THREE.Group() has .raycast() method at all

subhomoy · November 20, 2018, 1:47pm

@prisoner849 now i understood your answers and also the above given by @Mugen87. but if it forms a group by including the obj file, then is there any method to move in the scene…

Mugen87 · November 20, 2018, 1:56pm

Hey, no problem . It’s not possible to move the group with DragControls. You have to select the mesh from the group e.g. via Object3D.getObjectByName() and add it to your array of draggable objects.

prisoner849 · November 20, 2018, 1:57pm

Or at the moment, when the model is loaded. Just use something like this in the callback function: objects.push(object.children[0])

subhomoy · November 20, 2018, 3:35pm

Thanks @prisoner849 for the help. it works.

Both @Mugen87 and @prisoner849 Rocks!!!

prisoner849 · November 20, 2018, 6:09pm

You’re welcome

wanbo_jang · December 1, 2018, 1:03pm

hi.
dear @subhomoy, I also have your same problem. I can’t Drag loaded 3d model using DragControls. selecting of model was possible by raycaster.
But when drag , parts of model was moved individually.
please help me. thanks if you send me your code part.
BR.

my code of model loader part is following as :

var loader = new THREE.FBXLoader();
loader.load( '***.fbx', function ( object ) {
var geometry_1, material_1,group;
    object.traverse( function ( child ) {
        if ( child.isMesh ) {
            child.castShadow = true;
            child.receiveShadow = true;
            geometry_1 = child.geometry;
            material_1 = child.material;
            var mesh_1 = new THREE.Mesh( geometry_1, material_1);
            group.add(mesh_1);
        }
    });
    scene.add(group);
});

jagadish_kumar_Rayudu · June 10, 2021, 6:47am

Hiii
can you please help me . I’m using drag controls for drag the mesh and drop in particular div by using three js .How can i drop at particular div

Topic		Replies	Views
How drag correctly the OBJ file? Questions obj-format , drag-controls	3	2146	November 12, 2019
Add materials to obj Questions mtl-loader , obj-loader	1	4228	January 14, 2020
Placing an OBJ Model into an array such that it can be dragged and dropped around the scene Questions obj-loader , drag-controls	3	1000	August 5, 2020
How to change mtl & obj Loader mesh change Questions materials , loaders	3	3882	September 17, 2019
How to Use Drag Control For "Obj" file without expanding object Questions obj-format , lighting , drag-controls	1	681	March 8, 2022

Moving an OBJ via drag and drop

Related topics