Estoy intentando renderizar un modelo GLTF con three.js pero no he podido hacerlo. Si alguien pudiera identificar cuál es el error en mi código, me alegraría.
import {GLTFLoader} from "./GLTFLoader.js"; var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, .01, 1000 ); var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth,window.innerHeight); document.body.appendChild(renderer.domElement); var loader = new THREE.GLTFLoader(); loader.load("scene.gltf",function(gltf){ var obj; scene.add(gltf.scene); }); var light = new THREE.HemisphereLight(0xFFFFFF, 0x000000, 2); scene.add(light); camera.position.set(0,0,100); function animate(){ requestAnimationFrame(animate); renderer.render(scene,camera); } animate();Primero puede descargar el archivo gltf del modelo 3d gratuito de sketchfab y luego convertirlo a formato glb usando este sitio web . Luego comprima el archivo con:
npx gltf-pipeline -i scene.glb -o model.glb --draco.compressionLevel=10
Mediante el uso:
npx gltfjsx model.glb
Obtendrá un archivo js. Simplemente copie la función del modelo y * ¡boom! * tu trabajo estará hecho. Para ver un ejemplo, puede consultar la visita de demostración .
Primero verifique la consola de su navegador (acceso directo generalmente ctrl + shift + i), si hay un error allí, la ruta podría ser incorrecta, también podría console.log(gltf) para ver si el objeto realmente cargó en su función "onload" , si registra undefined , probablemente haya un error.
También podría ser que su modelo sea demasiado grande y no se renderice (está fuera del área de renderizado de su cámara) o es su cámara la que está dentro y todas las caras de los objetos están apuntando hacia afuera (las caras internas se eliminan por defecto en algunos materiales, es llamado sacrificio de cara posterior). Para probar esto en su malla, puede agregar dentro de su función "onload":
gltf.scene.traverse(obj => { if (obj.type === "Mesh") { obj.doubleSided = true; // or maybe // obj.material.side = THREE.DoubleSide; } })Esto iterará a través de todos los objetos dentro de su archivo gltf, verificará cuáles son mallas y los marcará como de doble cara, por lo que las caras internas y externas se renderizarán y las caras posteriores no se eliminarán.
También verifique si reducir la escala de su objeto a algo como 0.1 o 0.01 lo hace visible.