Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

122
Views
Three.js- My shadows does not show up correctly. aka. lots of black lines everywhere

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.


image of thousands of lines



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.

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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.

  1. Set material type is too basic (try MeshStandard, MeshPhong...)
  2. Geometry overlaps too closely (try bias, mapSize...)
  3. Tile material is offset, rotated, or repeats (try ClampToEdge, repeat=1...)
  4. Face material is backSide or transparent
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!