1983 lines
62 KiB
HTML
1983 lines
62 KiB
HTML
|
|
<!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>
|
|
|