Quite strange. Everything was functioning properly before, and I left it running. However, upon my return, the sphere was no longer being displayed on the webpage.
The issue arose after I added three light objects and GUI sliders to adjust their positions and intensities within GUI folders.
The errors that occurred were: THREE.WebGLRenderer: Error creating WebGL context. Uncaught Error: Error creating WebGL context. Uncaught ReferenceError: Cannot access 'renderer' before initialization.
// Loader
const textureLoader = new TextureLoader()
const normalTexture = textureLoader.load('/textures/Sphere-map.jpg')
// Debug
const gui = new dat.GUI()
// Canvas
const canvas = document.querySelector('canvas.webgl')
// Scene
const scene = new THREE.Scene()
const light = new THREE.AmbientLight(0x7d7d7d); // soft white light
scene.add(light);
// Objects
const sphereGeometry = new THREE.SphereGeometry(.5, 64, 64);
// Materials
const material = new THREE.MeshStandardMaterial()
material.color = new THREE.Color(0xFF4FA7)
material.metalness = 0.3
material.roughness = 0.8
material.normalMap = normalTexture
// Mesh
const sphere = new THREE.Mesh(sphereGeometry, material)
scene.add(sphere)
// Lights
const light1 = gui.addFolder('Light 1')
const light2 = gui.addFolder('Light 2')
const light3 = gui.addFolder('Light 3')
// light 1
const pointLight = new THREE.PointLight(0xFF4FA7, 0.1)
pointLight.position.set(0, 0, 0)
pointLight.intensity = 1
scene.add(pointLight)
light1.add(pointLight.position, 'y').min(-3).max(3).step(0.01)
light1.add(pointLight.position, 'x').min(-6).max(6).step(0.01)
light1.add(pointLight.position, 'z').min(-3).max(3).step(0.01)
light1.add(pointLight, 'intensity').min(0).max(10).step(0.01)
// Light 2
const pointLight2 = new THREE.PointLight(0xffffff, 2)
pointLight2.position.set(0.8, 0.67, 0.8)
pointLight2.intensity = 1
scene.add(pointLight2)
light2.add(pointLight2.position, 'y').min(-3).max(3).step(0.01)
light2.add(pointLight2.position, 'x').min(-6).max(6).step(0.01)
light2.add(pointLight2.position, 'z').min(-3).max(3).step(0.01)
light2.add(pointLight2, 'intensity').min(0).max(10).step(0.01)
// Light 3
const pointLight3 = new THREE.PointLight(0xffffff, 2)
pointLight3.position.set(-1.71, -3, 3)
pointLight3.intensity = 1
scene.add(pointLight3)
light3.add(pointLight3.position, 'y').min(-3).max(3).step(0.01)
light3.add(pointLight3.position, 'x').min(-6).max(6).step(0.01)
light3.add(pointLight3.position, 'z').min(-3).max(3).step(0.01)
light3.add(pointLight3, 'intensity').min(0).max(10).step(0.01)
/**
* Sizes
*/
const sizes = {
width: window.innerWidth,
height: window.innerHeight
}
window.addEventListener('resize', () => {
// Update sizes
sizes.width = window.innerWidth
sizes.height = window.innerHeight
// Update camera
camera.aspect = sizes.width / sizes.height
camera.updateProjectionMatrix()
// Update renderer
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
})
/**
* Camera
*/
// Base camera
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 100)
camera.position.x = 0
camera.position.y = 0
camera.position.z = 2
scene.add(camera)
// Controls
// const controls = new OrbitControls(camera, canvas)
// controls.enableDamping = true
/**
* Renderer
*/
const renderer = new THREE.WebGLRenderer({
canvas: canvas
})
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
/**
* Animate
*/
const clock = new THREE.Clock()
const tick = () => {
const elapsedTime = clock.getElapsedTime()
// Update objects
sphere.rotation.y = .5 * elapsedTime
// Update Orbital Controls
// controls.update()
// Render
renderer.render(scene, camera)
// Call tick again on the next frame
window.requestAnimationFrame(tick)
}
tick()