从 .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

使用光线投射器。移动鼠标时，保存鼠标位置。当鼠标被按下时，找出它点击的对象。 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(); 
    }
  }