Как манипулировать отдельными костями 3d модели, реагировать на родные? - PullRequest
Новая
       45

Как манипулировать отдельными костями 3d модели, реагировать на родные?

2 голосов
/ 03 февраля 2020

Я хотел бы отобразить 3d-модель скелета (человеческого тела), используя React Native.

Тогда, если бы я хотел установить положение определенных c костей человеческого тела, я хотел бы вызвать такую ​​функцию, как: 

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

Может ли кто-нибудь указать мне правильное направление, чтобы я мог получить запущен?

Я заметил, что есть несколько библиотек (пример: Три. js), но я не могу сказать, позволяет ли какая-либо из них выбрать отдельные кости 3d-модели и установите его ориентацию, используя угол Эйлера или кватернион.

1 Ответ

3 голосов
/ 10 февраля 2020

Three. js - это традиционный движок 3D-рендеринга на основе JS (так или иначе, с момента его дебюта в 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, которая все еще чиста - JS на основе, Вавилон. js другой вариант, который я знаю. Впервые выпущенный в 2013 году, он недавно завоевал популярность во многих кругах. Этот Slant список предпочтительных для пользователя опций , например, показывает Babylon. js твердо на первом месте. Документация Babylon. js также показывает, что он поддерживает и углы Эйлера и кватернионы .

Третий вариант, если вы не против построить свои 3D-модели за пределами JS и импортировать их как модели GLTF2 или OBJ - это собственная React 360 библиотека Facebook. Стоит отметить, что React 360 на самом деле "полагается на Three. js для некоторых своих рендерингов" . Документация React 360 показывает , как вы можете использовать его для работы с трехмерными объектами . Вы можете увидеть примеры установки углов Эйлера в разделе Плоские поверхности . На этой странице также упоминается, что вы можете «передать кватернион камеры, чтобы перецентрировать поверхность на окне просмотра пользователя», но конкретно не сказано, можно ли установить углы объекта с кватернионами.

...