diff --git a/index.html b/index.html
index 517fdc5..d8c78ed 100644
--- a/index.html
+++ b/index.html
@@ -11,12 +11,20 @@
diff --git a/main.js b/main.js
index 95edef3..62c8210 100644
--- a/main.js
+++ b/main.js
@@ -36,7 +36,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
\**********************/
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
-eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst THREE = __webpack_require__(/*! three */ \"./node_modules/three/build/three.cjs\");\nconst GLTFLoader_1 = __webpack_require__(/*! three/examples/jsm/loaders/GLTFLoader */ \"./node_modules/three/examples/jsm/loaders/GLTFLoader.js\");\nconst OrbitControls_1 = __webpack_require__(/*! three/examples/jsm/controls/OrbitControls */ \"./node_modules/three/examples/jsm/controls/OrbitControls.js\");\nconst three_vrm_1 = __webpack_require__(/*! @pixiv/three-vrm */ \"./node_modules/@pixiv/three-vrm/lib/three-vrm.module.js\");\nconst three_vrm_animation_1 = __webpack_require__(/*! @pixiv/three-vrm-animation */ \"./node_modules/@pixiv/three-vrm-animation/lib/three-vrm-animation.module.js\");\nconst three_1 = __webpack_require__(/*! three */ \"./node_modules/three/build/three.cjs\");\nconst three_2 = __webpack_require__(/*! three */ \"./node_modules/three/build/three.cjs\");\nconst RGBELoader_1 = __webpack_require__(/*! three/examples/jsm/loaders/RGBELoader */ \"./node_modules/three/examples/jsm/loaders/RGBELoader.js\");\nwindow.addEventListener(\"DOMContentLoaded\", () => {\n var _a;\n const canvas = document.getElementById(\"canvas\");\n if (canvas == null)\n return;\n const scene = new THREE.Scene();\n const camera = new THREE.PerspectiveCamera(70, canvas.clientWidth / canvas.clientHeight, 0.1, 2000);\n camera.position.set(0, 1, -1.5);\n camera.rotation.set(0.0, Math.PI, 0.0);\n camera.lookAt(new THREE.Vector3(0, 0, 0));\n // https://threejs.org/docs/#api/en/constants/Renderer\n const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });\n renderer.setPixelRatio(window.devicePixelRatio);\n renderer.setSize(canvas.clientWidth, canvas.clientHeight);\n renderer.setClearColor(0x7fbfff, 1.0);\n renderer.shadowMap.enabled = true;\n renderer.outputColorSpace = THREE.SRGBColorSpace;\n renderer.toneMapping = THREE.ReinhardToneMapping;\n renderer.toneMapping = THREE.NeutralToneMapping;\n canvas.appendChild(renderer.domElement);\n renderer.toneMappingExposure = 1.5;\n //renderer.toneMapping = THREE.ACESFilmicToneMapping;\n const light = new THREE.DirectionalLight(0xffffff, Math.PI);\n light.position.set(1.0, 1.0, 1.0);\n scene.add(light);\n let currentVrm = undefined;\n let currentVrmAnimation = undefined;\n let currentMixer = undefined;\n function load(url) {\n loader.load(url, (gltf) => {\n tryInitVRM(gltf);\n tryInitVRMA(gltf);\n }, (progress) => console.log(\"Loading model...\", 100.0 * (progress.loaded / progress.total), \"%\"), (error) => console.error(error));\n }\n function tryInitVRM(gltf) {\n const vrm = gltf.userData.vrm;\n if (vrm == null) {\n return;\n }\n currentVrm = vrm;\n scene.add(vrm.scene);\n initAnimationClip();\n }\n function tryInitVRMA(gltf) {\n var _a;\n const vrmAnimations = gltf.userData.vrmAnimations;\n if (vrmAnimations == null) {\n return;\n }\n currentVrmAnimation = (_a = vrmAnimations[0]) !== null && _a !== void 0 ? _a : null;\n initAnimationClip();\n }\n function initAnimationClip() {\n if (currentVrm && currentVrmAnimation) {\n currentMixer = new THREE.AnimationMixer(currentVrm.scene);\n const clip = (0, three_vrm_animation_1.createVRMAnimationClip)(currentVrmAnimation, currentVrm);\n currentMixer.clipAction(clip).play();\n }\n }\n const loader = new GLTFLoader_1.GLTFLoader();\n loader.register((parser) => {\n return new three_vrm_1.VRMLoaderPlugin(parser);\n });\n loader.register((parser) => {\n return new three_vrm_animation_1.VRMAnimationLoaderPlugin(parser);\n });\n load(\"/vrma/ai.vrm\");\n load(\"/vrma/fly_c.vrma\");\n const clock = new THREE.Clock();\n clock.start();\n const controls = new OrbitControls_1.OrbitControls(camera, renderer.domElement);\n controls.enableDamping = true;\n controls.dampingFactor = 0.2;\n controls.enableRotate = true;\n controls.target.set(0.0, 1.0, 0.0);\n function floor_default() {\n var _a;\n scene.background = new THREE.Color(0xffffff);\n const directionalLight = new THREE.DirectionalLight(0xffffff);\n directionalLight.position.set(1, 1, 1);\n scene.add(directionalLight);\n const ambientLight = new THREE.AmbientLight(0x333333);\n scene.add(ambientLight);\n let floor = new three_2.Mesh(new three_2.BoxGeometry(50, 100), new three_2.MeshLambertMaterial({\n color: 0xffffff,\n depthWrite: true,\n }));\n floor.position.y = -1.0;\n floor.rotation.x = -Math.PI / 2;\n scene.add(floor);\n const grid = new three_2.GridHelper(50, 100, 0xffffff, 0xffffff);\n scene.add(grid);\n grid.position.set(Math.round(0), 0, Math.round(0));\n scene.fog = new three_1.Fog(0xffffff, 3, 20);\n (_a = scene.fog) === null || _a === void 0 ? void 0 : _a.color.set(0xffffff);\n }\n scene.background = new THREE.Color(0xffffff);\n const directionalLight = new THREE.DirectionalLight(0xffffff);\n directionalLight.position.set(1, 1, 1);\n scene.add(directionalLight);\n const ambientLight = new THREE.AmbientLight(0x333333);\n scene.add(ambientLight);\n let grid = new three_2.GridHelper(500, 1000, 0xffffff, 0xffffff);\n scene.add(grid);\n grid.position.set(Math.round(0), 0, Math.round(0));\n scene.fog = new three_1.Fog(0xffffff, 3, 20);\n (_a = scene.fog) === null || _a === void 0 ? void 0 : _a.color.set(0xffffff);\n function animate() {\n controls.update();\n const delta = clock.getDelta();\n if (currentMixer) {\n currentMixer.update(delta);\n }\n if (currentVrm) {\n currentVrm.update(delta);\n }\n requestAnimationFrame(animate);\n scene.rotation.y += 0.005;\n renderer.render(scene, camera);\n }\n animate();\n function random_happy() {\n // https://github.com/vrm-c/vrm-specification/blob/master/specification/VRMC_vrm-1.0/expressions.ja.md\n currentVrm.expressionManager.setValue('relaxed', 0.5);\n }\n function random_head() {\n // https://github.com/vrm-c/vrm-specification/blob/master/specification/VRMC_vrm-1.0/lookAt.ja.md\n currentVrm.lookAt.target = camera;\n currentVrm.VRMLookAtBoneApplier = camera;\n currentVrm.VRMLookAtExpressionApplier = camera;\n // https://github.com/vrm-c/vrm-specification/blob/master/specification/VRMC_vrm-1.0/humanoid.ja.md\n const head = currentVrm.humanoid.getRawBoneNode(\"head\");\n head.target = camera;\n }\n function random_blink() {\n setInterval(() => {\n currentVrm.expressionManager.setValue('relaxed', 0);\n currentVrm.expressionManager.setValue('blink', 0);\n random_head();\n const r = Math.floor(Math.random() * 3);\n if (r == 1) {\n setTimeout(() => { currentVrm.expressionManager.setValue('blink', 1); }, 5000);\n setTimeout(() => {\n currentVrm.expressionManager.setValue('blink', 0);\n }, 5500);\n }\n ;\n setTimeout(() => {\n currentVrm.expressionManager.setValue('relaxed', 0.5);\n currentVrm.expressionManager.setValue('blink', 1);\n }, 6000);\n }, 6500);\n }\n random_blink();\n setInterval(() => {\n const r = Math.floor(Math.random() * 4 + 1);\n load(\"/vrma/\" + r + \".vrma\");\n setTimeout(() => {\n load(\"/vrma/fly_c.vrma\");\n }, 10000);\n }, 15000);\n const el_light = document.querySelector('#btn-moon');\n if (el_light != null) {\n el_light.addEventListener('click', function () {\n light_s();\n });\n }\n let light_enable = true;\n function light_s() {\n if (light_enable == true) {\n light_enable = false;\n renderer.toneMapping = THREE.ACESFilmicToneMapping;\n light.intensity = -0.5;\n scene.background = new THREE.Color(0x000000);\n scene.fog = new three_1.Fog(0x000000, 3, 20);\n }\n else {\n light_enable = true;\n renderer.toneMapping = THREE.NeutralToneMapping;\n light.intensity = 1;\n scene.background = new THREE.Color(0xffffff);\n scene.fog = new three_1.Fog(0xffffff, 3, 20);\n }\n }\n const el_hdr = document.querySelector('#btn-sandar');\n if (el_hdr != null) {\n el_hdr.addEventListener('click', function () {\n hdr_s();\n });\n }\n let hdr_r = 0;\n function hdr_s() {\n if (hdr_r >= 2) {\n hdr_r = 0;\n }\n else {\n hdr_r++;\n }\n ;\n let hdr = \"/img/\" + hdr_r + \".hdr\";\n new RGBELoader_1.RGBELoader().load(hdr, function (texture) {\n texture.mapping = THREE.EquirectangularReflectionMapping;\n scene.background = texture;\n scene.environment = texture;\n });\n }\n const el_sword = document.querySelector('#btn-sword');\n if (el_sword != null) {\n el_sword.addEventListener('click', function () {\n sword_s();\n });\n }\n function sword_s() {\n scene.remove(currentVrm.scene);\n load(\"/vrma/ai_sword.vrm\");\n load(\"/vrma/sword.vrma\");\n setTimeout(() => {\n load(\"/vrma/idle.vrma\");\n }, 1000);\n setTimeout(() => {\n load(\"/vrma/ai.vrm\");\n scene.remove(currentVrm.scene);\n }, 5000);\n }\n const el_cloud = document.querySelector('#btn-cloud');\n if (el_cloud != null) {\n el_cloud.addEventListener('click', function () {\n cloud_s();\n });\n }\n function cloud_s() {\n load(\"/vrma/sky.vrma\");\n setTimeout(() => {\n load(\"/vrma/jump.vrma\");\n }, 5000);\n setTimeout(() => {\n load(\"/vrma/idle.vrma\");\n }, 5500);\n }\n onResize();\n window.addEventListener('resize', onResize);\n function onResize() {\n const width = window.innerWidth;\n const height = window.innerHeight;\n renderer.setPixelRatio(window.devicePixelRatio);\n renderer.setSize(width, height);\n camera.aspect = width / height;\n camera.updateProjectionMatrix();\n }\n});\n\n\n//# sourceURL=webpack://vrm/./src/index.ts?");
+eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst THREE = __webpack_require__(/*! three */ \"./node_modules/three/build/three.cjs\");\nconst GLTFLoader_1 = __webpack_require__(/*! three/examples/jsm/loaders/GLTFLoader */ \"./node_modules/three/examples/jsm/loaders/GLTFLoader.js\");\nconst OrbitControls_1 = __webpack_require__(/*! three/examples/jsm/controls/OrbitControls */ \"./node_modules/three/examples/jsm/controls/OrbitControls.js\");\nconst three_vrm_1 = __webpack_require__(/*! @pixiv/three-vrm */ \"./node_modules/@pixiv/three-vrm/lib/three-vrm.module.js\");\nconst three_vrm_animation_1 = __webpack_require__(/*! @pixiv/three-vrm-animation */ \"./node_modules/@pixiv/three-vrm-animation/lib/three-vrm-animation.module.js\");\nconst three_1 = __webpack_require__(/*! three */ \"./node_modules/three/build/three.cjs\");\nconst three_2 = __webpack_require__(/*! three */ \"./node_modules/three/build/three.cjs\");\nconst RGBELoader_1 = __webpack_require__(/*! three/examples/jsm/loaders/RGBELoader */ \"./node_modules/three/examples/jsm/loaders/RGBELoader.js\");\nwindow.addEventListener(\"DOMContentLoaded\", () => {\n var _a;\n let motion_enable = false;\n const canvas = document.getElementById(\"canvas\");\n if (canvas == null)\n return;\n const scene = new THREE.Scene();\n const camera = new THREE.PerspectiveCamera(70, canvas.clientWidth / canvas.clientHeight, 0.1, 2000);\n camera.position.set(0, 1, -1.5);\n camera.rotation.set(0.0, Math.PI, 0.0);\n camera.lookAt(new THREE.Vector3(0, 0, 0));\n // https://threejs.org/docs/#api/en/constants/Renderer\n const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });\n renderer.setPixelRatio(window.devicePixelRatio);\n renderer.setSize(canvas.clientWidth, canvas.clientHeight);\n renderer.setClearColor(0x7fbfff, 1.0);\n renderer.shadowMap.enabled = true;\n renderer.outputColorSpace = THREE.SRGBColorSpace;\n renderer.toneMapping = THREE.ReinhardToneMapping;\n renderer.toneMapping = THREE.NeutralToneMapping;\n canvas.appendChild(renderer.domElement);\n renderer.toneMappingExposure = 1.5;\n //renderer.toneMapping = THREE.ACESFilmicToneMapping;\n const light = new THREE.DirectionalLight(0xffffff, Math.PI);\n light.position.set(1.0, 1.0, 1.0);\n scene.add(light);\n let currentVrm = undefined;\n let currentVrmAnimation = undefined;\n let currentMixer = undefined;\n function load(url) {\n loader.load(url, (gltf) => {\n tryInitVRM(gltf);\n tryInitVRMA(gltf);\n }, (progress) => console.log(\"Loading model...\", 100.0 * (progress.loaded / progress.total), \"%\"), (error) => console.error(error));\n }\n function tryInitVRM(gltf) {\n const vrm = gltf.userData.vrm;\n if (vrm == null) {\n return;\n }\n currentVrm = vrm;\n scene.add(vrm.scene);\n initAnimationClip();\n }\n function tryInitVRMA(gltf) {\n var _a;\n const vrmAnimations = gltf.userData.vrmAnimations;\n if (vrmAnimations == null) {\n return;\n }\n currentVrmAnimation = (_a = vrmAnimations[0]) !== null && _a !== void 0 ? _a : null;\n initAnimationClip();\n }\n function initAnimationClip() {\n if (currentVrm && currentVrmAnimation) {\n currentMixer = new THREE.AnimationMixer(currentVrm.scene);\n const clip = (0, three_vrm_animation_1.createVRMAnimationClip)(currentVrmAnimation, currentVrm);\n currentMixer.clipAction(clip).play();\n }\n }\n const loader = new GLTFLoader_1.GLTFLoader();\n loader.register((parser) => {\n return new three_vrm_1.VRMLoaderPlugin(parser);\n });\n loader.register((parser) => {\n return new three_vrm_animation_1.VRMAnimationLoaderPlugin(parser);\n });\n load(\"/vrma/ai.vrm\");\n load(\"/vrma/fly_c.vrma\");\n const clock = new THREE.Clock();\n clock.start();\n const controls = new OrbitControls_1.OrbitControls(camera, renderer.domElement);\n controls.enableDamping = true;\n controls.dampingFactor = 0.2;\n controls.enableRotate = true;\n controls.target.set(0.0, 1.0, 0.0);\n function floor_default() {\n var _a;\n scene.background = new THREE.Color(0xffffff);\n const directionalLight = new THREE.DirectionalLight(0xffffff);\n directionalLight.position.set(1, 1, 1);\n scene.add(directionalLight);\n const ambientLight = new THREE.AmbientLight(0x333333);\n scene.add(ambientLight);\n let floor = new three_2.Mesh(new three_2.BoxGeometry(50, 100), new three_2.MeshLambertMaterial({\n color: 0xffffff,\n depthWrite: true,\n }));\n floor.position.y = -1.0;\n floor.rotation.x = -Math.PI / 2;\n scene.add(floor);\n const grid = new three_2.GridHelper(50, 100, 0xffffff, 0xffffff);\n scene.add(grid);\n grid.position.set(Math.round(0), 0, Math.round(0));\n scene.fog = new three_1.Fog(0xffffff, 3, 20);\n (_a = scene.fog) === null || _a === void 0 ? void 0 : _a.color.set(0xffffff);\n }\n scene.background = new THREE.Color(0xffffff);\n const directionalLight = new THREE.DirectionalLight(0xffffff);\n directionalLight.position.set(1, 1, 1);\n scene.add(directionalLight);\n const ambientLight = new THREE.AmbientLight(0x333333);\n scene.add(ambientLight);\n let grid = new three_2.GridHelper(500, 1000, 0xffffff, 0xffffff);\n scene.add(grid);\n grid.position.set(Math.round(0), 0, Math.round(0));\n scene.fog = new three_1.Fog(0xffffff, 3, 20);\n (_a = scene.fog) === null || _a === void 0 ? void 0 : _a.color.set(0xffffff);\n onResize();\n window.addEventListener('resize', onResize);\n function onResize() {\n const width = window.innerWidth;\n const height = window.innerHeight;\n renderer.setPixelRatio(window.devicePixelRatio);\n renderer.setSize(width, height);\n camera.aspect = width / height;\n camera.updateProjectionMatrix();\n }\n function animate() {\n controls.update();\n const delta = clock.getDelta();\n if (currentMixer) {\n currentMixer.update(delta);\n }\n if (currentVrm) {\n currentVrm.update(delta);\n }\n requestAnimationFrame(animate);\n scene.rotation.y += 0.005;\n renderer.render(scene, camera);\n }\n animate();\n function random_happy() {\n // https://github.com/vrm-c/vrm-specification/blob/master/specification/VRMC_vrm-1.0/expressions.ja.md\n currentVrm.expressionManager.setValue('relaxed', 0.5);\n }\n function random_head() {\n // https://github.com/vrm-c/vrm-specification/blob/master/specification/VRMC_vrm-1.0/lookAt.ja.md\n currentVrm.lookAt.target = camera;\n currentVrm.VRMLookAtBoneApplier = camera;\n currentVrm.VRMLookAtExpressionApplier = camera;\n // https://github.com/vrm-c/vrm-specification/blob/master/specification/VRMC_vrm-1.0/humanoid.ja.md\n const head = currentVrm.humanoid.getRawBoneNode(\"head\");\n head.target = camera;\n }\n function random_blink() {\n setInterval(() => {\n currentVrm.expressionManager.setValue('relaxed', 0);\n currentVrm.expressionManager.setValue('blink', 0);\n random_head();\n const r = Math.floor(Math.random() * 3);\n if (r == 1) {\n setTimeout(() => { currentVrm.expressionManager.setValue('blink', 1); }, 5000);\n setTimeout(() => {\n currentVrm.expressionManager.setValue('blink', 0);\n }, 5500);\n }\n ;\n setTimeout(() => {\n currentVrm.expressionManager.setValue('relaxed', 0.5);\n currentVrm.expressionManager.setValue('blink', 1);\n }, 6000);\n }, 6500);\n }\n random_blink();\n const el_light = document.querySelector('#btn-moon');\n if (el_light != null) {\n el_light.addEventListener('click', function () {\n light_s();\n });\n }\n let light_enable = true;\n function light_s() {\n if (light_enable == true) {\n light_enable = false;\n renderer.toneMapping = THREE.ACESFilmicToneMapping;\n light.intensity = -0.5;\n scene.background = new THREE.Color(0x000000);\n scene.fog = new three_1.Fog(0x000000, 3, 20);\n }\n else {\n light_enable = true;\n renderer.toneMapping = THREE.NeutralToneMapping;\n light.intensity = 1;\n scene.background = new THREE.Color(0xffffff);\n scene.fog = new three_1.Fog(0xffffff, 3, 20);\n }\n }\n const el_hdr = document.querySelector('#btn-sandar');\n if (el_hdr != null) {\n el_hdr.addEventListener('click', function () {\n hdr_s();\n });\n }\n let hdr_r = 0;\n function hdr_s() {\n if (hdr_r >= 2) {\n hdr_r = 0;\n }\n else {\n hdr_r++;\n }\n ;\n let hdr = \"/img/\" + hdr_r + \".hdr\";\n new RGBELoader_1.RGBELoader().load(hdr, function (texture) {\n texture.mapping = THREE.EquirectangularReflectionMapping;\n scene.background = texture;\n scene.environment = texture;\n });\n }\n function cool_time() {\n setTimeout(() => {\n motion_enable = false;\n }, 5000);\n }\n const el_sword = document.querySelector('#btn-sword');\n if (el_sword != null) {\n el_sword.addEventListener('click', function () {\n sword_s();\n });\n }\n function sword_s() {\n scene.remove(currentVrm.scene);\n load(\"/vrma/ai_sword.vrm\");\n load(\"/vrma/sword.vrma\");\n setTimeout(() => {\n load(\"/vrma/idle.vrma\");\n }, 1000);\n setTimeout(() => {\n load(\"/vrma/ai.vrm\");\n scene.remove(currentVrm.scene);\n }, 5000);\n }\n const el_cloud = document.querySelector('#btn-cloud');\n if (el_cloud != null) {\n el_cloud.addEventListener('click', function () {\n cloud_s();\n });\n }\n function cloud_s() {\n load(\"/vrma/sky.vrma\");\n setTimeout(() => {\n load(\"/vrma/jump.vrma\");\n }, 5000);\n setTimeout(() => {\n load(\"/vrma/idle.vrma\");\n }, 5500);\n }\n let mouse_ivent_timer_id;\n const el_run = document.querySelector('#btn-run');\n if (el_run != null) {\n el_run.addEventListener('mousedown', function () {\n mouse_ivent_timer_id = setTimeout(function () {\n motion_enable = true;\n }, 1000);\n load(\"/vrma/run.vrma\");\n });\n }\n document.querySelector('#btn-run').addEventListener('mouseup', (event) => {\n clearTimeout(mouse_ivent_timer_id);\n load(\"/vrma/idle.vrma\");\n cool_time();\n });\n const el_jump = document.querySelector('#btn-jump');\n if (el_jump != null) {\n el_jump.addEventListener('mousedown', function () {\n jump_s();\n });\n }\n function jump_s() {\n motion_enable = true;\n load(\"/vrma/jump.vrma\");\n setTimeout(() => {\n load(\"/vrma/idle.vrma\");\n }, 500);\n cool_time();\n }\n setInterval(() => {\n const r = Math.floor(Math.random() * 4 + 1);\n if (motion_enable == false) {\n load(\"/vrma/\" + r + \".vrma\");\n }\n setTimeout(() => {\n if (motion_enable == false) {\n load(\"/vrma/fly_c.vrma\");\n }\n }, 10000);\n }, 15000);\n});\n\n\n//# sourceURL=webpack://vrm/./src/index.ts?");
/***/ }),