Как повернуть 3D-модель с помощью перетаскивания экрана мобильного телефона?

Question

Я использую экспо-три (three.js) с реагированием на натив. Я загрузил 3D модель в мобильное приложение (сборка с реагированием-нативом и экспо).

Модель отображается просто отлично, ноне перемещается на экране перетаскивания. Я показал модель через выставочную графику. Я просто хочу повернуть 3D-модель (x,y,z).

Вот мой код для модели класса:

import React from 'react';
import ExpoTHREE, { THREE } from 'expo-three';
import { GraphicsView } from 'expo-graphics';

class Model extends React.Component {

  componentDidMount() {
  THREE.suppressExpoWarnings();
}

// When our context is built we can start coding 3D things.
onContextCreate = async ({ gl, pixelRatio, width, height }) => {

// Create a 3D renderer
this.renderer = new ExpoTHREE.Renderer({
  gl,
  pixelRatio,
  width,
  height,
});

// We will add all of our meshes to this scene.
this.scene = new THREE.Scene();

this.scene.background = new THREE.Color(0x3d392f);

//this.scene.fog = new THREE.Fog( 0xa0a0a0, 10, 50 );

this.camera = new THREE.PerspectiveCamera(12, width/height, 1, 1000);

this.camera.position.set(3, 3, 3);

this.camera.lookAt(0, 0, 0);

//clock = new THREE.Clock();

 //this.scene.add(new THREE.AmbientLight(0xffffff));

var hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
            hemiLight.position.set( 0, 20, 0 );
    this.scene.add( hemiLight );

    var dirLight = new THREE.DirectionalLight( 0xffffff );
            dirLight.position.set( - 3, 10, - 10 );
            dirLight.castShadow = true;
            dirLight.shadow.camera.top = 2;
            dirLight.shadow.camera.bottom = - 2;
            dirLight.shadow.camera.left = - 2;
            dirLight.shadow.camera.right = 2;
            dirLight.shadow.camera.near = 0.1;
            dirLight.shadow.camera.far = 40;
    this.scene.add( dirLight );


await this.loadModel();
  };

loadModel = async () => {
const obj = {
  "f.obj": require('../assets/models/f.obj')
}

const model = await ExpoTHREE.loadAsync(
  obj['f.obj'],
  null,
  obj
);

// this ensures the model will be small enough to be viewed properly
ExpoTHREE.utils.scaleLongestSideToSize(model, 1);

this.scene.add(model)

};


// When the phone rotates, or the view changes size, this method will be called.
onResize = ({ x, y, scale, width, height }) => {
// Let's stop the function if we haven't setup our scene yet
if (!this.renderer) {
  return;
}
this.camera.aspect = width / height;
this.camera.updateProjectionMatrix();
this.renderer.setPixelRatio(scale);
this.renderer.setSize(width, height);
};

// Called every frame.
onRender = delta => {


// Finally render the scene with the Camera
this.renderer.render(this.scene, this.camera);
};

render() {
  return (

  <GraphicsView
    onContextCreate={this.onContextCreate}
    onRender={this.onRender}
    onResize={this.onResize}
  />

  );
 }

}

export default Model;