使用expo和three使用React Native渲染动画对象

Question

我的目标是在react原生应用程序中显示一个旋转的立方体。我可以用这段代码显示立方体，但每当我取消对旋转的注释时，它就消失了。渲染器有什么发现吗？

我使用零食，立方体只在“网络”视图中可见，而不是在iOS或安卓系统中。

import * as React from 'react';
import { View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';

import { GLView } from 'expo-gl';
import { THREE } from 'expo-three';
import ExpoTHREE from 'expo-three';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this._onGLContextCreate = this._onGLContextCreate.bind(this);
    this.animate = this.animate.bind(this);
  }

  _onGLContextCreate = async gl => {
    this.scene = new THREE.Scene();
    this.camera = new THREE.Camera(
      75,
      gl.drawingBufferWidth / gl.drawingBufferHeight,
      0.1,
      1000
    );
    this.scene.add(this.camera);
    this.renderer = new ExpoTHREE.Renderer({ gl });
    this.geometry = new THREE.BoxGeometry(1, 1, 1);
    this.material = new THREE.MeshBasicMaterial({ color: 0xff0f00 });
    this.obj = new THREE.Mesh(this.geometry, this.material);
    this.edges = new THREE.EdgesGeometry(this.geometry);
    this.line = new THREE.LineSegments(
      this.edges,
      new THREE.LineBasicMaterial({ color: 0xffffff })
    );

    this.scene.add(this.line);
    this.scene.add(this.obj);
    this.animate();
  };

  animate = () => {
    requestAnimationFrame(this.animate);
    //this.geometry.rotation.x += 0.01;
    //this.geometry.rotation.y += 0.01;
    this.renderer.render(this.scene, this.camera);
  };

  render() {
    return (
      <View style={styles.container}>
        <GLView
          style={{ width: 300, height: 300 }}
          onContextCreate={this._onGLContextCreate}
        />
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});

代码主要改编自https://medium.com/@zohayb1996/using-expo-and-three-js-with-react-native-4bcb353b222e

谢谢

Answer 1

在Three.js中，您不旋转Geometry，而是旋转Mesh。只需更新您的动画函数即可使用：

    this.obj.rotation.x += 0.01;
    this.obj.rotation.y += 0.01;