1977 lines
57 KiB
HTML
1977 lines
57 KiB
HTML
|
|
<!DOCTYPE HTML>
|
|
<html lang="" >
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>glbを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="02_three-vrm.html" />
|
|
|
|
|
|
<link rel="prev" href="./" />
|
|
|
|
|
|
</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 active" data-level="1.15.1" data-path="01_three.html">
|
|
|
|
<a href="01_three.html">
|
|
|
|
|
|
glbをwebに表示する
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
<li class="chapter " 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=".." >glbを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="threejs">three.js</h1>
|
|
<p>reactの<code>tsx</code>で書きます。</p>
|
|
<pre><code class="lang-sh">$ npx create-react-app galaxy --template typescript
|
|
</code></pre>
|
|
<p>これで準備はできましたが、設定ファイルを見てみます。</p>
|
|
<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>
|
|
<p><code>es5</code>, <code>react-jsx</code>を使っているようです。</p>
|
|
<p>buildなどはwebpackではなく<code>react-scripts</code>ですね。</p>
|
|
<blockquote>
|
|
<p>package.json</p>
|
|
</blockquote>
|
|
<pre><code class="lang-json"> <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>
|
|
}
|
|
</code></pre>
|
|
<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-string">'./App.css'</span>;
|
|
<span class="hljs-keyword">import</span> { <span class="hljs-title class_">ThreeFiberGalaxy</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">'./pages/galaxy'</span>;
|
|
|
|
<span class="hljs-keyword">function</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">ThreeFiberGalaxy</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>src/pages/galaxy.tsx</p>
|
|
</blockquote>
|
|
<pre><code class="lang-ts"><span class="hljs-comment">// https://gist.github.com/artokun/fb7f0c68a01ba5d9813abb3ccce254c4</span>
|
|
|
|
<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_">Points</span>, useGLTF } <span class="hljs-keyword">from</span> <span class="hljs-string">'@react-three/drei'</span>
|
|
<span class="hljs-keyword">import</span> { <span class="hljs-variable constant_">GLTF</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">'three-stdlib'</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> { useMemo, useRef } <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>
|
|
<span class="hljs-keyword">import</span> { <span class="hljs-title class_">EffectComposer</span>, <span class="hljs-title class_">SelectiveBloom</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">'@react-three/postprocessing'</span>
|
|
|
|
<span class="hljs-keyword">type</span> <span class="hljs-title class_">GLTFResult</span> = <span class="hljs-variable constant_">GLTF</span> & {
|
|
<span class="hljs-attr">nodes</span>: {
|
|
<span class="hljs-title class_">Object</span><span class="hljs-attr">_2</span>: <span class="hljs-variable constant_">THREE</span>.<span class="hljs-property">Mesh</span>
|
|
}
|
|
<span class="hljs-attr">materials</span>: {
|
|
[<span class="hljs-string">'Scene_-_Root'</span>]: <span class="hljs-variable constant_">THREE</span>.<span class="hljs-property">PointsMaterial</span>
|
|
}
|
|
}
|
|
|
|
<span class="hljs-keyword">export</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">Galaxy</span>(<span class="hljs-params"><span class="hljs-attr">props</span>: JSX.<span class="hljs-title class_">IntrinsicElements</span>[<span class="hljs-string">'group'</span>]</span>) {
|
|
<span class="hljs-keyword">const</span> ref = useRef<<span class="hljs-variable constant_">THREE</span>.<span class="hljs-property">Group</span>>(<span class="hljs-literal">null</span>!)
|
|
<span class="hljs-keyword">const</span> galaxyCenterLightRef = useRef<<span class="hljs-variable constant_">THREE</span>.<span class="hljs-property">PointLight</span>>(<span class="hljs-literal">null</span>!)
|
|
<span class="hljs-keyword">const</span> { nodes } = <span class="hljs-title function_">useGLTF</span>(<span class="hljs-string">'./models/galaxy.glb'</span>) <span class="hljs-keyword">as</span> <span class="hljs-title class_">GLTFResult</span>
|
|
<span class="hljs-keyword">const</span> [positions, colors] = <span class="hljs-title function_">useMemo</span>(<span class="hljs-function">() =></span> {
|
|
nodes.<span class="hljs-property">Object_2</span>.<span class="hljs-property">geometry</span>.<span class="hljs-title function_">center</span>()
|
|
<span class="hljs-keyword">const</span> positions = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Float32Array</span>(
|
|
nodes.<span class="hljs-property">Object_2</span>.<span class="hljs-property">geometry</span>.<span class="hljs-property">attributes</span>.<span class="hljs-property">position</span>.<span class="hljs-property">array</span>.<span class="hljs-property">buffer</span>
|
|
)
|
|
<span class="hljs-keyword">const</span> colors = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Float32Array</span>(positions.<span class="hljs-property">length</span>)
|
|
|
|
<span class="hljs-keyword">const</span> <span class="hljs-title function_">getDistanceToCenter</span> = (<span class="hljs-params"><span class="hljs-attr">x</span>: <span class="hljs-built_in">number</span>, <span class="hljs-attr">y</span>: <span class="hljs-built_in">number</span>, <span class="hljs-attr">z</span>: <span class="hljs-built_in">number</span></span>) =>
|
|
<span class="hljs-title class_">Math</span>.<span class="hljs-title function_">sqrt</span>(x * x + y * y + z * z)
|
|
|
|
<span class="hljs-comment">// make colors closer to 0,0,0 be more reddish and colors further away be more blueish</span>
|
|
<span class="hljs-keyword">const</span> color = <span class="hljs-keyword">new</span> <span class="hljs-variable constant_">THREE</span>.<span class="hljs-title class_">Color</span>()
|
|
<span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> i = <span class="hljs-number">0</span>; i < positions.<span class="hljs-property">length</span>; i += <span class="hljs-number">3</span>) {
|
|
<span class="hljs-keyword">const</span> x = positions[i]
|
|
<span class="hljs-keyword">const</span> y = positions[i + <span class="hljs-number">1</span>]
|
|
<span class="hljs-keyword">const</span> z = positions[i + <span class="hljs-number">2</span>]
|
|
<span class="hljs-keyword">const</span> distanceToCenter = <span class="hljs-title function_">getDistanceToCenter</span>(x, y, z)
|
|
<span class="hljs-keyword">const</span> normalizedDistanceToCenter = distanceToCenter / <span class="hljs-number">100</span>
|
|
|
|
<span class="hljs-comment">// make colors closer to 0,0,0 be more reddish and colors further away be more blueish (do not use hsl)</span>
|
|
<span class="hljs-comment">// color.setHSL(</span>
|
|
<span class="hljs-comment">// (0.15 * (0.21 + Math.cos(distanceToCenter * 0.02))) / 2,</span>
|
|
<span class="hljs-comment">// 0.75,</span>
|
|
<span class="hljs-comment">// 0.6</span>
|
|
<span class="hljs-comment">// )</span>
|
|
color.<span class="hljs-title function_">setRGB</span>(
|
|
<span class="hljs-title class_">Math</span>.<span class="hljs-title function_">cos</span>(normalizedDistanceToCenter),
|
|
<span class="hljs-variable constant_">THREE</span>.<span class="hljs-property">MathUtils</span>.<span class="hljs-title function_">randFloat</span>(<span class="hljs-number">0</span>, <span class="hljs-number">0.8</span>),
|
|
<span class="hljs-title class_">Math</span>.<span class="hljs-title function_">sin</span>(normalizedDistanceToCenter)
|
|
)
|
|
color.<span class="hljs-title function_">toArray</span>(colors, i)
|
|
}
|
|
|
|
<span class="hljs-keyword">return</span> [positions, colors]
|
|
}, [nodes])
|
|
<span class="hljs-comment">//const starTexture = useLoader(THREE.TextureLoader, '/star.png')</span>
|
|
|
|
<span class="hljs-comment">// slowly rotate the galaxy</span>
|
|
<span class="hljs-title function_">useFrame</span>(<span class="hljs-function">(<span class="hljs-params">{ clock }</span>) =></span> {
|
|
ref.<span class="hljs-property">current</span>.<span class="hljs-property">rotation</span>.<span class="hljs-property">z</span> = clock.<span class="hljs-title function_">getElapsedTime</span>() / <span class="hljs-number">5</span>
|
|
<span class="hljs-comment">// zoom in and out</span>
|
|
<span class="hljs-comment">// ref.current.scale.setScalar(Math.sin(clock.getElapsedTime() / 2) + 1.5)</span>
|
|
})
|
|
|
|
<span class="hljs-comment">// make particles glow</span>
|
|
|
|
<span class="hljs-keyword">return</span> (
|
|
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">group</span> {<span class="hljs-attr">...props</span>} <span class="hljs-attr">dispose</span>=<span class="hljs-string">{null}</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">{ref}</span>></span>
|
|
<span class="hljs-tag"><<span class="hljs-name">pointLight</span>
|
|
<span class="hljs-attr">position</span>=<span class="hljs-string">{[0,</span> <span class="hljs-attr">0</span>, <span class="hljs-attr">0</span>]}
|
|
<span class="hljs-attr">ref</span>=<span class="hljs-string">{galaxyCenterLightRef}</span>
|
|
<span class="hljs-attr">intensity</span>=<span class="hljs-string">{0.5}</span>
|
|
/></span>
|
|
<span class="hljs-tag"><<span class="hljs-name">Points</span> <span class="hljs-attr">scale</span>=<span class="hljs-string">{0.05}</span> <span class="hljs-attr">positions</span>=<span class="hljs-string">{positions}</span> <span class="hljs-attr">colors</span>=<span class="hljs-string">{colors}</span>></span>
|
|
<span class="hljs-tag"><<span class="hljs-name">pointsMaterial</span>
|
|
//<span class="hljs-attr">map</span>=<span class="hljs-string">{starTexture}</span>
|
|
<span class="hljs-attr">transparent</span>
|
|
<span class="hljs-attr">depthWrite</span>=<span class="hljs-string">{false}</span>
|
|
<span class="hljs-attr">vertexColors</span>
|
|
<span class="hljs-attr">opacity</span>=<span class="hljs-string">{0.4}</span>
|
|
<span class="hljs-attr">depthTest</span>
|
|
<span class="hljs-attr">size</span>=<span class="hljs-string">{0.01}</span>
|
|
/></span>
|
|
<span class="hljs-tag"></<span class="hljs-name">Points</span>></span>
|
|
<span class="hljs-tag"><<span class="hljs-name">EffectComposer</span> <span class="hljs-attr">autoClear</span>=<span class="hljs-string">{false}</span>></span>
|
|
<span class="hljs-tag"><<span class="hljs-name">SelectiveBloom</span>
|
|
<span class="hljs-attr">intensity</span>=<span class="hljs-string">{2}</span>
|
|
<span class="hljs-attr">luminanceThreshold</span>=<span class="hljs-string">{0.001}</span>
|
|
<span class="hljs-attr">luminanceSmoothing</span>=<span class="hljs-string">{0.225}</span>
|
|
<span class="hljs-attr">lights</span>=<span class="hljs-string">{[galaxyCenterLightRef]}</span>
|
|
/></span>
|
|
<span class="hljs-tag"></<span class="hljs-name">EffectComposer</span>></span>
|
|
<span class="hljs-tag"></<span class="hljs-name">group</span>></span></span>
|
|
)
|
|
}
|
|
|
|
useGLTF.<span class="hljs-title function_">preload</span>(<span class="hljs-string">'./models/galaxy.glb'</span>)
|
|
</code></pre>
|
|
<p><code>App.tsx</code>で読み込むため以下を追記します。</p>
|
|
<blockquote>
|
|
<p>src/pages/galaxy.tsx</p>
|
|
</blockquote>
|
|
<pre><code class="lang-ts"><span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> <span class="hljs-title function_">ThreeFiberGalaxy</span> = (<span class="hljs-params"></span>) => {
|
|
<span class="hljs-keyword">return</span> (
|
|
<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">Canvas</span>></span>
|
|
<span class="hljs-tag"><<span class="hljs-name">ambientLight</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">Galaxy</span> <span class="hljs-attr">position</span>=<span class="hljs-string">{[0,</span> <span class="hljs-attr">0</span>, <span class="hljs-attr">0</span>]} /></span>
|
|
<span class="hljs-tag"></<span class="hljs-name">Canvas</span>></span></span>
|
|
)
|
|
}
|
|
</code></pre>
|
|
<p><code>.glb</code>は<a href="https://sketchfab.com/3d-models/need-some-space-d6521362b37b48e3a82bce4911409303" target="_blank">こちら</a>からダウンロードして、<code>public/models/galaxy.glb</code>に置いてください。</p>
|
|
<pre><code class="lang-sh">$ npm run start
|
|
</code></pre>
|
|
<p>controlを追加します。</p>
|
|
<pre><code class="lang-sh">import { Points, useGLTF, OrbitControls } from <span class="hljs-string">'@react-three/drei'</span>
|
|
|
|
<span class="hljs-built_in">export</span> const ThreeFiberGalaxy = () => {
|
|
<span class="hljs-built_in">return</span> (
|
|
<Canvas>
|
|
<OrbitControls />
|
|
<ambientLight />
|
|
<pointLight position={[10, 10, 10]} />
|
|
<Galaxy position={[0, 0, 0]} />
|
|
</Canvas>
|
|
)
|
|
}
|
|
</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="./" class="navigation navigation-prev " aria-label="Previous page: web">
|
|
<i class="fa fa-angle-left"></i>
|
|
</a>
|
|
|
|
|
|
<a href="02_three-vrm.html" class="navigation navigation-next " aria-label="Next page: vrmをwebに表示する">
|
|
<i class="fa fa-angle-right"></i>
|
|
</a>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<script>
|
|
var gitbook = gitbook || [];
|
|
gitbook.push(function() {
|
|
gitbook.page.hasChanged({"page":{"title":"glbをwebに表示する","level":"1.15.1","depth":2,"next":{"title":"vrmをwebに表示する","level":"1.15.2","depth":2,"path":"web/02_three-vrm.md","ref":"web/02_three-vrm.md","articles":[]},"previous":{"title":"web","level":"1.15","depth":1,"path":"web/README.md","ref":"web/README.md","articles":[{"title":"glbをwebに表示する","level":"1.15.1","depth":2,"path":"web/01_three.md","ref":"web/01_three.md","articles":[]},{"title":"vrmをwebに表示する","level":"1.15.2","depth":2,"path":"web/02_three-vrm.md","ref":"web/02_three-vrm.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/01_three.md","mtime":"2025-03-17T04:08:48.763Z","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>
|
|
|