Moving an OBJ via drag and drop

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…

@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…

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

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…

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.

@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.

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:

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

any help…

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.

@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…

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

@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.

@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:

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

1 Like

@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…

Hey, no problem :wink:. 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.

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

Thanks @prisoner849 for the help. it works.

Both @Mugen87 and @prisoner849 Rocks!!!

2 Likes

You’re welcome :slight_smile: :beers:

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);
});
2 Likes

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