I made/took this simple example ever for an easy debug, but what ever I did I end up to this. When the GLTF animation of my camera end, and I call the orbit controls, I get this jump effect
// PS: this example work locally
// Ps 2 : the bot tells my that my post is mostly code but i just try to provide all the data, so I add more details why I’m spamming this post scriptum 2 here sorry for the inconvenient
the testc.gltf file
https://file.io/ICJY4DjmcUmV
import * as THREE from 'three';
import Stats from 'three/addons/libs/stats.module.js';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
let mixer;
let gltfObject;
const clock = new THREE.Clock();
const container = document.getElementById('container');
const stats = new Stats();
container.appendChild(stats.dom);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
const pmremGenerator = new THREE.PMREMGenerator(renderer);
const scene = new THREE.Scene();
scene.background = new THREE.Color(0xbfe3dd);
scene.environment = pmremGenerator.fromScene(new RoomEnvironment(renderer), 0.04).texture;
let camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 100);
camera.position.set(5, 2, 8);
let controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(0, 0.5, 0);
controls.update();
controls.enablePan = false;
controls.enableDamping = true;
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath('jsm/libs/draco/gltf/');
const loader = new GLTFLoader();
loader.setDRACOLoader(dracoLoader);
loader.load('models/gltf/testc.gltf', function (gltf) {
camera = gltf.cameras['0']; //if you have one camera or you need the first
const model = gltf.scene;
gltfObject = gltf;
model.position.set(1, 1, 0);
model.scale.set(0.01, 0.01, 0.01);
scene.add(model);
mixer = new THREE.AnimationMixer(model);
let action = mixer.clipAction(gltf.animations[1]);
action.setLoop(THREE.LoopOnce);
action.clampWhenFinished = true;
action.play();
mixer.addEventListener('finished', function () {
controls = new OrbitControls(camera, renderer.domElement);
console.log("mixer complete");
})
gltf.animations; // Array<THREE.AnimationClip>
gltf.scene; // THREE.Group
gltf.scenes; // Array<THREE.Group>
gltf.cameras; // Array<THREE.Camera>
gltf.asset; // Object
onWindowResize()
animate();
console.log("loadfn done");
}, undefined, function (e) {
console.error(e);
});
function onWindowResize() {
// Camera frustum aspect ratio
camera.aspect = window.innerWidth / window.innerHeight;
// After making changes to aspect
camera.updateProjectionMatrix();
// Reset size
renderer.setSize(window.innerWidth, window.innerHeight);
console.log("resized");
}
window.addEventListener('resize', onWindowResize, false);
function animate() {
requestAnimationFrame(animate);
const delta = clock.getDelta();
mixer.update(delta);
controls.update();
stats.update();
renderer.render(scene, camera);
}