js, y pasé 2 días intentando seguir los tutoriales para cargar mi propio modelo 3D. EN mi opinión, todo parece que debería ser correcto, pero no obtengo un modelo devuelto en mi navegador.
He comprobado que el modelo es correcto y carga en otros lugares.
import { GLTFLoader } from "./GLTFLoader.js" const dnaContainer = document.querySelector('#dnaContainer') var dnaScene = new THREE.Scene() var camera = new THREE.PerspectiveCamera(75, dnaContainer.clientWidth / dnaContainer.clientHeight, 0.1, 10) camera.position.z = 3 var renderer = new THREE.WebGLRenderer({ antialias: true }) renderer.setClearColor('#0D1033') renderer.setSize(dnaContainer.clientWidth, dnaContainer.clientHeight) dnaContainer.appendChild(renderer.domElement) dnaContainer.addEventListener('resize', () => { renderer.setSize(dnaContainer.clientWidth, dnaContainer.clientHeight) camera.aspect = dnaContainer.clientWidth / dnaContainer.clientHeight }) var dnaLoader = new GLTFLoader() var dna = dnaLoader.load('dna.gltf', function(gltf) { console.log(dnaLoader) dna = gltf.scene dnascene.add(gltf.scene) }) var light = new THREE.HemisphereLight(0xffffff, 5, 10) dnaScene.add(light) var render = function() { requestAnimationFrame(render) renderer.render(dnaScene, camera) } render() * { box-sizing: border-box; } body { padding: 0; margin: 0; height: 100vh; display: flex; } canvas { display: block; height: 100%; width: 100%; } div { background-color: blueviolet; } #dnaContainer { background-color: black; height: 100vh; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> <title>Document</title> </head> <body> <div id="dnaContainer"> </div> <script src="three.js"></script> <script type="module" src="GLTFLoader.js"></script> <script type="module" src="main.js"></script> </body> </html>Lo siento si esto es vago, pero estoy perdido, siento que me falta un poco de información para entender cómo funciona there.js.
Prueba esto
gltfLoader.load("yourModel.gltf", (gltf) => { gltf.scene.scale.set(0.5, 0.5, 0.5); scene.add(gltf.scene); }A veces, el modelo no se muestra debido a la escala. Puede ser demasiado grande o demasiado pequeño.