Make sure to keep the animation mixer updated within the animation loop. Give this revised code a try
var scene, renderer;
var camera;
var mesh;
var clickDown;
var model;
var mixer, clock; // global variable declarations
var isMouseDown = false;
function executeFA() {
scene = new THREE.Scene();
clock = new THREE.Clock(); // instantiate clock
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 25;
camera.position.y = 15;
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById('container').appendChild(renderer.domElement);
renderer.setClearColor(0x00ffff, 1);
renderer.gammaOutput = true;
var light = new THREE.DirectionalLight("#c1582d", 1);
var ambient = new THREE.AmbientLight("#85b2cd");
light.position.set(0, -70, 100).normalize();
scene.add(light);
scene.add(ambient);
var texture = new THREE.Texture();
var manager = new THREE.LoadingManager();
manager.onProgress = function(item, loaded, total) {};
var onProgress = function(xhr) {};
var onError = function(xhr) {};
var loader = new THREE.GLTFLoader();
// Load a glTF resource
loader.load(
'./models/vc.glbf',
function(gltf) {
model = gltf;
mesh = gltf.scene;
mesh.scale.set(3, 3, 3);
var animations = gltf.animations;
console.log(gltf.animations);
console.log(gltf.scenes);
var clip = THREE.AnimationClip.findByName(animations, 'Intro');
mixer = new THREE.AnimationMixer(mesh);
console.log(clip)
animations.forEach(animation => {
mixer.clipAction(animation).play();
});
animate();
render();
scene.add(mesh);
},
function(xhr) {
console.log((xhr.loaded / xhr.total * 100) + '% loaded');
},
function(error) {
console.log('An error happened', error);
}
);
document.addEventListener("mousedown", onMouseDown);
document.addEventListener("touchstart", onMouseDown);
document.addEventListener("mouseup", onMouseUp);
document.addEventListener("touchend", onMouseUp);
document.addEventListener("mousemove", onMouseMove);
document.addEventListener("touchmove", onMouseMove);
render();
}
function animate() {
requestAnimationFrame(animate);
}
function render() {
if (model) {
requestAnimationFrame(render);
var delta = clock.getDelta();
mixer.update(delta);
renderer.render(scene, camera);
}
}
function onMouseDown(event) {
isMouseDown = true;
}
function onMouseMove(event) {
if (isMouseDown) {
if (mesh) {
mesh.rotation.y = getMouseX(event) / 50;
mesh.rotation.x = getMouseY(event) / 50;
}
}
}
function onMouseUp(event) {
isMouseDown = false;
}
function getMouseX(event) {
return event.type.indexOf("touch") == -1 ? event.clientX : event.touches[0].clientX;
}
function getMouseY(event) {
return event.type.indexOf("touch") == -1 ? event.clientY : event.touches[0].clientY;
}
window.addEventListener('DOMContentLoaded', executeFA());