Just starting out with Three.js and I'm trying to figure out how to make my GLTF model cast a shadow on itself. I've been experimenting with different approaches, but not sure if I'm on the right track. The light is set as a PointLight and the camera is a Perspective view - not sure if that detail matters. Can someone review my code below and provide any guidance? Much appreciated :)
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(
60,
window.innerWidth / window.innerHeight,
0.01,
1000
);
//camera.rotation.x=-20*Math.PI/180;
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
document.body.appendChild(renderer.domElement);
window.addEventListener('resize', () => {
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth/ window.innerHeight;
camera.updateProjectMatrix();
});
function mousemovement(event) {
const mouseX = (event.clientX / window.innerWidth) * 2 - 1;
const mouseY = -(event.clientY / window.innerHeight) * 2 + 1;
light.position.x = mouseX * 11 + 2 ;
light.position.y = mouseY * 4 + 4.5 ;
};
var numberofclicks = 2;
window.addEventListener('mousemove', mousemovement);
window.addEventListener('click', e =>{
numberofclicks = numberofclicks + 1;
if(numberofclicks % 2 == 0) {
window.addEventListener('mousemove', mousemovement);
}
else {
window.removeEventListener('mousemove', mousemovement);
}
});
//GLTF model
var loader = new GLTFLoader();
loader.load("wrktblv2.gltf", function (gltf) {
loader.castShadow = true;
loader.receiveShadow = true;
scene.add(gltf.scene);
});
var light = new THREE.PointLight(0xffffff, 2, 20);
light.position.set(1,10,2)
scene.add(light);
camera.position.set(2,3,9);
//const lightHelper = new THREE.PointLightHelper(light);
//const gridHelper = new THREE.GridHelper(200,50);
//scene.add(lightHelper, gridHelper);
function animate(){
requestAnimationFrame(animate);
renderer.render(scene,camera);
}
animate();
Appreciate your help! Cheers!
Edit--Managed to add shadows, but ran into another issue.