javascript - 在 react-native-gl-model-view 中使用多个 3d 对象时应用程序崩溃

Question

我想在一个屏幕上同时使用react-native-gl-model-view中的 2 个“3d 对象模型”。当我使用单个 3d 对象时，它工作正常，但一旦我使用两个或两个以上，每个 3d 对象模型开始闪烁，几秒钟后应用程序崩溃。

这是它如何处理多个 3d 对象

这是代码：

import React, {Component} from 'react';
import {StyleSheet, View, Animated} from 'react-native';

import ModelView from 'react-native-gl-model-view';
const AnimatedModelView = Animated.createAnimatedComponent(ModelView);

export default class Multiple extends Component {
  constructor() {
    super();
    this.state = {
      rotateZ: new Animated.Value(0),
    };
  }

  componentDidMount() {
    this.animate(0);
  }

  animate(iteration) {
    Animated.timing(this.state.rotateZ, {
      toValue: ++iteration * 360,
      useNativeDriver: true,
      duration: 5000,
    }).start(this.animate.bind(this, iteration++));
  }

  renderModel() {
    return (
      <AnimatedModelView
        model={{
          uri: 'demon.obj',
        }}
        texture={{
          uri: 'demon.png',
        }}
        tint={{r: 1.0, g: 1.0, b: 1.0, a: 1.0}}
        animate
        scale={0.01}
        translateZ={-2.5}
        rotateX={270}
        rotateZ={Animated.add(this.state.rotateZ, Math.random() * 360)}
        style={styles.model}
      />
    );
  }

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.row}>
          {this.renderModel()}
          {this.renderModel()}
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  row: {
    flex: 1,
    flexDirection: 'row',
  },
  model: {
    flex: 1,
    backgroundColor: 'transparent',
  },
});

注意 1：要在 Android 上加载模型，您需要将模型放在android/app/src/main/assets文件夹中。如果它还不存在，则创建一个新文件夹。

上述代码中使用的资产/模型。

如果您想尝试以下代码：

1. npm install react-native-gl-model-view --save
2. 在注释 1 所示的位置添加资产。
3. 创建一个文件 Muliple.js 并粘贴上面的代码
4. npm run android

抱歉，我想向您展示 expo snap 中的代码，但它不起作用并显示以下错误：

requireNativeComponent: "RNGLModelView" was not found in the UIManager.

标签： javascriptandroidreactjsreact-native3d-model

Answer 1

有时包没有链接到项目或需要重建。如果您确定已完成添加该 的所有步骤，请再次将包链接到项目：

react-native link react-native-gl-model-view

如果这不起作用，如果您有 android studio ，请在您的模拟器上重新安装该项目。