VRM-Viewer Example

このページの実装

HTML

<head> 内

                
                    <script type="importmap">
                            {
                                "imports": {
                                    "three": "https://cdn.jsdelivr.net/npm/three@0.177.0/build/three.module.js",
                                    "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.177.0/examples/jsm/",
                                    "@pixiv/three-vrm": "https://cdn.jsdelivr.net/npm/@pixiv/three-vrm@3.4.1/lib/three-vrm.module.js",
                                    "@pixiv/three-vrm-animation": "https://cdn.jsdelivr.net/npm/@pixiv/three-vrm-animation@3.4.1/lib/three-vrm-animation.module.js"
                                }
                            }
                    </script>

<body> 内

                
                    <div id="VRM-canvas"></div>
                    <script type="module">
                        import { VRMViewer } from "/js/VRMViewer.external.js";

                        const vrmViewer = new VRMViewer({
                            canvasId: "VRM-canvas",
                        });
                        vrmViewer.animation({
                            vrmPath: "/models/sample.vrm",
                        });
                    </script>

CSS

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