如何在 Expo 中使用 GLView 渲染 3D 对象？答案

【问题标题】：How to render a 3D object using GLView in Expo?如何在 Expo 中使用 GLView 渲染 3D 对象？
【发布时间】：2021-05-23 22:20:59
【问题描述】：

我在 Expo 的官方网站上尝试过这个例子，但它没有显示 3D 对象。只有两个完全不动的方格

https://docs.expo.io/versions/latest/sdk/gl-view/

import React from 'react';
import { View } from 'react-native';
import { GLView } from 'expo-gl';

export default function App() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <GLView style={{ width: 300, height: 300 }} onContextCreate={onContextCreate} />
    </View>
  );
}

function onContextCreate(gl) {
  gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
  gl.clearColor(0, 1, 1, 1);

  // Create vertex shader (shape & position)
  const vert = gl.createShader(gl.VERTEX_SHADER);
  gl.shaderSource(
    vert,
    `
    void main(void) {
      gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
      gl_PointSize = 150.0;
    }
  `
  );
  gl.compileShader(vert);

  // Create fragment shader (color)
  const frag = gl.createShader(gl.FRAGMENT_SHADER);
  gl.shaderSource(
    frag,
    `
    void main(void) {
      gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
    }
  `
  );
  gl.compileShader(frag);

  // Link together into a program
  const program = gl.createProgram();
  gl.attachShader(program, vert);
  gl.attachShader(program, frag);
  gl.linkProgram(program);
  gl.useProgram(program);

  gl.clear(gl.COLOR_BUFFER_BIT);
  gl.drawArrays(gl.POINTS, 0, 1);

  gl.flush();
  gl.endFrameEXP();
}

我希望能够使用 Expo 显示 3D 对象（可能是盘子/食物）。

【问题讨论】：

标签： react-native 3d expo

【解决方案1】：

这是一个 3d 立方体在屏幕上移动和旋转的示例https://github.com/expo/expo/blob/master/apps/native-component-list/src/screens/GL/GLSnapshotsScreen.tsx 该目录中还有几个示例。

expo-gl 是 WebGL 标准的实现，所以如果您正在寻找如何做某事的信息，我建议您在 Google 上搜索如何在 WebGL 中执行该操作。任何特定于expo-gl 你需要知道的是 onContextCreate 和创建 GLView，在你有 gl 对象之后，这就是纯 WebGL。

【讨论】：