Pruebo con cargar un modelo GLTF en three.js, sin embargo me marca error relacionado con la ruta relativa de este mismo. Les muestro mi código, además, tanto el main.js y GLTFLoader.js están alojados en el mismo directorio. Para las herramientas de three.js uso un link cargados dentro de la etiqueta "head" de mi html, para no descargar todo el repositorio de github ni instalar Node.js. Aunque lo he intentado con anterioridad, tengo el mismo problema. Mi proyecto esta organizado de la siguiente manera:
proyecto:
- index.html
- style.css
- js: main.js y GLTFLoader.js
- modelos: modelo.gltf, modelo.bin, texturas: imagenes
Estoy utilizando un servidor local de VSCode para compilar el proyecto
Elemento de lista
import {GLTFLoader} from './GLTFLoader.js'
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
camera.position.set(0, 0, 100);
camera.lookAt(0, 0, 0);
const loader = new GLTFLoader();
loader.load('modelos/korean_fire_extinguisher_01_4k.gltf', function (gltf) {
scene.add(gltf.scene);
}, undefined, function (error) {
console.error(error);
});
renderer.render( scene, camera );
#info{
position: absolute;
top: 10px;
width: 100%;
text-align: center;
z-index: 100;
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Graficacion</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
<link rel="stylesheet" src="style.css">
</head>
<body>
<div id="info">Descripcion</div>
<script type = "module" src="js/main.js"></script>
</body>
</html>