Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

230
Vistas
threejs, animejs, no puede "animar en desplazamiento" archivos gltf importados. solo funcionan las primitivas

Estaba experimentando con tres js, animaciones (animejs) y eventos de desplazamiento. aquí hay un codepen que funciona: https://codepen.io/cristigoia/pen/JjPMQMP

En la línea 30 agrego el cubo a la escena:

 function addCube () { cube = new THREE.Mesh( new THREE.BoxGeometry( 50, 50, 50 ), new THREE.MeshNormalMaterial() ); cube.position.y = 5 cube.position.z = -100 scene.add(cube); }

en la línea 37 inicio y configuro la línea de tiempo

 function initTimeline() { timeline = anime.timeline({ autoplay: false, duration: 4500, easing: 'easeOutSine' }); timeline.add({ targets: cube.position, x: 100, y: 25, z: -50, duration: 2250, update: camera.updateProjectionMatrix() }) timeline.add({ targets: cube.position, x: 0, y: 0, z: 50, duration: 2250, update: camera.updateProjectionMatrix() }) var value = new THREE.Color(0xFFFCFC) var initial = new THREE.Color(0x161216) timeline.add({ targets: initial, r: [initial.r, value.r], g: [initial.g, value.g], b: [initial.b, value.b], duration: 4500, update: () => { renderer.setClearColor(initial); } }, 0); }

Ok, esto es perfecto, el único problema es que esto funciona solo con primitivas (caja, cilindro, esfera, lo que sea) Cada vez que intento cargar un GLTF personalizado a través GLTFLoader , la cosa se rompe y realmente no puedo resolverlo incluso si Creo que estoy cerca de depurar el problema.

Estoy tratando de cargar otro modelo como este:

 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'; var loader = new GLTFLoader(); var something; function addSomething() { loader.load("./assets/something.gltf", function(gltf) { something = gltf.scene; scene.add(something); }); }

y todo se ve bien (si me quedo dentro de esta función) pero mientras salgo de la función, no importa lo que haga, ocurren errores... (Probé diferentes cosas y obtuve diferentes errores: de errores como "algo es nulo" , "algo no se declara", a errores como "no se muestra ningún error pero al mismo tiempo no pasa nada")

Si trato de inicializar la línea de tiempo y animar el modelo como lo hice anteriormente con el cubo, nada funciona y estoy atascado aquí. Intenté cosas diferentes para resolver esto, pero ahora tengo que "rendirme" y pedir ayuda, pero estoy bastante seguro de que es una tarea fácil de solucionar y ahora mismo estoy sin cerebro.

Si me pudierais indicar como se soluciona esto os lo agradeceria mucho. Gracias

about 4 years ago · Santiago Trujillo
1 Respuestas
Responde la pregunta

0

Lo resolví usando esto:

 const gltf = await loader.loadAsync("./assets/mymodel.gltf")

y entonces

 var mymodel = gltf.scene scene.add(mymodel)

al hacerlo, puedo llamar a "mymodel" en la línea de tiempo

about 4 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda