从.obj文件加载的可交互3D模型？

Question

我正在寻找创建Angular 9 PWA，它将加载Blender中制作的一些.obj文件。

我选择为此使用three.js，这似乎可以胜任。这是场景：

此应用中有一个3D操纵杆，我希望用户能够上下交互地拖动此操纵杆，并且我要根据操纵杆所在的位置来发出命令。

我在PWA方面拥有丰富的经验，但完全没有Three.js或3D渲染。所以我的问题：

这可能吗？来自加载的.obj文件的用户交互是否返回一个值，如果是，则如何？我还没有看到我想要的例子，所以我想知道是否确实可能。

Answer 1

加载的.obj文件中的用户交互是否返回值？

我相信.obj文件仅适用于几何图形，它不存储任何其他内容。

交互性应通过代码完成，并且很有可能。这是一个非常广泛的问题，因为有多种方法可以使对象表现出所需的行为。我的方法的基础是这样；

加载obj模型。https://threejs.org/examples/?q=obj#webgl_loader_obj

使用Raycaster。移动鼠标时，保存鼠标位置。当按下鼠标时，找出它单击的对象。https://threejs.org/examples/#webgl_interactive_cubes

然后尝试沿1轴旋转该对象，直到释放鼠标。这在很多方面都是可能的。您可以“仅”将鼠标的x位置链接到旋转角度，或者使控制杆朝空间中的投影点旋转，但这有点困难。

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

也许在mousemove事件中是这样的；

//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(); 
    }
  }