How to move the origin point to the center?

Questions
1

I have a scene with 200+ GLTF models loaded, each model have it’s position, the same as real world. But when I set positions for all models, everything is ok, but the origin point is on the bottom-left of the “world”, how to move (1) to (2) in the picture.

I have one method, but I’m not satisfied with it:

// the position of (2) in the picture
const worldCenter = new THREE.Vector3(...)

loadModel(url: string, position THREE.Vector3) {
    const model = loadGLTF(url)
    model.position = new THREE.Vector3(
        position.x - worldCenter.x,
        position.y - worldCenter.y,
    )
    this.scene.add(model)
}

This solution, I need to change every object3d’s position offset, not elegant.

Is there a better solution?

image
image1573×1056 292 KB

2

@waynewu –

If all objects are put in a THREE.Group object, you can move only this group object. You may also try to move the whole THREE.Scene, but it will also move lights. Also, you can just move the view point .

– Pavel

1 Like
3

According to me, you cannot move origin.

I have one suggestion for you.

  1. Create one parent Object and add all your imported gltf models in that object.
  2. Generate boundingBox and get center of parent object using “setFromObject”
  3. Invert center and translate parent object.

These steps move your models to origin

2 Likes
4

I think you can change position of object in the mousemove.

1 Like