1

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>

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.