如何在本机反应中操纵3D模型的各个骨骼? [英] How to manipulate individual bones of a 3d model in react native?

问题描述

我想使用React Native显示骨架(人体)的3D模型.

I would like to display a 3d model of a skeleton (human body), using React Native.

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

Then if I would like to set the position of specific bones of the human body, I would like to call a function like:

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

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

Can someone point me in the right direction so I can get started ?

我注意到有很多库(例如:Three.js)，但是我似乎无法告诉他们是否有任何库可以让我选择3D模型的各个骨骼，并使用欧拉角或四元数.

I've noticed there are a number of libraries (example: Three.js), but I can't seem to tell if any of them allow me to select individual bones of a 3d model, and set its orientation using an euler angle, or quaternion.

推荐答案

Three.js 是传统的JS-首选的3D渲染引擎(自2010年首次亮相以来).其文档显示，它同时支持欧拉角和

Three.js is the traditional JS-based 3D-rendering engine of choice (since its debut in 2010 anyway). Its documentation shows that it supports both Euler angles and quaternions.

这是在React应用程序中同时使用的两种示例:

Here is a runnable example of both in use in a React app:

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的文档还显示，它同时支持欧拉角和四元数.

If you are looking for a good alternative to Three.js that is still pure-JS-based, Babylon.js is the other option I'm aware of. First released in 2013, it has recently gained favor among many circles. This Slant list of user-preferred options, for example, shows Babylon.js firmly in the top spot. Babylon.js's documentation also shows that it supports both Euler angles and quaternions.

Facebook自己的依赖Three.js进行某些渲染工作" .React 360的文档显示了如何使用它来处理3D对象.您可以在平面"部分.此页面还提到您可以传递四元数的摄影机以在用户视口中重新定位曲面"，但没有具体说明是否可以使用四元数设置物体角度.

A third option to consider if you don't mind building your 3D models outside of JS and importing them as GLTF2 or OBJ models is Facebook's own React 360 library. It's worth noting that React 360 actually "relies on Three.js for some of its rendering work". React 360's documentation shows how you can use it to work with 3D objects. You can see examples of setting Euler angles in the Flat Surfaces section. This page also mentions that you can "pass in a Quaternion of camera to re-center the surface on the user's viewport", but does not specifically say if you can set object angles with quaternions.

这篇关于如何在本机反应中操纵3D模型的各个骨骼?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！