Блог

у меня возникли проблемы с анимацией моей второй модели (alex_circle.glb). Первая модель (roomChanged.glb) анимируется просто отлично, и я замечаю, что модель circle анимируется при загрузке, но затем останавливается, и анимацию берет на себя roommodel. У меня возникли проблемы с поиском решений моей проблемы в Интернете, и я хотел узнать, есть ли у кого-нибудь здесь решение.

Мы будем очень признательны за любую помощь.

Ссылка на код и модели: https://drive.google.com/file/d/1NTXeyNlAwtotYDo3bkBIqAebCovuwSc1/view?usp=sharing

 import "./style.css";
import * as THREE from "three";
import oc from "three-orbit-controls";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";

let camera, scene, renderer, mixer;
var clock = new THREE.Clock();
init();
animate();
function init() {
  //camera
  camera = new THREE.PerspectiveCamera(
    5,
    window.innerWidth / window.innerHeight,
    1,
    10000
  );
  camera.position.set(80, 55, 80);

  //scene
  scene = new THREE.Scene();
  scene.background = new THREE.Color(0x87ceeb);

  //clickbox for laptop

  var geometry1 = new THREE.SphereGeometry(0.22);
  var material1 = new THREE.MeshLambertMaterial({
    transparent: true,
    opacity: 0.5,
  });
  var sphere1 = new THREE.Mesh(geometry1, material1);
  sphere1.position.set(-0.6, 0.8, -1.25);

  //click box for arm

  var geometry2 = new THREE.SphereGeometry(0.25);
  var material2 = new THREE.MeshLambertMaterial({
    transparent: true,
    opacity: 0.5,
  });
  var sphere2 = new THREE.Mesh(geometry2, material2);
  sphere2.position.set(-1.05, 0.85, -1.25);

  //loader

  let loader = new GLTFLoader();
  loader.load("roomchanged.glb", function (gltf) {
    const model = gltf.scene;
    mixer = new THREE.AnimationMixer(model);
    console.log(gltf.animations);
    mixer.clipAction(gltf.animations[0]).play();
    scene.add(model, sphere1, sphere2);
  });

  loader.load("alex_circle.glb", function (gltf) {
    const model2 = gltf.scene;
    mixer = new THREE.AnimationMixer(model2);
    console.log(gltf.animations);
    mixer.clipAction(gltf.animations[0]).play();
    scene.add(model2);
  });

  //lights
  const hlight = new THREE.AmbientLight(0x404040, 1); // soft white light
  scene.add(hlight);
  const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
  directionalLight.position.set(0, 1, 0);

  scene.add(directionalLight);
  const light = new THREE.PointLight(0xc4c4c4, 1);
  light.position.set(0, 300, 500);
  scene.add(light);
  //empty right wall to bookshelf wall
  const light2 = new THREE.PointLight(0xc4c4c4, 1);
  light2.position.set(500, 100, 0);
  scene.add(light2);
  //empty left wall to desk wall
  const light4 = new THREE.PointLight(0xc4c4c4, 2);
  light4.position.set(-500, 300, 500);
  scene.add(light4);

  //renderer
  renderer = new THREE.WebGLRenderer({ antialias: true });
  const OrbitControls = oc(THREE);
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  //dynamic resize
  window.addEventListener("resize", onWindowResize, false);

  //orbit controls
  const controls = new OrbitControls(camera, renderer.domElement);

  //zoom controls
  controls.maxDistance = 100;
  controls.minDistance = 70;

  //horiztonal limits
  controls.minAzimuthAngle = 0;
  controls.maxAzimuthAngle = 1.56;

  //veritcal limits
  controls.minPolarAngle = Math.PI / 8;
  controls.maxPolarAngle = Math.PI / 2;
  controls.enablePan = false;
  controls.update();

  var rightmousemove;

  document.addEventListener("mousemove", function (event) {
    if (rightmousemove === true) {
      // Use stopImmediatePropagation to stop the other handeller from trigerring
      event.stopImmediatePropagation();
    }
  });

  render();
}

function onWindowResize() {
  var width = window.innerWidth;
  var height = window.innerHeight;
  renderer.setSize(width, height);
  camera.aspect = width / height;
  camera.updateProjectionMatrix();
}

function animate() {
  requestAnimationFrame(animate);
  if (mixer) mixer.update(clock.getDelta());
  // required if controls.enableDamping or controls.autoRotate are set to true
  render();
}

function render() {
  renderer.render(scene, camera);
}