Following a tutorial on creating a simple app that displays a 3D cube, I encountered an issue with my code:
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
Upon running the app, I encountered this error message:
Unhandled Rejection (TypeError): Cannot set property canvas of #<"WebGL2RenderingContext"> which has only a getter
The line causing the error is:
gl.canvas = {width: gl.drawingBufferWidth, height: gl.drawingBufferHeight}
Can someone provide guidance on resolving this error and launching the app successfully? Your assistance is greatly appreciated.