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

Question

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.

Answer 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>