Threejs SkinnedMesh desync

by manthrax

HTML

<!DOCTYPE html>
<html lang="en">
	<head>
		<title></title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<style>

			html, body {
				height: 100%;
			}
			body {
				background-color: #black;
				color: #000;
			}

			a {
				color: #2983ff;
			}
		</style>
	</head>
	<body>
		<div id='container'></div>
		<script type="importmap">
		  {
			"imports": {
			  "three": "https://cdn.jsdelivr.net/npm/three@0.168.0/build/three.module.js",
			  "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.168.0/examples/jsm/"
			}
		  }
		</script>
		<script type="module">
			import * as THREE from 'three';

			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
			import * as SkeletonUtils from 'three/addons/utils/SkeletonUtils.js';
			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
			import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';
			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
			
			const conf = {moving:false};
			const gui = new GUI();
			gui.add( conf, 'moving' ).name('moving');
			gui.open();

			const clock = new THREE.Clock();
			const container = document.getElementById( 'container' );
			const width = container.offsetWidth, height = container.offsetHeight;
			const renderer = new THREE.WebGLRenderer({
				antialias: false,
				powerPreference: "high-performance",
			});
let mixer = new THREE.AnimationMixer()
			const pixelRatio = Math.min(1.5, window.devicePixelRatio);
			renderer.setPixelRatio(pixelRatio);
			renderer.setSize(width, height);
			document.body.appendChild( renderer.domElement );

			const pmremGenerator = new THREE.PMREMGenerator( renderer );
				let skeletonHelper;

			const scene = new THREE.Scene();
			scene.background = new THREE.Color( 0x000 );
			scene.environment = pmremGenerator.fromScene( new RoomEnvironment(), 0.04 ).texture;
				
			const camera = new...