Question

我的目标是在本机应用程序中显示一个旋转的立方体。我可以使用此代码显示多维数据集，但是只要取消注释旋转，它就会消失。渲染器有东西吗？

我使用点心，并且该多维数据集仅在“ Web”视图中可见，而在iOS或Android中不可见。

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;

使用EXPO和Three.js用React Native渲染动画对象

1 个答案: