File size
Loading...
→
Loading...
Network
Loading...
→
Loading...
Texture VRAM
Loading...
→
Loading...
Poly count
Loading...
→
Loading...
`;
overlay.appendChild(this.compressionInfoDisplay);
}
private _setupDragHandling(separator: HTMLElement, handle: HTMLElement, overlay: HTMLElement): void {
let isDragging = false;
let startX = 0;
let startPosition = DEFAULT_SLIDER_POSITION;
const startDrag = (e: MouseEvent | TouchEvent) => {
isDragging = true;
startX = e instanceof MouseEvent ? e.clientX : e.touches[0].clientX;
startPosition = this.sliderPosition.value;
separator.classList.add('dragging');
handle.classList.add('dragging');
document.body.style.userSelect = 'none';
e.preventDefault();
};
const drag = (e: MouseEvent | TouchEvent) => {
if (!isDragging) return;
const currentX = e instanceof MouseEvent ? e.clientX : e.touches[0].clientX;
const deltaX = currentX - startX;
const containerWidth = overlay.offsetWidth;
const deltaPosition = deltaX / containerWidth;
const newPosition = THREE.MathUtils.clamp(startPosition + deltaPosition, 0, 1);
this.sliderPosition.value = newPosition;
};
const endDrag = () => {
if (!isDragging) return;
isDragging = false;
separator.classList.remove('dragging');
handle.classList.remove('dragging');
document.body.style.userSelect = '';
};
separator.addEventListener('mousedown', startDrag);
handle.addEventListener('mousedown', startDrag);
document.addEventListener('mousemove', drag);
document.addEventListener('mouseup', endDrag);
separator.addEventListener('touchstart', startDrag);
handle.addEventListener('touchstart', startDrag);
document.addEventListener('touchmove', drag);
document.addEventListener('touchend', endDrag);
}
private _updateSeparatorPosition(position: number): void {
if (this._separatorLine) this._separatorLine.style.left = `${position * 100}%`;
}
private onLoaded = () => {
this._setupCameraContext();
this.gltf.animationClips.addListener(this.updateAnimationsList);
this.gltf.morphTargetMeshes.addListener(this.updateMorphTargetsList);
this.gltf.materials.addListener(this.updateMaterialsList);
if (this._isComparisonMode) {
this._createSeparatorLine();
this._createComparisonInfoDisplays();
useOnBeforeRender(this.contextManager).addListener(this._frame, -10);
this._updateClipping();
this.updateComparisonStats();
this._updateComparisonViewMode();
}
this._updateViewMode();
if (this._enableCameraCaching) {
this._setupCameraCaching();
}
};
private _setupCameraCaching(): void {
const overlay = useOverlay(this.contextManager).value;
overlay.addEventListener('mouseup', () => {
setTimeout(() => this.saveCameraState(), 100);
});
overlay.addEventListener('touchend', () => {
setTimeout(() => this.saveCameraState(), 100);
});
}
private async _initializeCameraPosition(): Promise