While exploring a WebGL project, I noticed that other demos have lighting effects present. However, my local code for MeshPhongMaterial on cube 5173 is not displaying the same level of light on all sides. Despite testing various types of lighting options such as pointlight and ambientlight, I cannot seem to identify the root cause of this issue. Upon reviewing the code from other demos, I observed that they use 'let' instead of 'const', although I don't believe this distinction is causing the problem. The perplexing part is why the rotating cube remains black and devoid of any lighting effects.
import './style.css'
import * as THREE from 'three';
import WebGL from 'three/addons/capabilities/WebGL.js';
// Setting up Three.js components
const scene = new THREE.Scene();
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xeeeeee, 1.0)
renderer.shadowMap.enabled = true
document.body.appendChild(renderer.domElement);
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 100);
camera.position.set(10, 10, 10);
camera.lookAt(scene.position);
// Adding lights
const ambientLight = new THREE.AmbientLight(0x404040, 1, 1000)
ambientLight.position.set(10, 10, -10)
scene.add(ambientLight)
const pointLight = new THREE.PointLight(0xffffff, 1,1000)
pointLight.position.set(5, 5, 5)
scene.add(pointLight)
// Creating the cube with material
const geometry = new THREE.BoxGeometry(1, 1, 1)
const material = new THREE.MeshPhongMaterial({
color: 0x0000ff
})
const cube = new THREE.Mesh(geometry, material)
cube.position.set(0, 1 , 0)
scene.add(cube)
// Adding wireframeCube
const wireframeCube = new THREE.Mesh(
new THREE.BoxGeometry(2, 2, 2),
new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true })
);
scene.add(wireframeCube);
function animate() {
cube.rotation.x += 0.01
cube.rotation.y += 0.01
}
function render() {
animate()
requestAnimationFrame(render)
renderer.render(scene, camera)
}
// Displaying the scene
renderer.render(scene, camera);
window.addEventListener('resize', function() {
camera.aspect = window.innerWidth / window.innerHeight
camera.updateProjectionMatrix()
renderer.setSize(window.innerWidth, window.innerHeight)
})
if ( WebGL.isWebGL2Available() ) {
// Perform initializations if WebGL2 is supported
render()
} else {
const warning = WebGL.getWebGL2ErrorMessage();
document.getElementById( 'container' ).appendChild( warning );
console.log('Not Support webgl');
}
[![a cube with no light][1]][1] [1]: https://i.sstatic.net/65p8brtB.png