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
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