How to manipulate individual bones of a 3d model in react native?

问题

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

or

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

example:

   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 ?

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.

回答1:

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.

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>

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.

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.

来源：https://stackoverflow.com/questions/60036248/how-to-manipulate-individual-bones-of-a-3d-model-in-react-native