Anime.js V4 / Three.js / 3D-Model Update

[bsphil]

Hello everyone, I need help again with anime.js / three.js.

In version 3, I can animate (rotate) the 3D model.

In version 4, the code needs to be rewritten, but that doesn’t work for me. Unfortunately, I have almost no knowledge of JS.

Can anyone help me?

Model is loading

Here’s V3, which works.

<!-- 3D-Viewer-Container -->
  <div id="viewer"></div>

  <!-- Three.js (r128) -->
  <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/build/three.min.js"></script>

  <!-- GLTFLoader -->
  <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/loaders/GLTFLoader.js"></script>

  <!-- Anime.js V3 -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.2/anime.min.js"></script>

  <script>
    // Container 
    const container = document.getElementById('viewer');
    const width = container.clientWidth;
    const height = container.clientHeight;

    // Scene, camera, Renderer
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
    camera.position.z = 5.5;

    const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
    renderer.setSize(width, height);
    container.appendChild(renderer.domElement);

    // Light
    const light = new THREE.DirectionalLight(0xffffff, 2);
    light.position.set(3, 3, 3).normalize();
    scene.add(light);

    // GLTF-Loader
    const loader = new THREE.GLTFLoader();
    loader.load('https://modelviewer.dev/shared-assets/models/Astronaut.glb', gltf => {
      const model = gltf.scene;
      model.scale.set(1.5, 1.5, 1.5);
      scene.add(model);

      // Anime.js for rotation
      anime({
        targets: model.rotation,
        x: Math.PI * 2,
        y: Math.PI * 2,
        scale: .75,
        duration: 5000,
        easing: 'easeInOutSine',
        loop: true
      });
    }, undefined, error => {
      console.error('Fehler beim Laden des Modells:', error);
    });

    // Render-Loop
    function animate() {
      requestAnimationFrame(animate);
      renderer.render(scene, camera);
    }
    animate();

    // Responsive auf Fenstergröße
    window.addEventListener('resize', () => {
      const width = container.clientWidth;
      const height = container.clientHeight;
      camera.aspect = width / height;
      camera.updateProjectionMatrix();
      renderer.setSize(width, height);
    });
  </script>

and V4 Version

<!-- 3D-Viewer-Container -->
  <div id="viewer">
    <!-- test anime.js is working -Container -->
    <div class="square"></div>
</div>
  <!-- Three.js (r128) -->
  <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/build/three.min.js"></script>

  <!-- GLTFLoader  -->
  <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/loaders/GLTFLoader.js"></script>

  <!-- Anime.js -->
  <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>

  <script>
    // Container
    const container = document.getElementById('viewer');
    const width = container.clientWidth;
    const height = container.clientHeight;

    // Renderer
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
    camera.position.z = 5.5;

    const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
    renderer.setSize(width, height);
    container.appendChild(renderer.domElement);

    // Light
    const light = new THREE.DirectionalLight(0xffffff, 2);
    light.position.set(3, 3, 3).normalize();
    scene.add(light);

    // GLTF-Loader 
    const loader = new THREE.GLTFLoader();
    loader.load('https://modelviewer.dev/shared-assets/models/Astronaut.glb', gltf => {
      const model = gltf.scene;
      model.scale.set(1.5, 1.5, 1.5);
      scene.add(model);

      // anime.js animation seperate file

    // Render-Loop
    function animate() {
      requestAnimationFrame(animate);
      renderer.render(scene, camera);
    }
    animate();

    // Responsive 
    window.addEventListener('resize', () => {
      const width = container.clientWidth;
      const height = container.clientHeight;
      camera.aspect = width / height;
      camera.updateProjectionMatrix();
      renderer.setSize(width, height);
    });
  </script>

and the anime.js file for animation

document.addEventListener("DOMContentLoaded", () => {
  // pull out the animate function from the global `anime`
  const { animate, utils, onScroll, createTimer, createTimeline, createScope, stagger, svg, waapi, engine, createDraggable, createSpring, eases, global, render } = anime;




const [ container ] = utils.$('.scroll-container');
const debug = true;


 
  
  
animate('.square', {
  x: '15rem',
  rotate: '1turn',
  duration: 2000,
  alternate: true,
  loop: true,
  autoplay: onScroll({ container, debug })
});
  

// this is a test.... canvas is flippig and shringing.. 
//this works, but only 2D
// "astro" was a test,, to name the model

const $demo = document.querySelector('canvas');
const $squares = $demo.querySelectorAll('.astro');

animate($demo, { 
  tan:5,
  scale: .75 ,
  rotateY: '1turn',
  alternate: true,
  loop: true,});

animate($squares, { x: '23rem' });
  
 
  });