尝试制作 3d 立方体时使用 Three.js 的 React Native 中的 TypeError

Question

我正在按照本教程制作一个显示 3d 立方体的简单应用程序。 这是我的代码：

import React from 'react'
import {View} from 'react-native'
import Expo from 'expo'
import {Scene, Mesh, MeshBasicMaterial, PerspectiveCamera, BufferGeometry} from 'three'
import ExpoTHREE, {Renderer} from 'expo-three' 
import { ExpoWebGLRenderingContext, GLView } from 'expo-gl'

const App = () => {

const onContextCreate = async (gl) => {
// all THREE.js code
const scene = new Scene()
const camera = new PerspectiveCamera(75,
  gl.drawingBufferWidth/gl.drawingBufferHeight,
  0.1,
  1000)

gl.canvas = {width: gl.drawingBufferWidth, height: gl.drawingBufferHeight}

const renderer = new Renderer({gl})
renderer.setSize(gl.drawingBufferWidth, gl.drawingBufferHeight)

const geometry = new BoxBufferGeometry(1, 1, 1)
const material = new MeshBasicMaterial({color: 'blue'})
const cube = new Mesh(geometry, material)
scene.add(cube)


const render = () => {
    requestAnimationFrame(render)
    renderer.render(scene, camera)
    gl.endFrameEXP()
}

render()
}

return (
<View>
  <GLView style={{flex: 1}}
  onContextCreate = {onContextCreate} />
</View>
)
}

export default App

似乎此时应用程序应该显示一个多维数据集，但我什么也没看到并收到错误消息：

未处理的拒绝（TypeError）：无法设置只有一个 getter 的 #<"WebGL2RenderingContext"> 的属性画布

这是引起错误的行：

gl.canvas = {width: gl.drawingBufferWidth, height: gl.drawingBufferHeight}

你能帮我正确启动我的应用程序并摆脱这个错误吗？ 提前致谢。

Answer 1

很难说本教程的作者用那句话表达了什么意思。 您可以尝试删除它，因为它无论如何都不起作用。

您也可以遵循官方文档，以这种方式获得工作示例可能更容易。

GLView 文档

世博会-三个文档

expo-three docs 提到了这段代码，我想知道本教程是否打算这样做：

        const { drawingBufferWidth: width, drawingBufferHeight: height } = gl;

        // Create a WebGLRenderer without a DOM element
        const renderer = new Renderer({ gl });
        renderer.setSize(width, height);

示例类