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

Question

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

为此，我选择使用 three.js，看来可以胜任这项工作。场景如下：

此应用中有一个 3D 控制杆，我希望用户能够交互式地向上或向下拖动此控制杆，并且根据控制杆的位置，我想发出命令。

我对 PWA 有很多经验，但是 none three.js 或 3D 渲染。所以我的问题：

这可能吗？加载的 .obj 文件中的用户交互是否 return 一个值，如果是，如何？不幸的是，我还没有看到我想要的例子，所以我想知道它是否确实可行。

Answer 1

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

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

交互应该通过代码来完成，而且是很有可能的。这是一个非常广泛的问题，因为有多种方法可以使对象按照您想要的方式运行。我的方法的基础是这样的；

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

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

然后尝试在 1 个轴上旋转该对象，直到松开鼠标。这在很多方面都是可能的。您可以 'just' link 鼠标的 x 位置到旋转角度，或者让控制杆向 space 中的投影点旋转，但这有点困难。

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

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

interactable 3D Model loaded from a .obj file?

3d

blender

three.js

progressive-web-apps

angular