world/book/_book/web/01_three.html
2025-05-12 05:38:44 +09:00

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">&lt;<span class="hljs-name">ThreeFiberGalaxy</span> /&gt;</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> &amp; {
<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&lt;<span class="hljs-variable constant_">THREE</span>.<span class="hljs-property">Group</span>&gt;(<span class="hljs-literal">null</span>!)
<span class="hljs-keyword">const</span> galaxyCenterLightRef = useRef&lt;<span class="hljs-variable constant_">THREE</span>.<span class="hljs-property">PointLight</span>&gt;(<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">() =&gt;</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>) =&gt;
<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 &lt; 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>) =&gt;</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">&lt;<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>&gt;</span>
<span class="hljs-tag">&lt;<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>
/&gt;</span>
<span class="hljs-tag">&lt;<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>&gt;</span>
<span class="hljs-tag">&lt;<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>
/&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">Points</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">EffectComposer</span> <span class="hljs-attr">autoClear</span>=<span class="hljs-string">{false}</span>&gt;</span>
<span class="hljs-tag">&lt;<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>
/&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">EffectComposer</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">group</span>&gt;</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>) =&gt; {
<span class="hljs-keyword">return</span> (
<span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Canvas</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">ambientLight</span> /&gt;</span>
<span class="hljs-tag">&lt;<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>]} /&gt;</span>
<span class="hljs-tag">&lt;<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>]} /&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">Canvas</span>&gt;</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 = () =&gt; {
<span class="hljs-built_in">return</span> (
&lt;Canvas&gt;
&lt;OrbitControls /&gt;
&lt;ambientLight /&gt;
&lt;pointLight position={[10, 10, 10]} /&gt;
&lt;Galaxy position={[0, 0, 0]} /&gt;
&lt;/Canvas&gt;
)
}
</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>