ページ毎の制御を実装しよう
各ページに異なるメッシュを配置し、それぞれに特定の制御を加えたい場合は多々あります。 そのような場合、ページごとの処理を個別のファイルに分けて記述します。
ページ毎に制御を変えたい場合は以下の手順で行ってください。
ページ毎に異なる制御を実装する手順
JS ファイルの作成と配置
src/scripts/page はページ毎に異なる処理を記述するための JS ファイルを格納するためのフォルダです。
例えば、ページの種類が２種類（トップページと下層ページ）ある場合は home.js と detail.js を上記のフォルダに作成します。
export default async function () {
console.log("home.jsが実行されました。");
}export default async function () {
console.log("detail.jsが実行されました。");
}page フォルダ内の JS で default export された関数が negl 内部で自動的に実行されます。この実行タイミングは negl 内部の初期化処理（three.js の初期化やエフェクトの作成など）が全て完了した後となります。
config.resolver.page の設定
先程作成した js ファイルを index.js から読み込みます。読み込むためには config.resolver.page プロパティに pageResolver 関数を設定（1-A）するか、オブジェクト（1-B）を設定します。1-Aを使うためには Vite で動かす必要があるため、注意してください。
// 1-A. ダイナミックインポートでページを読み込む関数を渡す場合
// * page フォルダに配置したJSファイルが自動的に読み込まれるため、Viteを使う場合はこちらがおススメです。
const pageResolver = (type) => import(`./page/${type}.js`);
// 1-B. 静的インポートで読み込む場合
// import * as home from "./page/home";
// import * as detail from "./page/detail";
(async () => {
const { start } = setup({
resolver: {
// 1-Aの時は以下のように設定
page: pageResolver,
// 1-Bの場合は以下のように設定
// page: { home, detail },
},
});
const negl = await start();
negl.renderStart();
})();- 💡pageResolver 関数は何をしてるの？
.page-containerの data-pageに値を設定
ここまででページが読み込まれたタイミングで実行する処理を登録しました。あとは、どのページが読み込まれたのかを目印として HTML に埋め込みます。.page-containerクラスが付いている DOM 要素にページが読み込まれた時に実行したい js のファイル名を設定してください。
<!-- トップページでhome.jsを実行したい場合 -->
<div class="page-container" data-page="home"></div><!-- detail.html（下層ページ）でdetail.jsを実行したい場合 -->
<div class="page-container" data-page="detail"></div>これでページが読み込まれたタイミングで自動的にコードが実行されます。
これで一通り記述が完了しました。画面で/index.html を開くとコンソールにhome.jsが実行されました。とログが表示されているはずです。また、detail.html を作成し上記の通り設定すれば、同様にdetail.jsが実行されました。とログが表示されます。
- 💡ページ毎の処理実行前にneglを使用した処理を行いたい場合
- 💡html ファイルを追加した際のViteの設定