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.

No puedo lograr que Three.js renderice una escena desde un archivo OBJ importado.

31 Jul, 2023 Programación

No puedo hacer que mi escena Three.js se muestre en el lienzo HTML. Estoy importando un archivo OBJ que se está importando correctamente. Muestra todos los detalles, como Mallas, materiales, etc. correctamente. Aquí está mi código:

export function TestScene() {
    const mountRef = useRef(null);
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    const renderer = new THREE.WebGLRenderer();
    const loader = new THREE.OBJLoader();
    renderer.setSize(window.innerWidth, window.innerHeight);

    useEffect(() => {

        mountRef.current.appendChild(renderer.domElement);

        const animate = function () {
            requestAnimationFrame(animate);
            renderer.render(scene, camera);
        };

        loader.load(
            'object.obj',
            function (object) {
              scene.add(object);
              camera.position.z = 100;
            },
            function (xhr) {
              console.log((xhr.loaded / xhr.total * 100) + '% loaded');
            },
            function (error) {
              console.log(error);
            }
        );

        animate()
    }, [])

    return <>
        <h1 id='test' style="{{" color:="" 'black'="" }}="">blahhh</h1>
        <div ref="{mountRef}"></div>

}
Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Parece que estás importando correctamente el archivo OBJ y agregándolo a la escena, pero es posible que no estés inicializando correctamente el renderizador para mostrar la escena en el elemento de lienzo.

    Asegúrate de crear un elemento de lienzo en tu documento HTML y hacer referencia a él en tu código con mountRef. También necesitas establecer la propiedad domElement del renderizador en el elemento de lienzo, de la siguiente manera:

    const canvas = mountRef.current;
renderer.setSize(canvas.clientWidth, canvas.clientHeight);
canvas.appendChild(renderer.domElement);

    Esto establecerá correctamente el tamaño del renderizador para que coincida con el tamaño del elemento de lienzo y agregará la salida del renderizador como hijo del lienzo.

    También puede que necesites agregar algún código de inicialización adicional para el renderizador, como establecer el color de fondo y actualizar la relación de aspecto al cambiar el tamaño de la ventana.

    renderer.setClearColor(0xffffff, 1);
window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
});

    Asegúrate de agregar este código antes de llamar a renderer.render(scene, camera) en tu función animate.

    ¡Espero que estas sugerencias te ayuden a mostrar tu escena de Three.js en el lienzo!

Comments are closed.