<!DOCTYPE HTML>
<html lang="" >
<head>
<meta charset="UTF-8">
<title>vrmをwebに表示する · HonKit</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="description" content="">
<meta name="generator" content="HonKit 6.0.2">
<link rel="stylesheet" href="../gitbook/style.css">
<link rel="stylesheet" href="../gitbook/@honkit/honkit-plugin-highlight/website.css">
<link rel="stylesheet" href="../gitbook/gitbook-plugin-search/search.css">
<link rel="stylesheet" href="../gitbook/@honkit/honkit-plugin-fontsettings/website.css">
<meta name="HandheldFriendly" content="true"/>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="../gitbook/images/apple-touch-icon-precomposed-152.png">
<link rel="shortcut icon" href="../gitbook/images/favicon.ico" type="image/x-icon">
<link rel="next" href="../issue/" />
<link rel="prev" href="01_three.html" />
</head>
<body>
<div class="book honkit-cloak">
<div class="book-summary">
<div id="book-search-input" role="search">
<input type="text" placeholder="Type to search" />
</div>
<nav role="navigation">
<ul class="summary">
<li class="chapter " data-level="1.1" data-path="../">
<a href="../">
Unreal Engine Guild Book
</a>
</li>
<li class="chapter " data-level="1.2" data-path="../default/">
<a href="../default/">
default
</a>
<ul class="articles">
<li class="chapter " data-level="1.2.1" data-path="../default/00_asset.html">
<a href="../default/00_asset.html">
asset
</a>
</li>
<li class="chapter " data-level="1.2.2" data-path="../default/01_start.html">
<a href="../default/01_start.html">
start
</a>
</li>
<li class="chapter " data-level="1.2.3" data-path="../default/02_install.html">
<a href="../default/02_install.html">
install
</a>
</li>
<li class="chapter " data-level="1.2.4" data-path="../default/03_tips.html">
<a href="../default/03_tips.html">
tips
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="1.3" data-path="../pwsh/">
<a href="../pwsh/">
powershell
</a>
<ul class="articles">
<li class="chapter " data-level="1.3.1" data-path="../pwsh/01_git.html">
<a href="../pwsh/01_git.html">
git
</a>
</li>
<li class="chapter " data-level="1.3.2" data-path="../pwsh/02_ssh.html">
<a href="../pwsh/02_ssh.html">
ssh
</a>
</li>
<li class="chapter " data-level="1.3.3" data-path="../pwsh/03_ttyd.html">
<a href="../pwsh/03_ttyd.html">
ttyd
</a>
</li>
<li class="chapter " data-level="1.3.4" data-path="../pwsh/04_slidev.html">
<a href="../pwsh/04_slidev.html">
slidev
</a>
</li>
<li class="chapter " data-level="1.3.5" data-path="../pwsh/05_aibot.html">
<a href="../pwsh/05_aibot.html">
aibot
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="1.4" data-path="../gasp/">
<a href="../gasp/">
game animation sample
</a>
<ul class="articles">
<li class="chapter " data-level="1.4.1" data-path="../gasp/01_character.html">
<a href="../gasp/01_character.html">
キャラクターを追加する
</a>
</li>
<li class="chapter " data-level="1.4.2" data-path="../gasp/02_jump.html">
<a href="../gasp/02_jump.html">
飛びつける高さを増やす
</a>
</li>
<li class="chapter " data-level="1.4.3" data-path="../gasp/03_vrm.html">
<a href="../gasp/03_vrm.html">
キャラクターを作る
</a>
</li>
<li class="chapter " data-level="1.4.4" data-path="../gasp/04_vmc.html">
<a href="../gasp/04_vmc.html">
モーションキャプチャで動かす
</a>
</li>
<li class="chapter " data-level="1.4.5" data-path="../gasp/05_kawaii.html">
<a href="../gasp/05_kawaii.html">
揺れものを設定する
</a>
</li>
<li class="chapter " data-level="1.4.6" data-path="../gasp/06_camera.html">
<a href="../gasp/06_camera.html">
カメラワークの設定する
</a>
</li>
<li class="chapter " data-level="1.4.7" data-path="../gasp/07_anim.html">
<a href="../gasp/07_anim.html">
アニメーションを作成する
</a>
</li>
<li class="chapter " data-level="1.4.8" data-path="../gasp/11_run.html">
<a href="../gasp/11_run.html">
アニメーションを変更する
</a>
</li>
<li class="chapter " data-level="1.4.9" data-path="../gasp/08_niagara.html">
<a href="../gasp/08_niagara.html">
niagaraでダメージを出す
</a>
</li>
<li class="chapter " data-level="1.4.10" data-path="../gasp/09_chair.html">
<a href="../gasp/09_chair.html">
椅子に座る
</a>
</li>
<li class="chapter " data-level="1.4.11" data-path="../gasp/10_stairs.html">
<a href="../gasp/10_stairs.html">
階段に登る
</a>
</li>
<li class="chapter " data-level="1.4.12" data-path="../gasp/12_weapon.html">
<a href="../gasp/12_weapon.html">
武器を装備する
</a>
</li>
<li class="chapter " data-level="1.4.13" data-path="../gasp/13_chatgpt.html">
<a href="../gasp/13_chatgpt.html">
NPCとの会話をAIにする
</a>
</li>
<li class="chapter " data-level="1.4.14" data-path="../gasp/14_jump.html">
<a href="../gasp/14_jump.html">
ジャンプの高さを変更する
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="1.5" data-path="../crs/">
<a href="../crs/">
control rig sample
</a>
<ul class="articles">
<li class="chapter " data-level="1.5.1" data-path="../crs/01_character.html">
<a href="../crs/01_character.html">
CRでキャラクターを動かす
</a>
</li>
<li class="chapter " data-level="1.5.2" data-path="../crs/02_boss.html">
<a href="../crs/02_boss.html">
ボスを作る
</a>
</li>
<li class="chapter " data-level="1.5.3" data-path="../crs/03_jump.html">
<a href="../crs/03_jump.html">
ボスのジャンプ攻撃を作る
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="1.6" data-path="../city/">
<a href="../city/">
city sample
</a>
<ul class="articles">
<li class="chapter " data-level="1.6.1" data-path="../city/01_remove.html">
<a href="../city/01_remove.html">
惑星形式のmapを作る
</a>
</li>
<li class="chapter " data-level="1.6.2" data-path="../city/02_bridge.html">
<a href="../city/02_bridge.html">
橋を作る
</a>
</li>
<li class="chapter " data-level="1.6.3" data-path="../city/03_house.html">
<a href="../city/03_house.html">
家を作る
</a>
</li>
<li class="chapter " data-level="1.6.4" data-path="../city/04_bgm.html">
<a href="../city/04_bgm.html">
BGMを作る
</a>
</li>
<li class="chapter " data-level="1.6.5" data-path="../city/05_browser.html">
<a href="../city/05_browser.html">
ブラウザを作る
</a>
</li>
<li class="chapter " data-level="1.6.6" data-path="../city/06_spline.html">
<a href="../city/06_spline.html">
惑星を動かす
</a>
</li>
<li class="chapter " data-level="1.6.7" data-path="../city/07_teleport.html">
<a href="../city/07_teleport.html">
惑星間の移動表現
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="1.7" data-path="../camera/">
<a href="../camera/">
gameplay camera
</a>
<ul class="articles">
<li class="chapter " data-level="1.7.1" data-path="../camera/01_close.html">
<a href="../camera/01_close.html">
もっと近づける
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="1.8" data-path="../ui/">
<a href="../ui/">
ui
</a>
<ul class="articles">
<li class="chapter " data-level="1.8.1" data-path="../ui/01_list.html">
<a href="../ui/01_list.html">
listview
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="1.9" data-path="../json/">
<a href="../json/">
json
</a>
<ul class="articles">
<li class="chapter " data-level="1.9.1" data-path="../json/01_varest.html">
<a href="../json/01_varest.html">
apiから情報を取得する
</a>
</li>
<li class="chapter " data-level="1.9.2" data-path="../json/02_atproto.html">
<a href="../json/02_atproto.html">
atprotoでloginする
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="1.10" data-path="../pixel/">
<a href="../pixel/">
pixel streaming
</a>
<ul class="articles">
<li class="chapter " data-level="1.10.1" data-path="../pixel/01_server.html">
<a href="../pixel/01_server.html">
基本事項
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="1.11" data-path="../vrm4u/">
<a href="../vrm4u/">
vrm4u
</a>
<ul class="articles">
<li class="chapter " data-level="1.11.1" data-path="../vrm4u/01_make.html">
<a href="../vrm4u/01_make.html">
キャラクターを作る
</a>
</li>
<li class="chapter " data-level="1.11.2" data-path="../vrm4u/02_yubi.html">
<a href="../vrm4u/02_yubi.html">
指の角度を調整する
</a>
</li>
<li class="chapter " data-level="1.11.3" data-path="../vrm4u/03_hair.html">
<a href="../vrm4u/03_hair.html">
前髪の角度を調整する
</a>
</li>
<li class="chapter " data-level="1.11.4" data-path="../vrm4u/04_outline.html">
<a href="../vrm4u/04_outline.html">
アウトラインを追加する
</a>
</li>
<li class="chapter " data-level="1.11.5" data-path="../vrm4u/05_toon.html">
<a href="../vrm4u/05_toon.html">
トーンを変える
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="1.12" data-path="../plan/">
<a href="../plan/">
有料アセット
</a>
<ul class="articles">
<li class="chapter " data-level="1.12.1" data-path="../plan/01_flying.html">
<a href="../plan/01_flying.html">
superhero fligth animations
</a>
</li>
<li class="chapter " data-level="1.12.2" data-path="../plan/02_uds.html">
<a href="../plan/02_uds.html">
ultra dynamic sky
</a>
</li>
<li class="chapter " data-level="1.12.3" data-path="../plan/03_ocean.html">
<a href="../plan/03_ocean.html">
ocean waves
</a>
</li>
<li class="chapter " data-level="1.12.4" data-path="../plan/04_item.html">
<a href="../plan/04_item.html">
nice interaction system
</a>
</li>
<li class="chapter " data-level="1.12.5" data-path="../plan/05_chair.html">
<a href="../plan/05_chair.html">
replicated interaction kit vol 3
</a>
</li>
<li class="chapter " data-level="1.12.6" data-path="../plan/06_dragonik.html">
<a href="../plan/06_dragonik.html">
dragon ik plugin
</a>
</li>
<li class="chapter " data-level="1.12.7" data-path="../plan/07_wsp.html">
<a href="../plan/07_wsp.html">
worldscape plugin
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="1.13" data-path="../unity/">
<a href="../unity/">
unity
</a>
<ul class="articles">
<li class="chapter " data-level="1.13.1" data-path="../unity/01_fbx.html">
<a href="../unity/01_fbx.html">
animation clipをueで使う
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="1.14" data-path="../blender/">
<a href="../blender/">
blender
</a>
<ul class="articles">
<li class="chapter " data-level="1.14.1" data-path="../blender/01_model.html">
<a href="../blender/01_model.html">
素体を作る
</a>
</li>
<li class="chapter " data-level="1.14.2" data-path="../blender/02_costume.html">
<a href="../blender/02_costume.html">
衣装を着せる
</a>
</li>
<li class="chapter " data-level="1.14.3" data-path="../blender/03_vrm.html">
<a href="../blender/03_vrm.html">
vrmで統合する
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="1.15" data-path="./">
<a href="./">
web
</a>
<ul class="articles">
<li class="chapter " data-level="1.15.1" data-path="01_three.html">
<a href="01_three.html">
glbをwebに表示する
</a>
</li>
<li class="chapter active" data-level="1.15.2" data-path="02_three-vrm.html">
<a href="02_three-vrm.html">
vrmをwebに表示する
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="1.16" data-path="../issue/">
<a href="../issue/">
issue
</a>
<ul class="articles">
<li class="chapter " data-level="1.16.1" data-path="../issue/ue/">
<a href="../issue/ue/">
ue
</a>
<ul class="articles">
<li class="chapter " data-level="1.16.1.1" data-path="../issue/ue/ue_01.html">
<a href="../issue/ue/ue_01.html">
error II-E1001
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="1.16.2" data-path="../issue/gasp/">
<a href="../issue/gasp/">
game animation sample
</a>
<ul class="articles">
<li class="chapter " data-level="1.16.2.1" data-path="../issue/gasp/gasp_01.html">
<a href="../issue/gasp/gasp_01.html">
GameplayCameraをdisableにする
</a>
</li>
<li class="chapter " data-level="1.16.2.2" data-path="../issue/gasp/gasp_02.html">
<a href="../issue/gasp/gasp_02.html">
cameraが急接近する
</a>
</li>
<li class="chapter " data-level="1.16.2.3" data-path="../issue/gasp/gasp_03.html">
<a href="../issue/gasp/gasp_03.html">
characterのcomponentが初期化される
</a>
</li>
<li class="chapter " data-level="1.16.2.4" data-path="../issue/gasp/gasp_04.html">
<a href="../issue/gasp/gasp_04.html">
IA_Sprintのダッシュができなくなる
</a>
</li>
<li class="chapter " data-level="1.16.2.5" data-path="../issue/gasp/gasp_05.html">
<a href="../issue/gasp/gasp_05.html">
traversableが機能しなくなる
</a>
</li>
<li class="chapter " data-level="1.16.2.6" data-path="../issue/gasp/gasp_06.html">
<a href="../issue/gasp/gasp_06.html">
キャラがカメラ視点で勝手に動く
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="1.16.3" data-path="../issue/city/">
<a href="../issue/city/">
city sample
</a>
<ul class="articles">
<li class="chapter " data-level="1.16.3.1" data-path="../issue/city/city_01.html">
<a href="../issue/city/city_01.html">
buildが遅い場合
</a>
</li>
<li class="chapter " data-level="1.16.3.2" data-path="../issue/city/city_02.html">
<a href="../issue/city/city_02.html">
ue5.5ではbuildが通らない
</a>
</li>
<li class="chapter " data-level="1.16.3.3" data-path="../issue/city/city_03.html">
<a href="../issue/city/city_03.html">
問題が起こったときにresetする
</a>
</li>
<li class="chapter " data-level="1.16.3.4" data-path="../issue/city/city_04.html">
<a href="../issue/city/city_04.html">
playerが地面に埋まってしまう
</a>
</li>
<li class="chapter " data-level="1.16.3.5" data-path="../issue/city/city_05.html">
<a href="../issue/city/city_05.html">
他のmapとの統合
</a>
</li>
<li class="chapter " data-level="1.16.3.6" data-path="../issue/city/city_06.html">
<a href="../issue/city/city_06.html">
BGMを変更する
</a>
</li>
<li class="chapter " data-level="1.16.3.7" data-path="../issue/city/city_07.html">
<a href="../issue/city/city_07.html">
表示されなくなったサイト
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="1.16.4" data-path="../issue/blender/">
<a href="../issue/blender/">
blender
</a>
<ul class="articles">
<li class="chapter " data-level="1.16.4.1" data-path="../issue/blender/blender_01.html">
<a href="../issue/blender/blender_01.html">
衣装の背後に黒いチラつきが発生する
</a>
</li>
<li class="chapter " data-level="1.16.4.2" data-path="../issue/blender/blender_02.html">
<a href="../issue/blender/blender_02.html">
ueで読み込むと一部のmaterialが正しく表示されない
</a>
</li>
<li class="chapter " data-level="1.16.4.3" data-path="../issue/blender/blender_03.html">
<a href="../issue/blender/blender_03.html">
髪の毛が頭に追従しなくなる事がある
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="1.16.5" data-path="../issue/vrm4u/">
<a href="../issue/vrm4u/">
vrm4u
</a>
<ul class="articles">
<li class="chapter " data-level="1.16.5.1" data-path="../issue/vrm4u/vrm4u_01.html">
<a href="../issue/vrm4u/vrm4u_01.html">
customで衣装の半分が灰色になる
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="1.16.6" data-path="../issue/wsp/">
<a href="../issue/wsp/">
worldscape plugin
</a>
<ul class="articles">
<li class="chapter " data-level="1.16.6.1" data-path="../issue/wsp/wsp_01.html">
<a href="../issue/wsp/wsp_01.html">
地上のちらつき
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="chapter " data-level="1.17" data-path="../project/">
<a href="../project/">
project
</a>
<ul class="articles">
<li class="chapter " data-level="1.17.1" data-path="../project/01_ep.html">
<a href="../project/01_ep.html">
自己紹介
</a>
</li>
<li class="chapter " data-level="1.17.2" data-path="../project/02_ep.html">
<a href="../project/02_ep.html">
最初の体験
</a>
</li>
<li class="chapter " data-level="1.17.3" data-path="../project/03_ep.html">
<a href="../project/03_ep.html">
毎日プレイ
</a>
</li>
<li class="chapter " data-level="1.17.4" data-path="../project/04_ep.html">
<a href="../project/04_ep.html">
自由と不自由
</a>
</li>
<li class="chapter " data-level="1.17.5" data-path="../project/05_ep.html">
<a href="../project/05_ep.html">
ロードマップ
</a>
</li>
<li class="chapter " data-level="1.17.6" data-path="../project/06_ep.html">
<a href="../project/06_ep.html">
アイテムボックス
</a>
</li>
<li class="chapter " data-level="1.17.7" data-path="../project/07_ep.html">
<a href="../project/07_ep.html">
テストゲーム
</a>
</li>
<li class="chapter " data-level="1.17.8" data-path="../project/01_youtube.html">
<a href="../project/01_youtube.html">
youtube
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="1.18" data-path="../end/">
<a href="../end/">
end
</a>
</li>
<li class="divider"></li>
<li>
<a href="https://github.com/honkit/honkit" target="blank" class="gitbook-link">
Published with HonKit
</a>
</li>
</ul>
</nav>
</div>
<div class="book-body">
<div class="body-inner">
<div class="book-header" role="navigation">
<!-- Title -->
<h1>
<i class="fa fa-circle-o-notch fa-spin"></i>
<a href=".." >vrmをwebに表示する</a>
</h1>
</div>
<div class="page-wrapper" tabindex="-1" role="main">
<div class="page-inner">
<div id="book-search-results">
<div class="search-noresults">
<section class="normal markdown-section">
<h1 id="three-vrm">three-vrm</h1>
<p>今回は<code>react-three-fiber</code>と<code>three-vrm-animation</code>を使います。</p>
<p>react-three-fiberはsceneなどを自動でやってくれて、コードもシンプルになります。</p>
<blockquote>
<p><code>react-three-fiber</code>で書く場合に<code>.vrma</code>の動きがおかしくなりました。私の環境では<code>unity + vrm 1.0</code>でexportしたものを使うと正常に動きました。</p>
</blockquote>
<pre><code class="lang-sh">$ npx create-react-app vrm-model --template typescript
$ npm i
$ npm run start
</code></pre>
<blockquote>
<p>src/pages/vrm-model.tsx</p>
</blockquote>
<pre><code class="lang-ts"><span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> <span class="hljs-variable constant_">THREE</span> <span class="hljs-keyword">from</span> <span class="hljs-string">'three'</span>
<span class="hljs-keyword">import</span> <span class="hljs-title class_">React</span>, { useState, useEffect, useRef } <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
<span class="hljs-keyword">import</span> { <span class="hljs-title class_">OrbitControls</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">'@react-three/drei'</span>
<span class="hljs-keyword">import</span> { useFrame, <span class="hljs-title class_">Canvas</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">'@react-three/fiber'</span>;
<span class="hljs-keyword">import</span> { <span class="hljs-title class_">GLTFLoader</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">'three/examples/jsm/loaders/GLTFLoader'</span>;
<span class="hljs-keyword">import</span> { <span class="hljs-variable constant_">VRM</span>, <span class="hljs-title class_">VRMUtils</span>, <span class="hljs-title class_">VRMLoaderPlugin</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">'@pixiv/three-vrm'</span>;
<span class="hljs-keyword">import</span> { <span class="hljs-title class_">VRMAnimationLoaderPlugin</span>, <span class="hljs-title class_">VRMAnimation</span>, createVRMAnimationClip } <span class="hljs-keyword">from</span> <span class="hljs-string">"@pixiv/three-vrm-animation"</span>;
<span class="hljs-keyword">interface</span> <span class="hljs-title class_">ModelProps</span> {
<span class="hljs-attr">url</span>: <span class="hljs-built_in">string</span>
<span class="hljs-attr">url_anim</span>: <span class="hljs-built_in">string</span>
}
<span class="hljs-keyword">const</span> <span class="hljs-title class_">VRMModel</span>: <span class="hljs-title class_">React</span>.<span class="hljs-property">FC</span><<span class="hljs-title class_">ModelProps</span>> = <span class="hljs-function">(<span class="hljs-params">{ url, url_anim }</span>) =></span> {
<span class="hljs-keyword">const</span> [vrm, setVrm] = useState<<span class="hljs-variable constant_">VRM</span> | <span class="hljs-literal">null</span>>(<span class="hljs-literal">null</span>);
<span class="hljs-keyword">const</span> mixerRef = useRef<<span class="hljs-variable constant_">THREE</span>.<span class="hljs-property">AnimationMixer</span> | <span class="hljs-literal">null</span>>(<span class="hljs-literal">null</span>);
<span class="hljs-title function_">useEffect</span>(<span class="hljs-function">() =></span> {
<span class="hljs-keyword">const</span> loader = <span class="hljs-keyword">new</span> <span class="hljs-title class_">GLTFLoader</span>();
loader.<span class="hljs-title function_">register</span>(<span class="hljs-function">(<span class="hljs-params">parser</span>) =></span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">VRMLoaderPlugin</span>(parser));
loader.<span class="hljs-title function_">register</span>(<span class="hljs-function">(<span class="hljs-params">parser</span>) =></span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">VRMAnimationLoaderPlugin</span>(parser));
loader.<span class="hljs-title function_">load</span>(url, <span class="hljs-function">(<span class="hljs-params">gltf</span>) =></span> {
<span class="hljs-keyword">const</span> vrmModel = gltf.<span class="hljs-property">userData</span>.<span class="hljs-property">vrm</span> <span class="hljs-keyword">as</span> <span class="hljs-variable constant_">VRM</span>;
<span class="hljs-title class_">VRMUtils</span>.<span class="hljs-title function_">removeUnnecessaryJoints</span>(vrmModel.<span class="hljs-property">scene</span>);
<span class="hljs-title function_">setVrm</span>(vrmModel);
<span class="hljs-keyword">const</span> mixer = <span class="hljs-keyword">new</span> <span class="hljs-variable constant_">THREE</span>.<span class="hljs-title class_">AnimationMixer</span>(vrmModel.<span class="hljs-property">scene</span>);
mixerRef.<span class="hljs-property">current</span> = mixer;
loader.<span class="hljs-title function_">load</span>(url_anim, <span class="hljs-function">(<span class="hljs-params">animGltf</span>) =></span> {
<span class="hljs-keyword">const</span> vrmAnimations = animGltf.<span class="hljs-property">userData</span>.<span class="hljs-property">vrmAnimations</span> <span class="hljs-keyword">as</span> <span class="hljs-title class_">VRMAnimation</span>[];
<span class="hljs-keyword">if</span> (vrmAnimations && vrmAnimations.<span class="hljs-property">length</span> > <span class="hljs-number">0</span>) {
<span class="hljs-keyword">const</span> clip = <span class="hljs-title function_">createVRMAnimationClip</span>(vrmAnimations[<span class="hljs-number">0</span>], vrmModel);
mixer.<span class="hljs-title function_">clipAction</span>(clip).<span class="hljs-title function_">play</span>();
}
});
});
}, [url, url_anim]);
<span class="hljs-title function_">useFrame</span>(<span class="hljs-function">(<span class="hljs-params">state, delta</span>) =></span> {
<span class="hljs-keyword">if</span> (mixerRef.<span class="hljs-property">current</span>) mixerRef.<span class="hljs-property">current</span>.<span class="hljs-title function_">update</span>(delta);
<span class="hljs-keyword">if</span> (vrm) vrm.<span class="hljs-title function_">update</span>(delta);
});
<span class="hljs-keyword">return</span> vrm ? <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">primitive</span> <span class="hljs-attr">object</span>=<span class="hljs-string">{vrm.scene}</span> /></span></span> : <span class="hljs-literal">null</span>;
};
<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> <span class="hljs-title function_">VRMModelCanvas</span> = (<span class="hljs-params"></span>) => {
<span class="hljs-keyword">return</span> (
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{{</span> <span class="hljs-attr">height:</span> '<span class="hljs-attr">100vh</span>', <span class="hljs-attr">width:</span> '<span class="hljs-attr">100vw</span>' }}></span>
<span class="hljs-tag"><<span class="hljs-name">Canvas</span>
<span class="hljs-attr">shadows</span>
<span class="hljs-attr">gl</span>=<span class="hljs-string">{{</span>
//<span class="hljs-attr">toneMapping:</span> <span class="hljs-attr">THREE.ACESFilmicToneMapping</span>,
//<span class="hljs-attr">toneMapping:</span> <span class="hljs-attr">THREE.ReinhardToneMapping</span>,
<span class="hljs-attr">toneMapping:</span> <span class="hljs-attr">THREE.NeutralToneMapping</span>,
<span class="hljs-attr">toneMappingExposure:</span> <span class="hljs-attr">1.5</span>,
<span class="hljs-attr">alpha:</span> <span class="hljs-attr">true</span>,
<span class="hljs-attr">powerPreference:</span> "<span class="hljs-attr">high-performance</span>",
<span class="hljs-attr">antialias:</span> <span class="hljs-attr">true</span>,
//<span class="hljs-attr">stencil:</span> <span class="hljs-attr">false</span>,
//<span class="hljs-attr">depth:</span> <span class="hljs-attr">false</span>
}}
<span class="hljs-attr">camera</span>=<span class="hljs-string">{{</span> <span class="hljs-attr">position:</span> [<span class="hljs-attr">1</span>, <span class="hljs-attr">1</span>, <span class="hljs-attr">1</span>] }}></span>
<span class="hljs-tag"><<span class="hljs-name">directionalLight</span>
<span class="hljs-attr">color</span>=<span class="hljs-string">"white"</span>
<span class="hljs-attr">castShadow</span>
<span class="hljs-attr">position</span>=<span class="hljs-string">{[0,</span> <span class="hljs-attr">10</span>, <span class="hljs-attr">0</span>]}
<span class="hljs-attr">intensity</span>=<span class="hljs-string">{1.5}</span>
<span class="hljs-attr">shadow-mapSize</span>=<span class="hljs-string">{[1024,</span> <span class="hljs-attr">1024</span>]}/></span>
<span class="hljs-tag"><<span class="hljs-name">OrbitControls</span> /></span>
<span class="hljs-tag"><<span class="hljs-name">ambientLight</span> <span class="hljs-attr">intensity</span>=<span class="hljs-string">{1}</span> /></span>
<span class="hljs-tag"><<span class="hljs-name">pointLight</span> <span class="hljs-attr">position</span>=<span class="hljs-string">{[10,</span> <span class="hljs-attr">10</span>, <span class="hljs-attr">10</span>]} /></span>
<span class="hljs-tag"><<span class="hljs-name">VRMModel</span> <span class="hljs-attr">url</span>=<span class="hljs-string">"./models/default.vrm"</span> <span class="hljs-attr">url_anim</span>=<span class="hljs-string">"./models/default.vrma"</span> /></span>
<span class="hljs-tag"></<span class="hljs-name">Canvas</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></span>
)
}
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-title class_">VRMModelCanvas</span>;
</code></pre>
<p>重要な箇所は以下のポイントです。</p>
<pre><code class="lang-html"><span class="hljs-tag"><<span class="hljs-name">VRMModel</span> <span class="hljs-attr">url</span>=<span class="hljs-string">"./models/default.vrm"</span> <span class="hljs-attr">url_anim</span>=<span class="hljs-string">"./models/default.vrma"</span> /></span>
</code></pre>
<p>ファイルはこの場所から読み込みますので、ダウンロードする場合は<a href="https://vroid.pixiv.help/hc/ja/articles/31627266179865-%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%E3%83%A2%E3%83%87%E3%83%AB%E3%81%AE%E5%88%A9%E7%94%A8%E6%96%B9%E6%B3%95%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6%E7%9F%A5%E3%82%8A%E3%81%9F%E3%81%84" target="_blank">.vrm</a>, <a href="https://booth.pm/ja/items/5512385" target="_blank">.vrma</a>をここに置きます。</p>
<blockquote>
<p>src/App.tsx</p>
</blockquote>
<pre><code class="lang-ts"><span class="hljs-keyword">import</span> <span class="hljs-title class_">React</span> <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>
<span class="hljs-keyword">import</span> <span class="hljs-title class_">VRMModelCanvas</span> <span class="hljs-keyword">from</span> <span class="hljs-string">'./pages/vrm_model'</span>
<span class="hljs-keyword">const</span> <span class="hljs-title function_">App</span> = (<span class="hljs-params"></span>) => {
<span class="hljs-keyword">return</span> (
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">VRMModelCanvas</span>/></span></span>
)
}
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-title class_">App</span>;
</code></pre>
<blockquote>
<p>package.json</p>
</blockquote>
<pre><code class="lang-json">{
<span class="hljs-string">"name"</span>: <span class="hljs-string">"vrm-model"</span>,
<span class="hljs-string">"version"</span>: <span class="hljs-string">"0.1.0"</span>,
<span class="hljs-string">"private"</span>: <span class="hljs-literal">true</span>,
<span class="hljs-string">"dependencies"</span>: {
<span class="hljs-string">"@pixiv/three-vrm"</span>: <span class="hljs-string">"^3.0.0"</span>,
<span class="hljs-string">"@pixiv/three-vrm-animation"</span>: <span class="hljs-string">"^3.0.0"</span>,
<span class="hljs-string">"@react-three/drei"</span>: <span class="hljs-string">"^9.109.2"</span>,
<span class="hljs-string">"@react-three/fiber"</span>: <span class="hljs-string">"^8.16.8"</span>,
<span class="hljs-string">"@react-three/postprocessing"</span>: <span class="hljs-string">"^2.16.2"</span>,
<span class="hljs-string">"@testing-library/jest-dom"</span>: <span class="hljs-string">"^5.17.0"</span>,
<span class="hljs-string">"@testing-library/react"</span>: <span class="hljs-string">"^13.4.0"</span>,
<span class="hljs-string">"@testing-library/user-event"</span>: <span class="hljs-string">"^13.5.0"</span>,
<span class="hljs-string">"@types/jest"</span>: <span class="hljs-string">"^27.5.2"</span>,
<span class="hljs-string">"@types/node"</span>: <span class="hljs-string">"^16.18.104"</span>,
<span class="hljs-string">"@types/react"</span>: <span class="hljs-string">"^18.3.3"</span>,
<span class="hljs-string">"@types/react-dom"</span>: <span class="hljs-string">"^18.3.0"</span>,
<span class="hljs-string">"@types/three"</span>: <span class="hljs-string">"^0.167.1"</span>,
<span class="hljs-string">"react"</span>: <span class="hljs-string">"^18.3.1"</span>,
<span class="hljs-string">"react-dom"</span>: <span class="hljs-string">"^18.3.1"</span>,
<span class="hljs-string">"react-scripts"</span>: <span class="hljs-string">"5.0.1"</span>,
<span class="hljs-string">"three"</span>: <span class="hljs-string">"^0.167.1"</span>,
<span class="hljs-string">"three-stdlib"</span>: <span class="hljs-string">"^2.30.5"</span>,
<span class="hljs-string">"typescript"</span>: <span class="hljs-string">"^4.9.5"</span>,
<span class="hljs-string">"web-vitals"</span>: <span class="hljs-string">"^2.1.4"</span>
},
<span class="hljs-string">"scripts"</span>: {
<span class="hljs-string">"start"</span>: <span class="hljs-string">"react-scripts start"</span>,
<span class="hljs-string">"build"</span>: <span class="hljs-string">"react-scripts build"</span>,
<span class="hljs-string">"test"</span>: <span class="hljs-string">"react-scripts test"</span>,
<span class="hljs-string">"eject"</span>: <span class="hljs-string">"react-scripts eject"</span>
},
<span class="hljs-string">"eslintConfig"</span>: {
<span class="hljs-string">"extends"</span>: [
<span class="hljs-string">"react-app"</span>,
<span class="hljs-string">"react-app/jest"</span>
]
},
<span class="hljs-string">"browserslist"</span>: {
<span class="hljs-string">"production"</span>: [
<span class="hljs-string">">0.2%"</span>,
<span class="hljs-string">"not dead"</span>,
<span class="hljs-string">"not op_mini all"</span>
],
<span class="hljs-string">"development"</span>: [
<span class="hljs-string">"last 1 chrome version"</span>,
<span class="hljs-string">"last 1 firefox version"</span>,
<span class="hljs-string">"last 1 safari version"</span>
]
}
}
</code></pre>
<blockquote>
<p>tsconfig.json</p>
</blockquote>
<pre><code class="lang-json">{
<span class="hljs-string">"compilerOptions"</span>: {
<span class="hljs-string">"target"</span>: <span class="hljs-string">"es5"</span>,
<span class="hljs-string">"lib"</span>: [
<span class="hljs-string">"dom"</span>,
<span class="hljs-string">"dom.iterable"</span>,
<span class="hljs-string">"esnext"</span>
],
<span class="hljs-string">"allowJs"</span>: <span class="hljs-literal">true</span>,
<span class="hljs-string">"skipLibCheck"</span>: <span class="hljs-literal">true</span>,
<span class="hljs-string">"esModuleInterop"</span>: <span class="hljs-literal">true</span>,
<span class="hljs-string">"allowSyntheticDefaultImports"</span>: <span class="hljs-literal">true</span>,
<span class="hljs-string">"strict"</span>: <span class="hljs-literal">true</span>,
<span class="hljs-string">"forceConsistentCasingInFileNames"</span>: <span class="hljs-literal">true</span>,
<span class="hljs-string">"noFallthroughCasesInSwitch"</span>: <span class="hljs-literal">true</span>,
<span class="hljs-string">"module"</span>: <span class="hljs-string">"esnext"</span>,
<span class="hljs-string">"moduleResolution"</span>: <span class="hljs-string">"node"</span>,
<span class="hljs-string">"resolveJsonModule"</span>: <span class="hljs-literal">true</span>,
<span class="hljs-string">"isolatedModules"</span>: <span class="hljs-literal">true</span>,
<span class="hljs-string">"noEmit"</span>: <span class="hljs-literal">true</span>,
<span class="hljs-string">"jsx"</span>: <span class="hljs-string">"react-jsx"</span>
},
<span class="hljs-string">"include"</span>: [
<span class="hljs-string">"src"</span>
]
}
</code></pre>
</section>
</div>
<div class="search-results">
<div class="has-results">
<h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
<ul class="search-results-list"></ul>
</div>
<div class="no-results">
<h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
</div>
</div>
</div>
</div>
</div>
</div>
<a href="01_three.html" class="navigation navigation-prev " aria-label="Previous page: glbをwebに表示する">
<i class="fa fa-angle-left"></i>
</a>
<a href="../issue/" class="navigation navigation-next " aria-label="Next page: issue">
<i class="fa fa-angle-right"></i>
</a>
</div>
<script>
var gitbook = gitbook || [];
gitbook.push(function() {
gitbook.page.hasChanged({"page":{"title":"vrmをwebに表示する","level":"1.15.2","depth":2,"next":{"title":"issue","level":"1.16","depth":1,"path":"issue/README.md","ref":"issue/README.md","articles":[{"title":"ue","level":"1.16.1","depth":2,"path":"issue/ue/README.md","ref":"issue/ue/README.md","articles":[{"title":"error II-E1001","level":"1.16.1.1","depth":3,"path":"issue/ue/ue_01.md","ref":"issue/ue/ue_01.md","articles":[]}]},{"title":"game animation sample","level":"1.16.2","depth":2,"path":"issue/gasp/README.md","ref":"issue/gasp/README.md","articles":[{"title":"GameplayCameraをdisableにする","level":"1.16.2.1","depth":3,"path":"issue/gasp/gasp_01.md","ref":"issue/gasp/gasp_01.md","articles":[]},{"title":"cameraが急接近する","level":"1.16.2.2","depth":3,"path":"issue/gasp/gasp_02.md","ref":"issue/gasp/gasp_02.md","articles":[]},{"title":"characterのcomponentが初期化される","level":"1.16.2.3","depth":3,"path":"issue/gasp/gasp_03.md","ref":"issue/gasp/gasp_03.md","articles":[]},{"title":"IA_Sprintのダッシュができなくなる","level":"1.16.2.4","depth":3,"path":"issue/gasp/gasp_04.md","ref":"issue/gasp/gasp_04.md","articles":[]},{"title":"traversableが機能しなくなる","level":"1.16.2.5","depth":3,"path":"issue/gasp/gasp_05.md","ref":"issue/gasp/gasp_05.md","articles":[]},{"title":"キャラがカメラ視点で勝手に動く","level":"1.16.2.6","depth":3,"path":"issue/gasp/gasp_06.md","ref":"issue/gasp/gasp_06.md","articles":[]}]},{"title":"city sample","level":"1.16.3","depth":2,"path":"issue/city/README.md","ref":"issue/city/README.md","articles":[{"title":"buildが遅い場合","level":"1.16.3.1","depth":3,"path":"issue/city/city_01.md","ref":"issue/city/city_01.md","articles":[]},{"title":"ue5.5ではbuildが通らない","level":"1.16.3.2","depth":3,"path":"issue/city/city_02.md","ref":"issue/city/city_02.md","articles":[]},{"title":"問題が起こったときにresetする","level":"1.16.3.3","depth":3,"path":"issue/city/city_03.md","ref":"issue/city/city_03.md","articles":[]},{"title":"playerが地面に埋まってしまう","level":"1.16.3.4","depth":3,"path":"issue/city/city_04.md","ref":"issue/city/city_04.md","articles":[]},{"title":"他のmapとの統合","level":"1.16.3.5","depth":3,"path":"issue/city/city_05.md","ref":"issue/city/city_05.md","articles":[]},{"title":"BGMを変更する","level":"1.16.3.6","depth":3,"path":"issue/city/city_06.md","ref":"issue/city/city_06.md","articles":[]},{"title":"表示されなくなったサイト","level":"1.16.3.7","depth":3,"path":"issue/city/city_07.md","ref":"issue/city/city_07.md","articles":[]}]},{"title":"blender","level":"1.16.4","depth":2,"path":"issue/blender/README.md","ref":"issue/blender/README.md","articles":[{"title":"衣装の背後に黒いチラつきが発生する","level":"1.16.4.1","depth":3,"path":"issue/blender/blender_01.md","ref":"issue/blender/blender_01.md","articles":[]},{"title":"ueで読み込むと一部のmaterialが正しく表示されない","level":"1.16.4.2","depth":3,"path":"issue/blender/blender_02.md","ref":"issue/blender/blender_02.md","articles":[]},{"title":"髪の毛が頭に追従しなくなる事がある","level":"1.16.4.3","depth":3,"path":"issue/blender/blender_03.md","ref":"issue/blender/blender_03.md","articles":[]}]},{"title":"vrm4u","level":"1.16.5","depth":2,"path":"issue/vrm4u/README.md","ref":"issue/vrm4u/README.md","articles":[{"title":"customで衣装の半分が灰色になる","level":"1.16.5.1","depth":3,"path":"issue/vrm4u/vrm4u_01.md","ref":"issue/vrm4u/vrm4u_01.md","articles":[]}]},{"title":"worldscape plugin","level":"1.16.6","depth":2,"path":"issue/wsp/README.md","ref":"issue/wsp/README.md","articles":[{"title":"地上のちらつき","level":"1.16.6.1","depth":3,"path":"issue/wsp/wsp_01.md","ref":"issue/wsp/wsp_01.md","articles":[]}]}]},"previous":{"title":"glbをwebに表示する","level":"1.15.1","depth":2,"path":"web/01_three.md","ref":"web/01_three.md","articles":[]},"dir":"ltr"},"config":{"gitbook":"*","theme":"default","variables":{},"plugins":["livereload"],"pluginsConfig":{"livereload":{},"highlight":{},"search":{},"lunr":{"maxIndexSize":1000000,"ignoreSpecialCharacters":false},"fontsettings":{"theme":"white","family":"sans","size":2},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56},"embedFonts":false},"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"}},"file":{"path":"web/02_three-vrm.md","mtime":"2025-03-17T04:08:48.762Z","type":"markdown"},"gitbook":{"version":"6.0.2","time":"2025-05-07T15:46:58.825Z"},"basePath":"..","book":{"language":""}});
});
</script>
</div>
<noscript>
<style>
.honkit-cloak {
display: block !important;
}
</style>
</noscript>
<script>
// Restore sidebar state as critical path for prevent layout shift
function __init__getSidebarState(defaultValue){
var baseKey = "";
var key = baseKey + ":sidebar";
try {
var value = localStorage[key];
if (value === undefined) {
return defaultValue;
}
var parsed = JSON.parse(value);
return parsed == null ? defaultValue : parsed;
} catch (e) {
return defaultValue;
}
}
function __init__restoreLastSidebarState() {
var isMobile = window.matchMedia("(max-width: 600px)").matches;
if (isMobile) {
// Init last state if not mobile
return;
}
var sidebarState = __init__getSidebarState(true);
var book = document.querySelector(".book");
// Show sidebar if it enabled
if (sidebarState && book) {
book.classList.add("without-animation", "with-summary");
}
}
try {
__init__restoreLastSidebarState();
} finally {
var book = document.querySelector(".book");
book.classList.remove("honkit-cloak");
}
</script>
<script src="../gitbook/gitbook.js"></script>
<script src="../gitbook/theme.js"></script>
<script src="../gitbook/gitbook-plugin-livereload/plugin.js"></script>
<script src="../gitbook/gitbook-plugin-search/search-engine.js"></script>
<script src="../gitbook/gitbook-plugin-search/search.js"></script>
<script src="../gitbook/gitbook-plugin-lunr/lunr.min.js"></script>
<script src="../gitbook/gitbook-plugin-lunr/search-lunr.js"></script>
<script src="../gitbook/@honkit/honkit-plugin-fontsettings/fontsettings.js"></script>
</body>
</html>