interactable 3D Model loaded from a .obj file?

Question

I am looking to create an Angular 9 PWA, which will load a few .obj files made in Blender.

I have chosen to use three.js for this, it seems to be up for the job. Here's the scenario:

There is a 3D Lever in this App, and I want users to be able to interactively drag this Lever up or down, and depending on which position the lever is in, I want to fire a command.

I have quite a lot of experience with PWAs, but none with three.js or 3D rendering at all. So my Question:

Is this possible? Do user interactions from a loaded .obj file return a value, and if so, how? I haven't seen an example of what I want unfortunately, so I would like to know if it is indeed possible.

Answer 1

Do user interactions from a loaded .obj file return a value?

I believe the .obj file is only for geometry, It does not store anything else.

The interactivity should be done by code, and is very much possible. It's a very broad question because there are multiple ways of how to make objects behave the way you want. The basics of my approach would be this;

Load the obj model. https://threejs.org/examples/?q=obj#webgl_loader_obj

Use a Raycaster. On moving the mouse, save the mouse position. When the mouse is pressed find out what object it clicked on. https://threejs.org/examples/#webgl_interactive_cubes

Then try rotating that object on 1 axis until the mouse is released. That's possible in many ways. You could 'just' link the mouse's x position to the rotation angle, or have the lever rotate towards a projected point in space, but that's a bit harder.

https://jsfiddle.net/EthanHermsey/Ly26ht5r/85/

Maybe something like this in the mousemove event;

//store the coordinate of the mouse.
  mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
  mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

  //if the lever is selected, rotate it.
  if (selectedLever) {      
    //add rotating from the movement of the mouse.
        selectedLever.rotation.z += event.movementX * -0.01;    

    //check if the lever is at the end.
        let rotationStop = 1;
    if (selectedLever && selectedLever.rotation.z <= -rotationStop) {
        selectedLever.rotation.z = -rotationStop;

      console.log('code to execute when lever is in position 1');

      //maybe it could with without releasing the lever, mind that this will fire multiple times.
      releaseLever();
    }
    if (selectedLever && selectedLever.rotation.z >= rotationStop) {
        selectedLever.rotation.z = rotationStop;

      console.log('code to execute when lever is in position 2');

        releaseLever(); 
    }
  }