I've been trying to generate terrain using noise functions, but I'm running into an issue where the BufferGeometry mesh isn't receiving any light from PointLight. When I switch to AmbientLight, the BufferGeometry is visible, but not with PointLight alone. Interestingly, the CubeGeometry next to it seems to work fine with both types of light. Additionally, I'm looking to have the terrain receive shadows as well. Is there a specific method I need to call on the mesh? What am I overlooking here?
https://jsfiddle.net/cbo8fx1s/
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script src="https://threejs.org/build/three.js"></script>
<script>
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 30;
const renderer = new THREE.WebGLRenderer({antialias: true});
// scene.add(new THREE.AmbientLight(0xffffff));
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
window.addEventListener('load', () => {
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
createScene();
});
function createScene() {
(() => {
const geometry = new THREE.BufferGeometry();
// create a simple square shape. We duplicate the top left and bottom right
// vertices because each vertex needs to appear once per triangle.
const vertices = new Float32Array([
-1.0, -1.0, 1.0,
1.0, -1.0, 1.0,
1.0, 1.0, 1.0,
1.0, 1.0, 1.0,
-1.0, 1.0, 1.0,
-1.0, -1.0, 1.0
]);
// itemSize = 3 because there are 3 values (components) per vertex
geometry.addAttribute('position', new THREE.BufferAttribute(vertices, 3));
const material = new THREE.MeshStandardMaterial({color: 0xffffff});
const mesh = new THREE.Mesh(geometry, material);
mesh.receiveShadow = false;
scene.add(mesh);
})();
(() => {
const geometry = new THREE.CubeGeometry(10, 8, 3);
const material = new THREE.MeshStandardMaterial({color: 0xffffff});
const mesh = new THREE.Mesh(geometry, material);
mesh.castShadow = true;
mesh.receiveShadow = false;
mesh.position.y = 10;
scene.add(mesh);
})();
(() => {
const light = new THREE.PointLight(0x00ff00);
light.position.z = 500;
light.position.y = 500;
scene.add(light);
const light2 = new THREE.PointLight(0xff0000);
light2.position.z = 500;
light2.position.x = 500;
scene.add(light2);
})();
}
</script>
<style>
body {
background: #000;
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
</body>
</html>