I'm new to Three.js, with some of your guy's help I added shadows to my three.js model however when the light hits it creates thousands of lines. Idk if it's because of how bad I made the model. or I have to just change the light. The image is below.
And The code
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.getElementById('section1').appendChild(renderer.domElement);
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
window.addEventListener('scroll', ()=> {
camera.position.y = 3.5 +(window.scrollY/400);
})
function mousemovement(event) {
const mouseX = (event.clientX / window.innerWidth) * 2 - 1;
const mouseY = -(event.clientY / window.innerHeight) * 2 + 1;
light.position.x = mouseX * 7 + 1 ;
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 moldal
var loader = new GLTFLoader();
loader.load("wrktblv2.gltf", function (gltf) {
gltf.scene.traverse(function(child) {
if (child.isMesh) {
child.castShadow = true;
child.receiveShadow = true;
}
})
scene.add(gltf.scene);
});
var light = new THREE.PointLight(0xffffff, 2, 20);
light.castShadow = false;
light.position.set(1,10,2);
scene.add(light);
camera.position.set(1,3.5,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();
I tried changing the light strength and stuff but could not figure it out.
Please help.
It is probably the imported mapping. Your geometry/maps have strange edges. For example, both the table top and leg are discolored at the brightest 2/7 of the lengths. Also, the floor changes texture/moire at a 45-degree angle from the rug.