es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Iluminación de modelos glb en Three JS con sombras mínimas.

27 May, 2023 Programación

No estoy seguro si he formulado bien mi título, pero estoy empezando a familiarizarme con three JS. Ahora mismo tengo un modelo glb simple que me gustaría importar a mi escena, pero no puedo conseguir que la iluminación sea correcta. La imagen de abajo es lo que quiero lograr.

Pero cuando importo mi glb en mi escena y agrego algo de iluminación, se ve así:

El modelo es bastante oscuro y no puedo conseguir que se ilumine idealmente. He intentado agregar luces ambientales desde arriba hacia abajo, luces focales como hijo de la instancia de la cámara, luces hemisféricas, etc., pero no puedo hacer que se vea bien. A continuación se muestra el código de la iluminación actual; estoy tratando de lograr la apariencia usando luces focales por el momento.
var light = new THREE.PointLight( 0xffffff, 10 );
light.position.z = 10
camera.add(light)
var light2 = new THREE.PointLight( 0xffffff, 10 );
light2.position.set(0, -20, 30)
scene.add(light2)
Si alguien pudiera darme alguna idea sobre cuál es la manera correcta de lograr lo que deseo, eso sería genial.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Solución para mejorar la iluminación en Three.js con modelos glTF

    Si tienes problemas con la iluminación al importar modelos glTF en tu proyecto Three.js, hay algunas cosas que puedes hacer para mejorar la iluminación en tu escena.

    Revisa los materiales de tu modelo

    Asegúrate de que los materiales de tu modelo estén configurados correctamente. Algunos materiales en modelos glTF podrían tener colores emisivos, lo que significa que emiten luz por sí solos. Revisa si hay materiales emisivos y ajusta sus valores para hacerlos más brillantes.

    Usa luz ambiental

    Para asegurarte de que tu modelo no esté completamente oscuro, puedes utilizar luz ambiental. Añadir THREE.AmbientLight a tu escena, que proporciona iluminación general a todos los objetos en la escena.

    var ambientLight = new THREE.AmbientLight(0xffffff, 0.3);
scene.add(ambientLight);

    Añade luz direccional

    Si deseas agregar una fuente de luz direccional, que simula el sol, puedes añadir THREE.DirectionalLight a tu escena, que proyecta sombras.

    var directionalLight = new THREE.DirectionalLight(0xffffff, 2);
directionalLight.position.set(0, 1, 1);
scene.add(directionalLight);

    Usa luces puntuales

    Las luces puntuales son fuentes de luz que emiten luz en todas las direcciones. En tu ejemplo, estás utilizando dos objetos THREE.PointLight, pero es posible que debas ajustar sus posiciones e intensidades para obtener el efecto deseado.

    var light = new THREE.PointLight(0xffffff, 10);
light.position.set(0, 10, 0);
scene.add(light);

var light2 = new THREE.PointLight(0xffffff, 10);
light2.position.set(0, -10, 10);
scene.add(light2);

    Experimenta con diferentes fuentes de luz y sus parámetros hasta obtener el efecto de iluminación deseado para tu modelo en Three.js.

Comments are closed.