How drag correctly the OBJ file?

[M-P.anslin]

Hi everyone,

I have some problem with drag object, i just want to move this with the mouse

I have tried to drag with the mouse a gltf file that works well

    var loader = new THREE.GLTFLoader();
    loader.load(
        `models/toaster/scene.gltf`,
        ( gltf ) => {

            this.scene.add(gltf.scene);
            gltf.scene.scale.set(5, 5, 5);
            //gltf.scene.position.set(400,400,400)
            gltf.scene.traverse( function( object ) {
                if ( object.isMesh) objects.push( object );
            } );
        },
        null,
        null
    )

I have tried with geometry, well too

    var geometry = new THREE.BoxGeometry( 40, 40, 40 );
    var geometry = new THREE.SphereGeometry( 40, 40, 40 );
    var shape = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: Math.random() * 0xffffff } ) );

    shape.position.x = Math.random() * 1000 - 500;
    shape.position.y = Math.random() * 600 - 300;
    shape.position.z = Math.random() * 800 - 400;

    shape.castShadow = true;
    shape.receiveShadow = true;

    scene.add( shape );

But when I try with obj file i got some problem, I have tried like gltf file

   var bis;
    var mtlLoaderBis = new THREE.MTLLoader();
    mtlLoaderBis.setResourcePath('models/doppio/');
    mtlLoaderBis.setPath('models/doppio/');
    mtlLoaderBis.load('doppio.mtl', function (materials) {

        materials.preload();

        var objLoader = new THREE.OBJLoader();
        objLoader.setMaterials(materials);
        objLoader.setPath('models/doppio/');
        objLoader.load('doppio.obj', function (object) {

            scene.add(object);

            object.traverse( function (child ) {
                if (child.type === 'Mesh' ){
                  //  bis = child;
                    objects.push(child);
                }
            });

        });
    });

but that break my oject up like that

and when i try like this

    var bis;
    var mtlLoaderBis = new THREE.MTLLoader();
    mtlLoaderBis.setResourcePath('models/doppio/');
    mtlLoaderBis.setPath('models/doppio/');
    mtlLoaderBis.load('doppio.mtl', function (materials) {

        materials.preload();

        var objLoader = new THREE.OBJLoader();
        objLoader.setMaterials(materials);
        objLoader.setPath('models/doppio/');
        objLoader.load('doppio.obj', function (object) {

            scene.add(object);

            object.traverse( function (child ) {
                if (child.type === 'Mesh' ){
                    bis = child;
                }
            });

            objects.push(bis);

        });
    });

I have only one thing is moving

then when i do this like simple object

    var mtlLoaderBis = new THREE.MTLLoader();
    mtlLoaderBis.setResourcePath('models/doppio/');
    mtlLoaderBis.setPath('models/doppio/');
    mtlLoaderBis.load('doppio.mtl', function (materials) {

        materials.preload();

        var objLoader = new THREE.OBJLoader();
        objLoader.setMaterials(materials);
        objLoader.setPath('models/doppio/');
        objLoader.load('doppio.obj', function (object) {

            scene.add(object);

            objects.push(object);
        });
    });

nothing happens

I don’t know how can i do to move all the block, if some one can tell me some advice.

Thanks for your time.

[Mugen87]

Even if you load a single OBJ, the visual object can be composed of many individual 3D objects. Since DragControls works on object level, the mentioned result is the intended behavior.

The easiest way to fix this problem is to merge the single parts of your object in a content creation tool like Blender and then export a new OBJ. Otherwise you have to merge the single meshes into a bigger one via JavaScript. Or you change DragControls so it is also able to select the group object based on its bounding box.

[M-P.anslin]

Thank you very much @Mugen87

[Althaf_Khan]

@M-P.anslin

scene.add(object); objects.push(object);

I am also getting this error kindly help me…

function init() {

			camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
			camera.position.z = 2;

			controls = new THREE.TrackballControls( camera );
			controls.rotateSpeed = 1.0;
			controls.zoomSpeed = 1.2;
			controls.panSpeed = 0.8;
			controls.noZoom = false;
			controls.noPan = false;
			controls.staticMoving = true;
			controls.dynamicDampingFactor = 0.3;

			scene = new THREE.Scene();
			scene.background = new THREE.Color( 0xf0f0f0 );

			//

			var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
			scene.add( ambientLight );

			var pointLight = new THREE.PointLight( 0xffffff, 0.8 );
			camera.add( pointLight );
			scene.add( camera );

			var loader = new THREE.GLTFLoader();
			loader.load( 'W3030/W3030.gltf', ( gltf ) => {
				this.scene.add( gltf.scene );
			  gltf.scene.scale.set(1, 1, 1);
				// gltf.scene.position.set(400,400,400)
				gltf.scene.traverse( function( object ) {
					if ( object.isMesh ) objects.push( object );
					if ( object.isMesh ) objects.castShadow = true;
				} );

			});

			renderer = new THREE.WebGLRenderer( { antialias: true } );
			renderer.setPixelRatio( window.devicePixelRatio );
			renderer.setSize( window.innerWidth, window.innerHeight );
			document.body.appendChild( renderer.domElement );

			var dragControls = new THREE.DragControls( objects, camera, renderer.domElement );
			dragControls.addEventListener( 'dragstart', function ( event ) { controls.enabled = false; } );
			dragControls.addEventListener( 'dragend', function ( event ) { controls.enabled = true; } );


			stats = new Stats();
			document.body.appendChild( stats.dom );

			//

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

		}