Блог

 import * as THREE from "three" import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js' import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js" import * as dat from "dat.gui" import './style.css'  // Load 3D Scene const scene = new THREE.Scene();  // GUI const gui = new dat.GUI();  // Clock const clock = new THREE.Clock();  // Load Camera Perspective const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 20000 ); camera.position.set( 20, 10, 20 );   // Load a Renderer const renderer = new THREE.WebGLRenderer({ alpha: false }); renderer.setClearColor( 0xC5C5C3 ); renderer.setPixelRatio( window.devicePixelRatio ); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement);  // Orbit Controls var controls = new OrbitControls( camera, renderer.domElement );  // Load Light const ambientLight = new THREE.AmbientLight( 0xcccccc ); scene.add( ambientLight );   const directionalLight = new THREE.DirectionalLight( 0xffffff ); directionalLight.position.set( 18.27, 1.46, 12.912 ).normalize(); scene.add( directionalLight );   // glTf Loader const loader = new GLTFLoader(); loader.load( './matrix.gltf', ( gltf ) =gt; {   const object = gltf.scene;   object.scale.set( 2, 2, 2 );   object.position.x = -20;   object.position.y = -10;   object.position.z = -2;    const mixer = new THREE.AnimationMixer(object);  const clips = object.animations;  console.log(clips) // lt;---- (Animations array is empty)   gui.add(object.rotation, 'x').min(0).max(9)  gui.add(object.rotation, 'y').min(0).max(9)  gui.add(object.rotation, 'z').min(0).max(9)    scene.add( object ); });   function animate() {  requestAnimationFrame( animate );  render(); }  function render() {  renderer.render( scene, camera ); }  render(); animate();