How to Focus on a GLTF model mesh?

Questions
, , ,
1

Hi, I am trying to create an application where I load a GLTF model on screen using AFrame and am using Orbit Controls to pan, rotate and zoom it. When I click on any part of model, it should get isolated( only that part should be visible all others should disappear) and the camera should now focus on that part and Orbit Controls target should also change.

One approach I tried was -

  1. For isolation : Traverse through nodes. if node.name != clicked part name then make that node’s material transparent and reduce its scale to 0.05 so that it doesn’t take clicks.
  2. For focus: Instead of changing camera position I scaled and trying to center the isolated part. (Centering mesh isn’t working though)

Here’s my JS Fiddle

My question is should I try to change the camera position so it zooms on the clicked part or continue with the above approach.

Also, for either of the approach I need a bit of help.
Thanks !!

2

If you wanna hide objects you can use the visible boolean variable.

model.traverse(o => {
    if(o.name != clickedName) o.visible = false
})

This is something i use in my project for focusing a obj

public focusSelected() {

    // If there is no selected obj -> return
    if(!this.selected) return

    // Calc screen ratio
    let ratio = SceneSetup.w / SceneSetup.h // Canvas width/height

    // Calc dimension and center position of selected obj
    let dimension = new THREE.Vector3()
    let center = new THREE.Vector3()
    let bbox = new THREE.Box3().setFromObject(this.selected)
    bbox.getSize(dimension)
    bbox.getCenter(center)

    let objWidth = dimension.x
    let objHeight = dimension.y

    // Adding some minimum height
    if(objHeight < 2)
        objHeight = 2

    // Calculate distances for width and height
    let distanceW = objWidth / 2 / ratio / Math.tan(Math.PI * camera.fov / 360)
    let distanceH = objHeight / 2 / ratio / Math.tan(Math.PI * camera.fov / 360)
    
    let distance = Math.max(distanceW, distanceH)
    
    // Add depth of selected obj
    distance += dimension.z
    
    // store position of selected obj
    let vec = selected.position.clone()
    // Calc direction of selected obj
    let direction = new THREE.Vector3()
    this.selected.getWorldDirection(direction)
    // Normalize direction to numbers between 0 and 1
    direction.normalize()
    // multiply distance to all normalized values
    direction.multiplyScalar(distance)

    let pos = new THREE.Vector3()
    // Add direction to selected position
    pos = vec.add(direction)

    // Set orbits camera.position to calculated position
    this.orbit.object.position.copy(pos)

    // Set orbits target to selected center
    this.orbit.target.copy(center)

    this.orbit.update()
}
3

Struggling with the following lines of code:

this.orbit.object.position.copy(pos)

    // Set orbits target to selected center
    this.orbit.target.copy(center)

    this.orbit.update()

How to access orbit-controls attribute of camera in A-Frame?

I tried the following but getAttribute returns nothing :

var OrbitCtrls = entity_camera.getAttribute(“camera”,“orbit-controls”);

      // Set orbits camera.position to calculated position

      OrbitCtrls.object3D.position.copy(pos);

  

      // Set orbits target to selected center

      OrbitCtrls.object3D.target.copy(center);

  

      OrbitCtrls.object3D.update();
4

I never used A-Frame, but i guess you have a camera stored in some variable as well?
Instead of using the orbitCtrls reference of camera, use the camera itself.
So instead of orbitCtrl.object.position.copy(pos) use camera.position.copy(pos)

5

Not working for me. Thanks for replying though !!
May be someone who has worked with AFrame will be able to help better.

6

Just a query. Can I create/initialize a new entity/object as the GLTF model child mesh.
When i traverse through my child meshes can I instantiate one of the child meshhes as a new object?
If so please guide me how?