Place 3D object on top of GridHelper

Questions
1

Hi guys,

Is there a simple way to place 3D objects on the grid helper

So for example if I have the following code

 const size = 150;     
 const divisions = 20;

 this.gridHelper = new THREE.GridHelper( size, divisions );
 this.scene.add( this.gridHelper );

and if I wanted to add a 3D object to it would I need to work out the size of the 3d object by getting a bounding box and it’s centre and translating the y position of the 3D object up by size y/2. Or perhaps there is an easier method built into threejs?

(Also If I set the camera to look at the object placement I presume it will re centre the object and the grid in the camera aesthetically?)

Thanks

2

Nope, but you’ve described the required workflow.

3

Thanks - I’ll try that approach so!

4

Ok, so I have it sitting on top of the grid now.

I am using Orbitcontrols but I am not sure how to get orbit controls to ‘recentre’ everything to the middle of the scene. So basically move everything down by half the height of the object I added. I’ve tried setting orbitcontrols.target to my object but that’s not working.

Any ideas?

5

Hi!
How did you try to set target?
orbitcontrols.target.copy(yourobject.position); ?

6

Yeah - That’s what I tried but it’s doing something weird. It’s kicking it off to the right and it looks like it’s rotating about an offset point that is in the original object I imported. It’s only an issue when I introduce this new target command.

The object itself is not at 0, 0, 0 .(It’s an obj file that I import so it has a translation offset in it) I had to create a surrounding box to get it’s centre and then offset the object position before I add it to the scene. so basically I do this to centre it in the scene. Is this the issue?

var boxHelper = new THREE.BoxHelper( this.object );  
boxObj.setFromObject( boxHelper );

let cent = new THREE.Vector3();
let boxSize = new THREE.Vector3();
boxObj.getCenter(cent); 
boxObj.getSize( boxSize ); 

this.object.position.x = -cent.x;
this.object.position.y = -cent.y + (boxSize.y/2);
this.object.position.z = -cent.z;
7

Could you provide an editable live code example, that shows the issue? jsfiddle, codepen, etc… Or github repo.

8

Never attempted to put anything up there before but I’ll give it a try. It would be easier going forward to ask questions this way

9

not sure how I can load my .obj file on fiddlejs!

So in the meantime I just added a simple cube and everything works as it should so the problem seems to be how 3dObjects are handled.

Anyone any ideas on why it would treat a 3Dobject created from ObjLoader2 different to a mesh created from geometry + material?

so this works

    const geometry = new THREE.BoxGeometry( 30, 30, 30 );
    const material2 = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
    const cube = new THREE.Mesh( geometry, material2 );
    cube.position.y = cube.position.y + 15;
    cube.position.x =  cube.position.x - 15;
    this.scene.add( cube );
  ` this.controls.target.copy(cube.position);` // this works and tracks the centre

but this doesn’t

    var loader = new OBJLoader2();   
    loader.setLogging(true, true);     
    loader.setUseIndices(true);
    loader.setDisregardNormals(false);    
    this.object = loader.parse(this.objtext);
     
    this.controls.target.copy(this.object.position);` // doesn't track the centre correctly