播放GLTF动画?三个.js

Question

嗨，在过去一周左右的时间里，我一直在摆弄三个.js，我对这个库完全陌生，所以很抱歉我会说或问任何愚蠢的话。我有我的代码，它没有抛出错误，但它有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