このページの実装

HTML

                
                    <div id="VRM-canvas-with-loading">
                        <div id="VRM-canvas"></div>
                        <div id="VRM-canvas-loading-skeleton"><p>Loading...</p></div>
                    </div>
                    <script type="module">
                        import { VRMViewer } from "/js/VRMViewer.js";

                        const vrmViewer = new VRMViewer({
                            canvasId: "VRM-canvas",
                            renderProps: {
                                enableShadow: true,
                                cameraProps: {
                                    position: {
                                        x: 0.0,
                                        y: 1.6,
                                        z: 5.0,
                                    },
                                    fov: 20.0,
                                    near: 1.0,
                                    far: 10.0,
                                },
                                controlsProps: {
                                    target: {
                                        x: 0.0,
                                        y: 1.0,
                                        z: 0.0,
                                    },
                                    enablePan: false,
                                    minDistance: 1.0,
                                    maxDistance: 10.0,
                                    minPolerAngle: 45.0,
                                    maxPolerAngle: 135.0,
                                },
                            },
                            vrmaProps: {
                                enableBlink: true,
                                expression: "relaxed",
                            },
                            lightProps: {
                                position: {
                                    x: 0.5,
                                    y: 1.0,
                                    z: 1.0,
                                },
                                color: 0xa0d8ef,
                                intensity: 1.0,
                            },
                            skyProps: {
                                enableSky: true,
                            },
                            floorProps: {
                                enableFloor: true,
                                color: 0xa0d8ef,
                                opacity: 0.3,
                                width: 10.0,
                                adjustPositionY: -0.03,
                            },
                            loadingCallbacks: {
                                onLoadingStart: () => {
                                    document.getElementById('VRM-canvas-loading-skeleton').classList.add("show");
                                },
                                onLoadingEnd: () => {
                                    const elm = document.getElementById('VRM-canvas-loading-skeleton');
                                    if (elm) {
                                        elm.classList.remove("show");
                                    }
                                }
                            }
                        });
                        vrmViewer.animation({
                            vrmPath: "/models/sample.vrm",
                            vrmaPath: "/models/004_hello_1.vrma",
                        });
                    </script>
                
            

CSS

                
                    #VRM-canvas-with-loading {
                        position: relative;
                        width: 100%;
                        max-width: 600px;
                        height: 600px;
                    }

                    #VRM-canvas {
                        width: 100%;
                        height: 100%;
                    }

                    #VRM-canvas-with-loading #VRM-canvas-loading-skeleton {
                        display: none;
                        position: absolute;
                        inset: 0;
                        background-color: rgba(0, 0, 0, 0.5);
                        color: white;
                        border-radius: 10px;
                        z-index: 1;
                    }

                    #VRM-canvas-with-loading #VRM-canvas-loading-skeleton.show {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }