播放 GLTF 动画？三.js

Question

嗨，过去一周左右我一直在搞乱three.js，我对lib完全陌生，所以对于我可能说或问的任何愚蠢的事情，我深表歉意。 我的代码没有引发错误，但确实有 1 个警告：

  three.module.js:18314 THREE.WebGLProgram: gl.getProgramInfoLog() C:\fakepath(193,23-137): warning X3571: pow(f, e) will not work for negative f, use abs(f) or conditionally handle negative values

我不确定这是否重要，但无论如何！模型显示一切正常，但问题是它不播放任何动画我做错了什么？这是代码：

import * as THREE from './js/three.module.js';

import {
    RGBELoader
} from './js/RGBELoader.js';
import {
    OrbitControls
} from './js/OrbitControls.js';
import {
    GLTFLoader
} from './js/GLTFLoader.js';
import {
    RoughnessMipmapper
} from './js/RoughnessMipmapper.js';


var container, controls;
var camera, scene, renderergl, model, mixer, clock;

init();
animate();

function init() {

    container = document.createElement('div');
    container.className = "experience-div";
    $('body').prepend(container);


    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.set(0, 0.6, 5.7);


    scene = new THREE.Scene();
    clock = new THREE.Clock();

    new RGBELoader()

        .load('royal_esplanade_1k.hdr', function(texture) {


            var envMap = pmremGenerator.fromEquirectangular(texture).texture;


            scene.environment = envMap;

            texture.dispose();
            pmremGenerator.dispose();

            render();


            var roughnessMipmapper = new RoughnessMipmapper(renderergl);
            let mixer;
            const loader = new GLTFLoader();
            loader.load('untitled.gltf', function(gltf) {
                const model = gltf.scene;
                scene.add(model);
                mixer = new THREE.AnimationMixer(model);
                gltf.animations.forEach((clip) => {
                    mixer.clipAction(clip).play();
                });
                gltf.scene.traverse(function(child) {

                    if (child.isMesh) {

                        roughnessMipmapper.generateMipmaps(child.material);

                    }

                });



                roughnessMipmapper.dispose();



            });


        });

    renderergl = new THREE.WebGLRenderer({
        antialias: true
    });
    renderergl.setPixelRatio(window.devicePixelRatio);
    renderergl.setSize(window.innerWidth, window.innerHeight);
    renderergl.toneMapping = THREE.ACESFilmicToneMapping;
    renderergl.toneMappingExposure = 0.8;
    renderergl.outputEncoding = THREE.sRGBEncoding;
    container.appendChild(renderergl.domElement);
    $('.experience-div canvas').attr('id', 'canvas');

    var pmremGenerator = new THREE.PMREMGenerator(renderergl);
    pmremGenerator.compileEquirectangularShader();

    controls = new OrbitControls(camera, renderergl.domElement);


    controls.enableKeys = false;
    controls.enableZoom = false;
    controls.enableDamping = true;
    controls.maxPolarAngle = 2.2;
    controls.minPolarAngle = 1.1;
    controls.dampingFactor = 0.1;
    controls.rotateSpeed = 0.2;
    controls.minDistance = 2;
    controls.maxDistance = 500;
    controls.update();


    window.addEventListener('resize', onWindowResize, false);

}

function onWindowResize() {

    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderergl.setSize(window.innerWidth, window.innerHeight);

    render();

}



function animate() {
    controls.update();
    requestAnimationFrame(animate);
    var delta = clock.getDelta();
    if (mixer) mixer.update(delta);
    render();

}


function render() {

    renderergl.render(scene, camera);

}

感谢您的帮助 你可以从这里得到我正在使用的模型： https://ui-unicorn.co.uk/model-key.zip

Answer 1

改用这段代码试试：

<script type="module">
import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.114/build/three.module.js';

import { OrbitControls } from 'https://cdn.jsdelivr.net/npm/three@0.114/examples/jsm/controls/OrbitControls.js';
import { GLTFLoader } from 'https://cdn.jsdelivr.net/npm/three@0.114/examples/jsm/loaders/GLTFLoader.js';
import { RGBELoader } from 'https://cdn.jsdelivr.net/npm/three@0.114/examples/jsm/loaders/RGBELoader.js';

var container, controls;
var camera, scene, renderer, mixer, clock;

init();
animate();

function init() {

  container = document.createElement( 'div' );
  document.body.appendChild( container );

  camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 20 );
  camera.position.set( - 2.8, 0.6, 3.7 );

  scene = new THREE.Scene();
  
  clock = new THREE.Clock();

  new RGBELoader()
    .setDataType( THREE.UnsignedByteType )
    .setPath( 'https://threejs.org/examples/textures/equirectangular/' )
    .load( 'royal_esplanade_1k.hdr', function ( texture ) {

      var envMap = pmremGenerator.fromEquirectangular( texture ).texture;

      scene.background = envMap;
      scene.environment = envMap;

      texture.dispose();
      pmremGenerator.dispose();

      // model

  
      var loader = new GLTFLoader();
      loader.load( 'https://cdn.glitch.com/378a8eca-f405-469a-b32e-b603069e5372%2Funtitled.glb?v=1584360698775', function ( gltf ) {

        scene.add( gltf.scene );

        mixer = new THREE.AnimationMixer( gltf.scene );
        
        gltf.animations.forEach( ( clip ) => {
          
            mixer.clipAction( clip ).play();
          
        } );

      } );

    } );

  renderer = new THREE.WebGLRenderer( { antialias: true } );
  renderer.setPixelRatio( window.devicePixelRatio );
  renderer.setSize( window.innerWidth, window.innerHeight );
  renderer.toneMapping = THREE.ACESFilmicToneMapping;
  renderer.toneMappingExposure = 0.8;
  renderer.outputEncoding = THREE.sRGBEncoding;
  container.appendChild( renderer.domElement );

  var pmremGenerator = new THREE.PMREMGenerator( renderer );
  pmremGenerator.compileEquirectangularShader();

  controls = new OrbitControls( camera, renderer.domElement );
  controls.minDistance = 2;
  controls.maxDistance = 10
  controls.target.set( 0, 0, - 0.2 );
  controls.update();

  window.addEventListener( 'resize', onWindowResize, false );

}

function onWindowResize() {

  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();

  renderer.setSize( window.innerWidth, window.innerHeight );

}

//

function animate() {
  
  requestAnimationFrame( animate );
  
  var delta = clock.getDelta();
  
  if ( mixer ) mixer.update( delta );

  renderer.render( scene, camera );

}
</script>

three.js R114