Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

120
Vistas
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 Respuestas
Responde la pregunta

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 Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda