嘗試制作 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);

示例類