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

Question

我正在按照 this 教程制作一个显示 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"> 的属性 canvas =14=]

这是出现错误的行：

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

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

Answer 1

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

你也可以按照官方文档，这样可能更容易得到一个工作示例。

GLView docs

expo-three docs

expo-three 文档提到了这段代码，我想知道教程是不是要这样做：

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

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

example class

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

TypeError in React Native using Three.js while trying to make a 3d cube

javascript

three.js

react-native