%#!platex -kanji=%k
%#DVIPDF dvipdfmx -f ipa.map
\documentclass[a4j,11pt]{jsarticle}
\addtolength{\topmargin}{-1cm}
\addtolength{\textheight}{2cm}
\addtolength{\textwidth}{2cm}
\addtolength{\oddsidemargin}{-1cm}
\addtolength{\evensidemargin}{-1cm}
%\pagestyle{empty}		% ★★ 1ページしかない場合は この行を生かす
\title{3Dモデルを活用した学校紹介システムの提案}
\date {令和7年6月3日}		% ★★日付けは発表日とする
\author{広瀬研究室\\C1230660 草薙昴\thanks{東北公益文科大学}　C1231487 土田智也\thanks{東北公益文科大学}}
\usepackage[dvipdfmx]{graphicx}	% required for `\includegraphics' (yatex added)
\usepackage{ascmac}
\usepackage{verbatim}
\usepackage{url}


\begin{document}

% ★★2段組みの最初に1段で概要を書く
% 概要は、社会/世界/日本/地域を視点とした大きな話題から入り、その中
% のどの分野に着目し、自分でどのような提案をして行くかまでを2段落程度
% で書く。

\twocolumn[	% ★1段は \twocolumn のオプション引数の中に閉じ込める
\maketitle	% \title{}に書いたタイトルがここに出る
\begin{center}	% 概要はセンタリングする
 {\bfseries 概要}
\end{center}
大学に入学・編入した学生が構内の構造や施設の利用ルールを理解することは、円滑な学習・生活への適応に不可欠である。しかし、複雑な校舎構造や施設ごとの制約により、戸惑う学生も少なくない。そこで本研究では、新入生・編入生が大学施設を直感的に理解できるよう、構内を3Dで再現した探索型Webアプリケーションを提案・開発する。本稿では、その設計と実装について述べる。
 \vspace*{2em}
]
%\thispagestyle{empty}

% \section{はじめに}
	%ここに導入文を書く……
	% 最初のセクションは「はじめに」、「序論」などとする。
	% 概論に書いた社会的な視点での問題提起をする。

\section{背景}
大学に入学または編入した学生にとって、キャンパス内の構造や施設の利用方法を早期に把握することは、学習活動や学生生活を円滑に始める上で重要である。しかし、大学施設は広大かつ複雑であることが多く、初めて訪れる学生にとっては、自教室の位置や施設ごとの利用ルールを理解するのが困難である場合も少なくない。特に現代では、学習環境の多様化や施設のセキュリティ強化により、事前知識がなければ戸惑う場面も増えている。東北公益文科大学（公益大）においても、入学したばかりの学生が教室の場所を把握できなかったり、学生証がなければ入室できない教室の存在を知らずに戸惑ったりする場面が見受けられる。こうした状況は、新入生や編入生の不安やストレスにつながり、学習や生活に支障をきたす要因となる。学生が早期に大学生活に適応できるよう支援する仕組みが求められる。そこで本研究では、新入生や編入生が大学の構造やシステムを直感的かつ効率的に理解できるような支援ツールの開発を目指す。
	%ここに過去の事例を含めた背景を書く
	% さらに広げて過去にどのような解決策があったかなどについて先行事
	% 例を挙げてその成果、残された問題点などを正確に記述する。
	% 短めの原稿なら第1、第2セクションをまとめてもよい。
	% 過去の研究を取り上げそこで提案している要点、課題となっている点
	% を要約する。課題点を自分の研究の提案点に活かす。

\section{先行研究}
三次元の仮想空間を活用した教育支援の取り組みとして、「Web3Dを利用した天体教育支援システムの開発」\cite{1}がある。仲ら（2003）は、太陽系の構造を理解するための学習支援コンテンツとして、Webブラウザ上で動作する3DCGコンテンツを開発し、e-learningシステムに統合することで学習効果の向上を図っている。このように、視覚的かつインタラクティブな表現が、空間的構造や抽象概念の理解に有効であることが示唆されている。

\section{提案}
本研究では、「大学構内の空間構造を三次元の仮想空間上に再現し、自由に歩き回れる学校探索型Webゲーム」を提案する。このシステムは、実際の大学構内を仮想空間上に再現し、プレイヤーが視点を操作して自由に移動しながら、教室の場所や施設の利用方法などを学べる仕組みとなっている。特に新入生や編入生といった、大学に不慣れな学生にとって、ゲームという体験的な手法を通じて楽しみながら大学生活への理解を深めることができるよう設計する予定である。単なる情報の提示ではなく、自らの操作によって能動的に大学を探索することで、記憶への定着も期待できる。本提案では、こうした体験を通じて、よりスムーズな大学生活への適応を支援することを目的とする。
%\label{checkit}
	%ここに自分なりの提案を図とともに書く(図.\ref{figure:hogehoge})。
	% 図は、人とモノ/情報の流れを示した図、概念図、提案する部分の詳
	% しい図を必ず入れる。
	% 図には下にキャプションをつけ、表には上にキャプションをつけて
	% \label{} をかならずつける。つけたラベルは本文中から
	% \ref{ラベル名} で参照する。
	% 図は以下のように入れる
	%\begin{figure}[b]
	 %\centering		% センタリングすると座りがよい
	 %\includegraphics[bb=62 643 282 793,clip,width=0.7\columnwidth]{zu.pdf}
	 %\caption{ほげほげの図}
	 %\label{figure:hogehoge}
	%\end{figure}

\section{システム}
\subsection{システム構築}
本システムはWeb上で動作し、ユーザーが大学構内を自由に探索できる三次元の仮想空間を提供する。以下図\ref{図1}にシステムの概念図を記す。
\begin{figure}[htbp]
	\centering
	\includegraphics[width=1.0\columnwidth]{systemconcept.pdf}
	\caption{システム概念図}
	\label{図1}
\end{figure}

\subsection{3Dモデル作成}
システムで使用する3DモデルについてはSweet Home 3Dとblenderを用いて作成した。現時点では公益大 101、102、103、202、203、204、205、206、207教室、3階の作成が完了している。
\subsubsection{Sweet Home 3D}
Sweet Home 3Dは、主に住宅の間取り設計を目的とした建築設計支援ツールである。ドラッグ＆ドロップによる直感的な操作で、壁やドア、窓、家具などの配置が可能であり、簡易的な建築物の3Dモデルを短時間で作成できる点が特徴である。本システムでは、教室のレイアウト設計にSweet Home 3Dを使用し、室内の構造を効率よく再現している。
\subsubsection{Blender}
Blenderは、オープンソースで提供されている高機能な3Dモデリングソフトウェアであり、建築・アニメーション・ゲーム制作など幅広い分野で利用されている。本システムでは、Sweet Home 3Dでは再現が難しい複雑な構造の教室を作成するほか、図\ref{図2}のように、Sweet Home 3Dで作成した個別のモデルを取り込んでひとつのモデルに結合するために使用している。

\begin{figure}[htbp]
	\centering
	\includegraphics[width=1.0\columnwidth]{blender.png}
	\caption{Blender編集画面}
	\label{図2}
\end{figure}

\subsection{Three.js}
Three.jsはWeb上で3Dグラフィックスの描画を可能にするJavaScriptライブラリである。本システムにおいては3Dモデルの表示、ユーザーの視点操作など、機能の根幹をThree.jsにより実現している。
\subsubsection{3Dモデルの読み込み}
モデルの読み込みには、Three.jsのGLTFLoaderとDRACOLoaderを併用する。これにより、DRACO圧縮に対応した軽量なglb形式の3Dモデルの読み込みが可能となり、Webブラウザ上でも軽量かつ効率的に3Dコンテンツを表示できる。
\begin{itembox}[l]{3Dモデルの読み込み}
\scriptsize
\begin{verbatim}
const loader = new GLTFLoader();

const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath('./node_modules/three/
examples/jsm/libs/draco/');
loader.setDRACOLoader(dracoLoader);

loader.load('3Dモデルのファイルパス', function(gltf) {
  gltf.scene.position.y = 0;
  scene.add(gltf.scene);

　requestAnimationFrame(animate);
}, onProgress, onError);
\end{verbatim}
\end{itembox}

\subsubsection{視点操作}
本システムにおける視点操作は一人称視点（First-Person View, FPV）に基づいて設計されており、PC向けとスマートフォン向けにそれぞれ異なる操作系を実装している。PC版では、ユーザーの視点操作にThree.jsのPointerLockControlsを用いており、キーボードのW,A,S,Dキーによる移動操作と、マウスによるカメラ回転操作が可能である。実際の画面表示は図\ref{図3}のようになる。
\begin{figure}[htbp]
	\centering
	\includegraphics[width=1.0\columnwidth]{systempc.JPG}
	\caption{PCでの表示}
	\label{図3}
\end{figure}
\par
一方、スマートフォン版では、nipplejsを用いたジョイスティック操作を実装している。nipplejsは、タッチデバイス向けに仮想ジョイスティックを提供するJavaScriptライブラリであり、スマートフォンやタブレット上での直感的なインターフェース操作を可能にする。実際の画面表示は図\ref{図4}のようになる。
\begin{figure}[htbp]
	\centering
	\includegraphics[width=1.0\columnwidth]{systemphone.JPG}
	\caption{スマートフォンでの表示}
	\label{図4}
\end{figure}

\subsubsection{pdfの読み込み}
pdfを読み込む際にはPDF.jsを用いる。PDF.jsはpdfファイルをWeb上で表示するためのJavaScriptライブラリである。これを用いて読み込んだファイルをThree.jsのテクスチャとして設定することで、pdfをThree.jsの描画空間上に表示させている。

\begin{figure}[htbp]
	\centering
	\includegraphics[width=1.0\columnwidth]{pdfjs.png}
	\caption{pdfの描画}
	\label{図5}
\end{figure}

%\begin{itembox}[l]{pdfの描画}
%\scriptsize
%\begin{verbatim}
%// pdfロード
%const loadPDF = async (url) => {
	%pdfDoc = await pdfjsLib.getDocument(url).promise;
	%renderPage(currentPage);
%};
%loadPDF('./koekiOC.pdf');

%// Three.jsのテクスチャとして設定
%const renderPage = async (pageNum) => {
	%const page = await pdfDoc.getPage(pageNum);
	%const viewport = page.getViewport({ scale: 2.0 });

	%const canvas = document.createElement('canvas');
	%const context = canvas.getContext('2d');
	%canvas.width = viewport.width;
	%canvas.height = viewport.height;

	%await page.render({ canvasContext: context, viewport }
	%).promise;

	%pdfTexture = new THREE.CanvasTexture(canvas);

	%if (!pdfMesh) {
		%const geometry = new THREE.PlaneGeometry(1.44, 0.81);
		%const material = new THREE.MeshBasicMaterial({ map:
		 %pdfTexture });
		%pdfMesh = new THREE.Mesh(geometry, material);
		%pdfMesh.position.set(-102.23, -6.6, 4.67);
		%pdfMesh.rotation.y = Math.PI / 2;
		%scene.add(pdfMesh);
	%} else {
		%pdfMesh.material.map = pdfTexture;
		%pdfMesh.material.needsUpdate = true;
	%}
%};

%// ページ切り替え
%window.addEventListener('keydown', (event) => {
	%if (event.key === '.') {
		%currentPage = (currentPage % pdfDoc.numPages) + 1;
	%} else if (event.key === ',') {
		%currentPage = (currentPage - 2 + pdfDoc.numPages) %
		 %pdfDoc.numPages + 1;
	%}
%// 再描画
%renderPage(currentPage);
%});
%\end{verbatim}
%\end{itembox}

\subsection{Cannon.js}
Cannon.jsはWeb上での物理演算を可能にするJavaScriptライブラリである。オブジェクト間の衝突判定、重力の影響、慣性の表現といった機能を持ち、Three.jsと組み合わせて使用することで、リアルな物理挙動を再現できる。本システムでは、ユーザーが建物内を移動する際の床や壁との接触判定にCannon.jsを利用することで、モデル内の壁をすり抜けたり床を通り抜けたりしないような動作を実現を目指している。
\begin{itembox}[l]{物理判定の付与}
\scriptsize
\begin{verbatim}
〜〜〜〜〜
  scene.add(gltf.scene)

  gltf.scene.traverse((child) => {
    if (child.isMesh) {
      console.log('Mesh:', child.name);
    } else {
      console.log('Node:', child.name);
    }
  });
  gltf.scene.traverse((child) => {
    if (child.isMesh) {
      child.castShadow = true;
      child.receiveShadow = true;

      const box = new THREE.Box3().setFromObject(child);
      const size = new THREE.Vector3();
      const center = new THREE.Vector3();
      box.getSize(size);
      box.getCenter(center);

      const shape = new Box(new Vec3(size.x / 2, 
	  size.y / 2, size.z / 2));
      const body = new Body({
        mass: 0,
        position: new Vec3(center.x, center.y, center.z),
        shape: shape
      });
      body.mesh = child;
      world.addBody(body);
    }
  });

  requestAnimationFrame(animate);
〜〜〜〜〜

\end{verbatim}
\end{itembox}

\subsection{PlayCanvas}
現在、システム構築の新たなアプローチとしてPlayCanvasの使用を検討している。PlayCanvasはHTMLとJavaScriptによって動作する3Dゲームエンジンであり、Webブラウザベースのリアルタイム3Dコンテンツの開発を可能にする。

	%ここに具体的にどのように構築したかの詳細を細かに書く。
	% この文章を読んだ人が完ぺきに同じものを再現できるよう
	% 使用したものの種類、バージョンを正確に、組み立てた手順ももらさ
	% ず記述する。

%\section{○○の実験/適用/検証}
	%ここに構築したものを適用した条件と手順・結果を書く。
	% 適用するときの条件(どういう状況か、回数など)をもらさず記述し、
	% 結果となる値を表などを用いて簡潔に示す。

\section{課題}
\subsection{ゲーム的要素}
現段階で作成した成果物は、大学構内を自由に探索できる仕組みを備えているものの、ユーザーが「楽しみながら」探索できるようなゲーム的要素がほとんど実装されていない。そのため、今後はこれまでに構築した環境を土台として、達成目標や報酬要素などを取り入れたゲーム性の設計・実装を進めていく必要がある。
\subsection{スマートフォンでの操作}
本システムは最終的にスマートフォン上での動作も想定しているが、現時点では操作性の面に課題が残っている。仮想ジョイスティックによる視点移動は可能である一方、PC操作における「マウスカーソル」に相当する要素が未実装である。これについては、スマートフォンのセンサを活用したAR操作による代替手段を検討している。
\subsection{物理判定の付与方法}
物理演算に関しても、現在は3Dモデルの全メッシュを読み取り、簡易的に物理判定を付与する方式を採っているが、これでは不要な箇所に判定が付いたり、必要な場所で判定が欠けたりする問題が生じている。使用しているライブラリである cannon.js では、特定のメッシュを指定して判定を与えることが可能なため、今後はその機能を活用し、より精度の高い判定の実現を目指す。
\subsection{未実装の教室}
未実装の教室についても考えなければならない。現在の方法のまま教室の追加を行うと、3Dモデルのデータ容量が大きくなりすぎる懸念がある。現在の方法で教室を追加し続けると、ファイルサイズが肥大化し、システム全体の読み込み速度が低下する恐れがある。そのため、3Dモデルのさらなる軽量化や、読み込み方法の見直しも検討していく必要がある。

%\section{結論}
	%ここに結論と、残った課題とその先をめざす展望を書く。
	% いずれも簡潔に記す。

%\section{参考文献}
	%最後に参考文献を必ず正しく記載する。
	% 原稿がどの程度のクォリティなのか参考文献である程度分かる。

\begin{thebibliography}{}
 %\bibitem{SIST02} 科学技術振興機構. 参考文献の役割と書き方.
	 %SIST 02/05/06 2007年版. 独立行政法人 科学技術振興機構. 2007年.
	 %p.9-15

 \bibitem{1} \mbox{日本科学教育学会.}


 	 \mbox{"Web3Dを利用した天体教育支援システムの開発".}
	 \url{https://www.jstage.jst.go.jp/article/jssep/27/0/27\_307/\_pdf/-char/ja},
	 mbox{（参照 2025-05-28）}
 %\bibitem{1} \mbox{Three.js. "threejs manual".}
	 %https://threejs.org/manual/\#en/creating-a-scene,
	 %mbox{（参照 2025-05-28）}
 %\bibitem{2} \mbox{blender. "Blender 4.4 Reference Manual”.}
	 %https://docs.blender.org/manual/ja/latest/,
	 %\mbox{（参照 2025-05-28）}
 %\bibitem{3} \mbox{Sweet Home 3D. "Sweet Home 3D user's guide”.}
	 %https://www.sweethome3d.com/userGuide.jsp,
	 %\mbox{（参照 2025-05-28）}
 %\bibitem{4} \mbox{github. "nipplejs".}
 	 %https://github.com/yoannmoinet/nipplejs,
	 %\mbox{（参照 2025-05-28）}
 %\bibitem{5} \mbox{github. "Cannon.js".}
 	 %https://github.com/schteppe/cannon.js,
	 %\mbox{（参照 2025-05-28）}
 %\bibitem{6} \mbox{PlayCanvas. "ユーザーマニュアル".}
	 %https://developer.playcanvas.com/ja/user-manual/getting-started/,
	 %\mbox{（参照 2025-05-28）}
\end{thebibliography}
\end{document}