Привет, я возился с тремя. 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