Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

228
Views
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 answers
Answer question

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 Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!