@preference-sl/pref-viewer 2.11.0 → 2.12.0-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@preference-sl/pref-viewer",
-    "version": "2.11.0",
+    "version": "2.12.0-beta.2",
     "description": "Web Component to preview GLTF models with Babylon.js",
     "author": "Alex Moreno Palacio <amoreno@preference.es>",
     "scripts": {

package/src/babylonjs-animation-controller.js

@@ -113,18 +113,18 @@ export default class BabylonJSAnimationController {
     }
 
     /**
-     * Determines if a mesh belongs to a node targeted by an animation.
+     * Finds all animated node IDs associated with a given mesh by traversing its parent hierarchy.
      * @private
      * @param {Mesh} mesh - The mesh to check.
-     * @returns {string|false} The animated node ID if found, otherwise false.
+     * @returns {Array<string>} Array of animated node IDs associated with the mesh.
      */
-    #getNodeAnimatedByMesh = function (mesh) {
-        let nodeId = false;
+    #getNodesAnimatedByMesh = function (mesh) {
+        let nodeId = [];
         let node = mesh;
-        while (node.parent !== null && !nodeId) {
+        while (node.parent !== null) {
             node = node.parent;
-            if (this.#animatedNodes.includes(node.id)) {
-                nodeId = node.id;
+            if (this.#animatedNodes.includes(node.id) && !nodeId.includes(node.id)) {
+                nodeId.push(node.id);
             }
         }
         return nodeId;
@@ -169,16 +169,29 @@ export default class BabylonJSAnimationController {
             return;
         }
 
-        const nodeId = this.#getNodeAnimatedByMesh(pickingInfo.pickedMesh);
-        if (!nodeId) {
+        const nodeIds = this.#getNodesAnimatedByMesh(pickingInfo.pickedMesh);
+        if (!nodeIds.length) {
             return;
         }
 
-        const transformNode = this.#scene.getTransformNodeByID(nodeId);
-        const nodeMeshes = transformNode.getChildMeshes();
-        if (nodeMeshes.length) {
-            nodeMeshes.forEach((mesh) => this.#highlightLayer.addMesh(mesh, this.#highlightColor));
-        }
+        const transformNodes = [];
+        nodeIds.forEach((nodeId) => {
+            const transformNode = this.#scene.getTransformNodeByID(nodeId);
+            if (transformNode) {
+                transformNodes.push(transformNode);
+            }
+        });
+
+        transformNodes.forEach((transformNode) => {
+            const nodeMeshes = transformNode.getChildMeshes();
+            if (nodeMeshes.length) {
+                nodeMeshes.forEach((mesh) => {
+                    if (!this.#highlightLayer.hasMesh(mesh)) {
+                        this.#highlightLayer.addMesh(mesh, this.#highlightColor);
+                    }
+                });
+            }
+        });
     }
 
     /**
@@ -203,15 +216,20 @@ export default class BabylonJSAnimationController {
 
         this.hideMenu();
 
-        const nodeId = this.#getNodeAnimatedByMesh(pickingInfo.pickedMesh);
-        if (!nodeId) {
-            return;
-        }
-        const openingAnimation = this.#getOpeningAnimationByNode(nodeId);
-        if (!openingAnimation) {
+        const nodeIds = this.#getNodesAnimatedByMesh(pickingInfo.pickedMesh);
+        if (!nodeIds.length) {
             return;
         }
+        const openingAnimations = [];
+        nodeIds.forEach((nodeId) => {
+            const openingAnimation = this.#getOpeningAnimationByNode(nodeId);
+            if (!openingAnimation) {
+                return;
+            }
+            openingAnimations.push(openingAnimation);
+        });
 
-        openingAnimation.showControls(this.#canvas);
+        const startedAnimation = openingAnimations.find((animation) => animation.state !== OpeningAnimation.states.closed);
+        startedAnimation ? startedAnimation.showControls(this.#canvas, openingAnimations) : openingAnimations[0].showControls(this.#canvas, openingAnimations);
     }
 }

package/src/babylonjs-animation-opening-menu.js

@@ -5,17 +5,19 @@ import { PrefViewer3DAnimationMenuStyles } from "./styles.js";
  * OpeningAnimationMenu - Manages and renders the interactive animation control menu for opening/closing animations in a Babylon.js scene.
  *
  * Summary:
- *  Provides a floating HTML-based GUI menu with playback and loop controls for animated nodes, including buttons and a progress slider.
+ *  Provides a floating HTML-based GUI menu with playback and loop controls for animated nodes, including buttons, a progress slider, and a selector for switching between multiple animations.
  *  Handles user interaction, updates UI state based on animation state, and invokes external callbacks for animation actions.
  *  Designed for integration with Babylon.js product configurators and interactive 3D applications.
  *
  * Key Features:
  *  - Renders a menu with buttons for controlling animation playback (open, close, pause, go to opened/closed, loop).
+ *  - Displays a selector UI for switching between multiple opening animations, showing only the animation name without prefix.
  *  - Updates button states and slider position based on animation state, progress, and loop mode.
  *  - Handles user interactions and invokes provided callbacks for animation actions.
  *  - Synchronizes the slider value with animation progress, avoiding callback loops.
  *  - Provides setters to update animation state, progress, and loop mode from external controllers.
  *  - Disposes and cleans up all DOM resources when no longer needed.
+ *  - Resets other animation menus when switching between animations.
  *
  * Public Setters:
  *  - set animationState(state): Updates the animation state and button states.
@@ -29,9 +31,10 @@ import { PrefViewer3DAnimationMenuStyles } from "./styles.js";
  *  - isVisible: Returns whether the animation menu is currently visible in the DOM.
  *
  * Private Methods:
- *  - #createMenu(): Initializes and renders the menu UI.
+ *  - #createMenu(): Initializes and renders the menu UI, including the selector, buttons, and slider.
  *  - #addButton(name, imageSVG, enabled, active, visible, callback): Adds a button to the menu with specified properties.
  *  - #createButtons(): Creates all control buttons and sets their initial states.
+ *  - #createSelector(): Creates a selector UI element for switching between available opening animations, omitting the prefix in the display name.
  *  - #getButtonByName(name): Retrieves a button control by its name.
  *  - #setButtonState(name, enabled, active, visible): Updates the visual state of a button.
  *  - #getPlayerButtonsState(): Returns the state (enabled, active, visible) for playback control buttons.
@@ -41,16 +44,18 @@ import { PrefViewer3DAnimationMenuStyles } from "./styles.js";
  *  - #setLoopButtonsState(): Updates all loop control buttons.
  *  - #createSlider(): Creates and configures the animation progress slider.
  *  - #onSliderInput(event): Handles the slider input event for animation progress.
+ *  - #resetOtherAnimations(): Resets all other opening animations except the current one.
  *
  * Usage Example:
- *  const menu = new OpeningAnimationMenu(name, canvas, state, progress, loop, {
+ *  const menu = new OpeningAnimationMenu(name, canvas, state, progress, loop, openingAnimations, {
  *      onOpen: () => { ... },
  *      onClose: () => { ... },
  *      onPause: () => { ... },
  *      onGoToOpened: () => { ... },
  *      onGoToClosed: () => { ... },
  *      onToggleLoop: () => { ... },
- *      onSetAnimationProgress: (progress) => { ... }
+ *      onSetAnimationProgress: (progress) => { ... },
+ *      onChangeAnimation: () => { ... }
  *  });
  *  menu.animationState = OpeningAnimation.states.opening;
  *  menu.animationProgress = 0.5;
@@ -60,6 +65,7 @@ export default class OpeningAnimationMenu {
     #animationState = OpeningAnimation.states.closed;
     #animationProgress = 0;
     #animationLoop = false;
+    #openingAnimations = [];
     #callbacks = null;
 
     #name = "";
@@ -89,17 +95,20 @@ export default class OpeningAnimationMenu {
      * @param {number} animationState - Current animation state (enum).
      * @param {number} animationProgress - Current animation progress (0 to 1).
      * @param {boolean} animationLoop - Whether the animation is set to loop.
+     * @param {Array<OpeningAnimation>} openingAnimations - Array of OpeningAnimation instances to manage.
      * @param {object} callbacks - Callback functions for menu actions (play, pause, open, close, etc.).
      * @public
      */
-    constructor(name, canvas, animationState, animationProgress, animationLoop, callbacks) {
+    constructor(name, canvas, animationState, animationProgress, animationLoop, openingAnimations, callbacks) {
         this.#name = name;
         this.#canvas = canvas;
         this.#animationState = animationState;
         this.#animationProgress = animationProgress;
         this.#animationLoop = animationLoop;
+        this.#openingAnimations = openingAnimations;
         this.#callbacks = callbacks;
 
+        this.#resetOtherAnimations();
         this.#createMenu(animationState);
     }
 
@@ -131,6 +140,46 @@ export default class OpeningAnimationMenu {
         this.#containerButtons.appendChild(button);
     }
 
+    /**
+     * Creates a selector UI element for switching between available opening animations.
+     * @private
+     * @returns {void}
+     */
+    #createSelector() {
+        if (!Array.isArray(this.#openingAnimations) || this.#openingAnimations.length < 2) {
+            return; // No selector needed if only one animation
+        }
+
+        const selector = document.createElement("div");
+        selector.classList.add("animation-menu-selector");
+
+        this.#openingAnimations.forEach((animation) => {
+            const button = document.createElement("button");
+            button.classList.add("button-selector");
+            // Remove prefix before "_" for display
+            const nameParts = animation.name.split("_");
+            button.textContent = nameParts.length > 1 ? nameParts.slice(1).join("_") : animation.name;
+
+            // Highlight the current animation
+            if (animation.name === this.#name) {
+                button.classList.add("active");
+            }
+
+            button.addEventListener("click", (event) => {
+                if (animation.name !== this.#name) {
+                    if (this.#callbacks.onChangeAnimation && typeof this.#callbacks.onChangeAnimation === "function") {
+                        this.#callbacks.onChangeAnimation();
+                    }
+                    animation.showControls(this.#canvas, this.#openingAnimations);
+                }
+            });
+
+            selector.appendChild(button);
+        });
+
+        this.#containerMain.prepend(selector);
+    }
+
     /**
      * Creates all control buttons and sets their initial states.
      * @private
@@ -183,6 +232,7 @@ export default class OpeningAnimationMenu {
         this.#containerButtons.classList.add("animation-menu-buttons");
         this.#containerMain.appendChild(this.#containerButtons);
 
+        this.#createSelector();
         this.#createButtons();
         this.#createSlider();
     }
@@ -263,6 +313,20 @@ export default class OpeningAnimationMenu {
         return buttonsState;
     }
 
+    /**
+     * Resets all other opening animations except the current one.
+     * @private
+     * @returns {void}
+     */
+    #resetOtherAnimations() {
+        this.#openingAnimations.forEach((animation) => {
+            if (animation.name !== this.#name) {
+                animation.hideControls();
+                animation.goToClosed();
+            }
+        });
+    }
+
     /**
      * Updates the visual state of a button (enabled, active, visible).
      * @private

package/src/babylonjs-animation-opening.js

@@ -19,7 +19,7 @@ import OpeningAnimationMenu from "./babylonjs-animation-opening-menu.js";
  *  - pause(): Pauses the current animation.
  *  - goToOpened(): Moves animation to the fully opened state.
  *  - goToClosed(): Moves animation to the fully closed state.
- *  - showControls(canvas): Displays the animation control menu.
+ *  - showControls(canvas, openingAnimations): Displays the animation control menu and sets up callbacks.
  *  - hideControls(): Hides the animation control menu.
  *  - isControlsVisible(): Returns true if the control menu is visible for this animation.
  *
@@ -433,8 +433,9 @@ export default class OpeningAnimation {
      * Synchronizes slider and button states with animation.
      * @public
      * @param {HTMLCanvasElement} canvas - The canvas element for rendering.
+     * @param {Array<OpeningAnimation>} openingAnimations - Array of OpeningAnimation instances to manage.
      */
-    showControls(canvas) {
+    showControls(canvas, openingAnimations = []) {
         const controlCallbacks = {
             onGoToOpened: () => {
                 if (this.#state === OpeningAnimation.states.opened) {
@@ -481,8 +482,14 @@ export default class OpeningAnimation {
                 this.#loop = !this.#loop;
                 this.#menu.animationLoop = this.#loop;
             },
+            onChangeAnimation: () => {
+                if (this.#state !== OpeningAnimation.states.closed) {
+                    this.goToClosed();
+                }
+                this.hideControls();
+            },
         };
-        this.#menu = new OpeningAnimationMenu(this.name, canvas, this.#state, this.#getProgress(), this.#loop, controlCallbacks);
+        this.#menu = new OpeningAnimationMenu(this.name, canvas, this.#state, this.#getProgress(), this.#loop, openingAnimations, controlCallbacks);
 
         // Attach to Babylon.js scene render loop for real-time updates
         this.#openAnimation._scene.onBeforeRenderObservable.add(this.#handlers.updateControlsSlider);

package/src/babylonjs-controller.js

@@ -24,6 +24,7 @@ import BabylonJSAnimationController from "./babylonjs-animation-controller.js";
  *  - Provides methods for downloading models and scenes in GLB, glTF (ZIP), and USDZ formats.
  *  - Manages camera and material options, container visibility, and user interactions.
  *  - Observes canvas resize events and updates the engine accordingly.
+ *  - Applies metadata-driven scene adjustments (e.g., inner floor translation) after asset reloads.
  *  - Designed for integration with PrefViewer and GLTFResolver.
  *  - All resource management and rendering operations are performed asynchronously for performance.
  *
@@ -84,6 +85,9 @@ import BabylonJSAnimationController from "./babylonjs-animation-controller.js";
  *  - #startRender(): Starts the Babylon.js render loop.
  *  - #loadAssetContainer(container): Loads an asset container asynchronously.
  *  - #loadContainers(): Loads all asset containers and adds them to the scene.
+ *  - #checkModelMetadata(oldMetadata, newMetadata): Processes metadata changes after loading.
+ *  - #checkInnerFloorTranslation(oldMetadata, newMetadata): Applies inner floor Y translations from metadata.
+ *  - #translateNodeY(name, deltaY): Adjusts the Y position of a scene node.
  *  - #addDateToName(name): Appends the current date/time to a name string.
  *  - #downloadZip(files, name, comment, addDateInName): Generates and downloads a ZIP file.
  *  - #openDownloadDialog(): Opens the modal download dialog.
@@ -319,9 +323,9 @@ export default class BabylonJSController {
      * @returns {boolean}
      */
     #initializeEnvironmentTexture() {
-        return false;
+        return false; // Environment texture disabled by the moment
         if (this.#scene.environmentTexture) {
-            return;
+            return false;
         }
         const hdrTextureURI = "../src/environments/noon_grass.hdr";
         const hdrTexture = new HDRCubeTexture(hdrTextureURI, this.#scene, 128);
@@ -329,6 +333,7 @@ export default class BabylonJSController {
         hdrTexture._noMipmap = false;
         hdrTexture.level = 2.0;
         this.#scene.environmentTexture = hdrTexture;
+        return true;
     }
 
     /**
@@ -340,7 +345,7 @@ export default class BabylonJSController {
      * @returns {void|false} Returns false if no environment texture is set; otherwise void.
      */
     #initializeIBLShadows() {
-        if (!this.#scene.environmentTexture) {
+        if (!this.#scene.environmentTexture || !this.#scene.environmentTexture.isReady()) {
             return false;
         }
 
@@ -407,7 +412,7 @@ export default class BabylonJSController {
      * Otherwise, sets up shadow casting and receiving for all relevant meshes using the shadow generator.
      */
     #initializeShadows() {
-        if (!this.#scene.environmentTexture) {
+        if (this.#scene.environmentTexture) {
             this.#initializeIBLShadows();
             return true;
         }
@@ -417,7 +422,7 @@ export default class BabylonJSController {
                 return false;
             }
             mesh.receiveShadows = true;
-            if (!mesh.name === "hdri") {
+            if (mesh.name !== "hdri") {
                 this.#shadowGen.addShadowCaster(mesh, true);
             }
         });
@@ -848,6 +853,8 @@ export default class BabylonJSController {
             container.assetContainer = null;
         }
         this.#scene.getEngine().releaseEffects();
+        this.#scene.getEngine().releaseComputeEffects();
+
         container.assetContainer = newAssetContainer;
         return this.#addContainer(container, false);
     }
@@ -914,7 +921,7 @@ export default class BabylonJSController {
             return [container, false];
         }
 
-        container.state.setPendingCacheData(sourceData.size, sourceData.timeStamp);
+        container.state.setPendingCacheData(sourceData.size, sourceData.timeStamp, sourceData.metadata);
 
         // https://doc.babylonjs.com/typedoc/interfaces/BABYLON.LoadAssetContainerOptions
         let options = {
@@ -943,6 +950,9 @@ export default class BabylonJSController {
     async #loadContainers() {
         this.#stopRender();
 
+        let oldModelMetadata = { ...(this.#containers.model?.state?.metadata ?? {}) };
+        let newModelMetadata = {};
+
         const promiseArray = [];
         Object.values(this.#containers).forEach((container) => {
             promiseArray.push(this.#loadAssetContainer(container));
@@ -962,6 +972,7 @@ export default class BabylonJSController {
                     if (result.status === "fulfilled" && assetContainer) {
                         if (container.state.name === "model") {
                             assetContainer.lights = [];
+                            newModelMetadata = { ...(container.state.update.metadata ?? {}) };
                         }
                         this.#replaceContainer(container, assetContainer);
                         container.state.setSuccess(true);
@@ -985,6 +996,7 @@ export default class BabylonJSController {
                 detail.error = error;
             })
             .finally(async () => {
+                this.#checkModelMetadata(oldModelMetadata, newModelMetadata);
                 this.#setMaxSimultaneousLights();
                 this.#initializeShadows();
                 this.#babylonJSAnimationController = new BabylonJSAnimationController(this.#scene);
@@ -993,6 +1005,101 @@ export default class BabylonJSController {
         return detail;
     }
 
+    /**
+     * Checks and applies model metadata changes after asset loading.
+     * @private
+     * @param {object} oldMetadata - The previous metadata object for the model.
+     * @param {object} newMetadata - The new metadata object for the model.
+     * @returns {void}
+     * @description
+     * Currently, it only checks for changes related to the inner floor translation by delegating to #checkInnerFloorTranslation.
+     */
+    #checkModelMetadata(oldMetadata, newMetadata) {
+        // For the moment only check inner floor translation
+        this.#checkInnerFloorTranslation(oldMetadata, newMetadata);
+    }
+
+    /**
+     * Checks and applies Y-axis translation for the inner floor node based on metadata changes.
+     * @private
+     * @param {object} oldMetadata - The previous metadata object for the model.
+     * @param {object} newMetadata - The new metadata object for the model.
+     * @returns {void}
+     */
+    #checkInnerFloorTranslation(oldMetadata, newMetadata) {
+        let newDeltaY = newMetadata?.customProperties?.innerFloorValue ? parseFloat(newMetadata.customProperties.innerFloorValue) : 0;
+        let oldDeltaY = oldMetadata?.customProperties?.innerFloorValue ? parseFloat(oldMetadata.customProperties.innerFloorValue) : 0;
+
+        if (newDeltaY === 0 && oldDeltaY === 0) {
+            return;
+        }
+
+        if (!this.#containers.environment.assetContainer) {
+            return;
+        }
+
+        const getNodeName = (data) => {
+            if (data && typeof data === "string" && data.includes("/")) {
+                data = data.slice(data.lastIndexOf("/") + 1);
+                return data;
+            }
+            return false;
+        };
+
+        let applyNewTranslation = false;
+        let applyOldTranslation = false;
+        let undoOldTranslation = false;
+        const newTranslationNodeName = getNodeName(newMetadata?.customProperties?.innerFloorPath);
+        const oldTranslationNodeName = getNodeName(oldMetadata?.customProperties?.innerFloorPath);
+
+        if (this.#containers.environment.state.isSuccess) {
+            // If environment is being reloaded:
+            if (this.#containers.model.state.isSuccess) {
+                // If model is also being reloaded, apply only new translation
+                applyNewTranslation = newDeltaY !== 0 && newTranslationNodeName;
+            } else {
+                // If model is not being reloaded, apply old translation
+                applyOldTranslation = oldDeltaY !== 0 && oldTranslationNodeName;
+            }
+        } else {
+            // If environment is not being reloaded:
+            if (this.#containers.model.state.isSuccess) {
+                // If environment is not being reload but model is being reloaded, undo old trasnslation and apply new translation
+                undoOldTranslation = oldDeltaY !== 0 && oldTranslationNodeName;
+                applyNewTranslation = newDeltaY !== 0 && newTranslationNodeName;
+            }
+        }
+
+        if (undoOldTranslation) {
+            this.#translateNodeY(oldTranslationNodeName, -oldDeltaY);
+        }
+        if (applyOldTranslation) {
+            this.#translateNodeY(oldTranslationNodeName, oldDeltaY);
+        }
+        if (applyNewTranslation) {
+            this.#translateNodeY(newTranslationNodeName, newDeltaY);
+        }
+    }
+
+    /**
+     * Translates a node along the scene's vertical (Y) axis by the provided value.
+     * @private
+     * @param {string} name - The node name to find in the scene.
+     * @param {number} deltaY - The Y-axis translation amount (positive or negative).
+     * @returns {boolean} True if the node was found and translated, false otherwise.
+     */
+    #translateNodeY(name, deltaY) {
+        if (!this.#scene) {
+            return false;
+        }
+        const node = this.#scene.getNodeByName(name);
+        if (!node || !node.position) {
+            return false;
+        }
+        node.position.y += deltaY;
+        return true;
+    }
+
     /**
      * Appends the current date and time to the provided name string in the format: name_YYYY-MM-DD_HH.mm.ss
      * @private

package/src/gltf-resolver.js

@@ -220,6 +220,7 @@ export default class GLTFResolver {
         let source = storage.url || null;
         let newSize, newTimeStamp;
         let pending = false;
+        let metadata = {};
 
         if (storage.db && storage.table && storage.id) {
             await this.#initializeStorage(storage.db, storage.table);
@@ -228,6 +229,7 @@ export default class GLTFResolver {
                 return false;
             }
             source = object.data;
+            metadata = { ...(object.metadata ?? {}) };
             if (object.timeStamp === currentTimeStamp) {
                 return false;
             } else {
@@ -283,6 +285,6 @@ export default class GLTFResolver {
                 }
             }
         }
-        return { source: file || source, size: newSize, timeStamp: newTimeStamp, extension: extension };
+        return { source: file || source, size: newSize, timeStamp: newTimeStamp, extension: extension, metadata: metadata, };
     }
 }

package/src/pref-viewer-3d-data.js

@@ -13,6 +13,7 @@
  */
 export class ContainerData {
     constructor(name = "") {
+        this.metadata = {};
         this.name = name;
         this.show = true;
         this.size = 0;
@@ -23,6 +24,7 @@ export class ContainerData {
     }
     reset() {
         this.update = {
+            metadata: {},
             pending: false,
             storage: null,
             success: false,
@@ -37,6 +39,7 @@ export class ContainerData {
             this.show = this.update.show !== null ? this.update.show : this.show;
             this.size = this.update.size;
             this.timeStamp = this.update.timeStamp;
+            this.metadata = { ...(this.update.metadata ?? {}) };
         } else {
             this.update.success = false;
         }
@@ -48,9 +51,10 @@ export class ContainerData {
         this.update.success = false;
         this.update.show = show !== undefined ? show : this.update.show !== null ? this.update.show : this.show;
     }
-    setPendingCacheData(size = 0, timeStamp = null) {
+    setPendingCacheData(size = 0, timeStamp = null, metadata = {}) {
         this.update.size = size;
         this.update.timeStamp = timeStamp;
+        this.update.metadata = { ...(metadata ?? {}) };
     }
     get isPending() {
         return this.update.pending === true;

package/src/styles.js

@@ -111,15 +111,62 @@ export const PrefViewer3DAnimationMenuStyles = `
         --slider-thumb-width: 20px;
         --slider-bar-height: 8px;
         --slider-bar-offset: 10px;
+        --selector-button-radius: 6px;
+        --selector-button-padding-horizontal: 8px;
+        --selector-button-padding-vertical: 4px;
+        --selector-button-font-size: 14px;
+        --selector-button-font-weight: 500;
+        --width: calc(var(--button-size) * 6 + var(--button-spacing) * 5 + var(--button-loop-margin-left));
 
         display: block;
         position: absolute;
         bottom: 10px;
 
-        right: calc(50% - ((6 * var(--button-size) + 5 * var(--button-spacing) + var(--button-loop-margin-left)) / 2));
+        right: calc(50% - (var(--width) / 2));
         z-index: 1000;
     }
 
+    div.pref-viewer-3d.animation-menu>div.animation-menu-selector {
+        fore
+        padding: 0;
+        margin: 0;
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--button-spacing);
+        max-width: var(--width);
+        margin-bottom: var(--button-spacing);
+    }
+
+    div.pref-viewer-3d.animation-menu>div.animation-menu-selector>button {
+        display: block;
+        padding: var(--selector-button-padding-vertical) var(--selector-button-padding-horizontal);
+        margin: 0;
+        border: 1px solid var(--color-border);
+        border-radius: var(--selector-button-radius);
+        background: var(--color-enabled);
+        color: var(--color-icon);
+        font-size: var(--selector-button-font-size);
+        font-weight: var(--selector-button-font-weight);
+        line-height: 1;
+        flex: 1;
+    }
+
+    div.pref-viewer-3d.animation-menu>div.animation-menu-selector>button.active {
+        background: var(--color-active);
+    }
+
+    div.pref-viewer-3d.animation-menu>div.animation-menu-selector>button.active:hover {
+        background: var(--color-active-hover);
+    }
+
+    div.pref-viewer-3d.animation-menu>div.animation-menu-selector>button:not(.active) {
+        cursor: pointer;
+    }
+
+    div.pref-viewer-3d.animation-menu>div.animation-menu-buttons>button:not(.active):hover {
+        background: var(--color-enabled-hover);
+    }
+
     div.pref-viewer-3d.animation-menu>div.animation-menu-buttons {
         padding: 0;
         margin: 0;