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 cal

Solution 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:

classAppextendsReact.Component {
  componentDidMount() {
    const eulerForGreenCube = newTHREE.Euler(1, 2, 3, 'XYZ');
    const quaternionForBlueCube = newTHREE.Quaternion(.5, .2, .7, .5);

    // Scene Setup:var scene = newTHREE.Scene();
    var camera = newTHREE.PerspectiveCamera(
      75,
      window.innerWidth / window.innerHeight,
      0.1,
      1000
    );

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

    // Shapes:

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

    // Lights:

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

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

//const rootElement = document.getElementById("root");ReactDOM.render( < App / > , document.body);

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script><scriptsrc="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.