2

我想使用 React Native 显示骨架（人体）的 3d 模型。

然后，如果我想设置人体特定骨骼的位置，我想调用如下函数：

setPosition(3dmodelObject,boneId,yaw,pitch roll);

或者

setPosition(3dmodelObject,boneId,w,x,y,z); // If using quaternion

例子：

   setPosition(myHumanSkeleton,foreArmId,30,45,70);
   setPosition(myDogSkeleton,tailId,12,40,40);

有人可以指出我正确的方向，以便我可以开始吗？

我注意到有许多库（例如：Three.js），但我似乎无法判断它们是否允许我选择 3d 模型的单个骨骼，并使用欧拉角设置其方向，或四元数。

4

1 回答 1

2

Three.js是首选的传统的基于 JS 的 3D 渲染引擎（自 2010 年首次亮相以来）。它的文档显示它同时支持欧拉角和四元数。

这是在 React 应用程序中使用的可运行示例：

class App extends React.Component {
  componentDidMount() {
    const eulerForGreenCube = new THREE.Euler(1, 2, 3, 'XYZ');
    const quaternionForBlueCube = new THREE.Quaternion(.5, .2, .7, .5);

    // Scene Setup:

    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(
      75,
      window.innerWidth / window.innerHeight,
      0.1,
      1000
    );

    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    this.mount.appendChild(renderer.domElement);
    camera.position.z = 12;

    // Shapes:

    {
      const cubeSize = 4;
      const cubeGeometry = new THREE.BoxBufferGeometry(cubeSize, cubeSize, cubeSize);
      const cubeMaterial = new THREE.MeshPhongMaterial({
        color: 'green'
      });
      const mesh = new THREE.Mesh(cubeGeometry, cubeMaterial);
      mesh.position.set(5, 5, 0);
      mesh.setRotationFromEuler(eulerForGreenCube);
      scene.add(mesh);
    } {
      const cubeSize = 4;
      const cubeGeometry = new THREE.BoxBufferGeometry(cubeSize, cubeSize, cubeSize);
      const cubeMaterial = new THREE.MeshPhongMaterial({
        color: 'blue'
      });
      const mesh = new THREE.Mesh(cubeGeometry, cubeMaterial);
      mesh.position.set(-2, 0, 0);
      mesh.setRotationFromQuaternion(quaternionForBlueCube);
      scene.add(mesh);
    }

    // Lights:

    {
      const light1 = new THREE.PointLight('white', 2, 20, 2);
      scene.add(light1);
    } {
      const light2 = new THREE.HemisphereLight('white', 'red', 1);
      scene.add(light2);
    }

    renderer.render(scene, camera);
  }
  render() {
    return <div ref = {
      ref => (this.mount = ref)
    }
    />;
  }
}

//const rootElement = document.getElementById("root");
ReactDOM.render( < App / > , document.body);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>

如果您正在寻找仍然基于纯 JS 的 Three.js 的良好替代品，Babylon.js是我知道的另一个选择。2013年首次发布，最近受到了很多圈子的青睐。例如，这个倾斜的用户首选选项列表显示 Babylon.js 稳居榜首。Babylon.js 的文档还显示它同时支持欧拉角和四元数。

如果您不介意在 JS 之外构建 3D 模型并将它们作为 GLTF2 或 OBJ 模型导入，则可以考虑的第三种选择是 Facebook 自己的React 360库。值得注意的是，React 360 实际上“依赖 Three.js 进行一些渲染工作”。React 360 的文档展示了如何使用它来处理 3D 对象。您可以在平面部分中查看设置欧拉角的示例。该页面还提到您可以“传入相机的四元数以使表面在用户视口上重新居中”，但没有具体说明是否可以使用四元数设置对象角度。

于 2020-02-10T02:30:04.617 回答