如何通过Three.js直接在A-Frame场景加载GLTF模型并控制其动画

Great question! Since A-Frame is built directly on top of Three.js, we can totally bypass A-Frame's built-in GLTF tags and use Three.js's native tools to load animated models, then hook into A-Frame's lifecycle to control the animations. Let's walk through this step by step.

First, create a basic A-Frame scene with an empty entity where we'll attach our loaded model. This entity acts as a bridge between Three.js and A-Frame's entity system:

<a-scene>
  <!-- Empty entity to hold our Three.js-loaded GLTF model -->
  <a-entity id="model-container" position="0 1.5 -3"></a-entity>
</a-scene>

A-Frame wraps Three.js objects under the hood. To get what we need:

• The A-Frame scene maps to a Three.js Scene object, accessible via document.querySelector('a-scene').object3D
• Our empty entity maps to a Three.js Group, accessible via document.querySelector('#model-container').object3D

A-Frame includes Three.js by default, so no extra scripts are needed. We'll use THREE.GLTFLoader to load our animated model, then attach it to our A-Frame entity:

// Get references to our A-Frame elements
const sceneEl = document.querySelector('a-scene');
const modelContainer = document.querySelector('#model-container').object3D;

// Initialize the GLTF Loader
const loader = new THREE.GLTFLoader();

// Load your animated GLTF model
loader.load(
  'path/to/your/animated-model.gltf',
  function (gltf) {
    // The loaded model's scene is a Three.js Scene object
    const model = gltf.scene;
    
    // Optional: Adjust model scale/position if needed
    model.scale.set(2, 2, 2);
    
    // Attach the model to our A-Frame entity's Three.js Group
    modelContainer.add(model);
    
    // Store animations and mixer for later control
    sceneEl.userData.animations = gltf.animations;
    sceneEl.userData.mixer = new THREE.AnimationMixer(model);
    
    // Auto-play the first animation (optional)
    if (gltf.animations.length > 0) {
      const action = sceneEl.userData.mixer.clipAction(gltf.animations[0]);
      action.play();
    }
  },
  function (xhr) {
    // Progress callback (optional)
    console.log((xhr.loaded / xhr.total * 100) + '% loaded');
  },
  function (error) {
    // Error callback
    console.error('Error loading model:', error);
  }
);

A-Frame has a tick event that fires every frame—perfect for keeping our animation running smoothly. Add this listener to your scene:

sceneEl.addEventListener('tick', function (event) {
  const delta = event.delta / 1000; // Convert ms to seconds
  if (sceneEl.userData.mixer) {
    sceneEl.userData.mixer.update(delta);
  }
});

Now you can create functions to play, pause, or switch animations whenever you need. For example:

// Function to play a specific animation by name
function playAnimation(animationName) {
  const mixer = sceneEl.userData.mixer;
  const animations = sceneEl.userData.animations;
  
  if (!mixer || !animations.length) return;
  
  // Find the animation clip by name
  const clip = THREE.AnimationClip.findByName(animations, animationName);
  if (clip) {
    // Stop any existing actions
    mixer.stopAllAction();
    // Play the new animation with loop behavior
    const action = mixer.clipAction(clip);
    action.setLoop(THREE.LoopRepeat, Infinity);
    action.play();
  }
}

// Example: Call this to switch to an animation named "wave"
// playAnimation('wave');

• Ensure your GLTF file includes embedded animations (or references external animation files correctly) so the loader can detect them.
• Using gltf.scene attaches all model meshes at once—you only need to traverse the scene if you want to modify individual meshes.
• Storing the mixer and animations in the scene's userData is a clean way to keep track of them across your code.

内容的提问来源于stack exchange，提问作者Alex