diff --git a/resume/2024-summer-vacation/c121092-2024-R.aux b/resume/2024-summer-vacation/c121092-2024-R.aux index 1589856..951ea22 100644 --- a/resume/2024-summer-vacation/c121092-2024-R.aux +++ b/resume/2024-summer-vacation/c121092-2024-R.aux @@ -19,17 +19,20 @@ \@writefile{toc}{\contentsline {subsection}{\numberline {5.2}Three.js}{2}{}\protected@file@percent } \@writefile{toc}{\contentsline {subsubsection}{\numberline {5.2.1}Three.jsのシステム概要}{2}{}\protected@file@percent } \@writefile{toc}{\contentsline {subsubsection}{\numberline {5.2.2}ビデオの表示と再生・停止}{2}{}\protected@file@percent } +\citation{chrome} \@writefile{lof}{\contentsline {figure}{\numberline {1}{\ignorespaces Three.jsのシステム概念図}}{3}{}\protected@file@percent } \newlabel{figure:image}{{1}{3}} \@writefile{lof}{\contentsline {figure}{\numberline {2}{\ignorespaces 図１のシーンマップ}}{3}{}\protected@file@percent } \newlabel{figure:image}{{2}{3}} -\@writefile{toc}{\contentsline {subsubsection}{\numberline {5.2.3}CSV読み込みによる3DオブジェクトのWebへの反映}{3}{}\protected@file@percent } +\@writefile{toc}{\contentsline {subsubsection}{\numberline {5.2.3}資料をメッシュに貼付}{3}{}\protected@file@percent } +\@writefile{lof}{\contentsline {figure}{\numberline {3}{\ignorespaces ビデオとオーディオのシーングラフ}}{4}{}\protected@file@percent } +\newlabel{figure:video_audio_scenegraphs}{{3}{4}} +\@writefile{lof}{\contentsline {figure}{\numberline {4}{\ignorespaces PDF資料の貼付}}{4}{}\protected@file@percent } +\newlabel{figure:texture}{{4}{4}} +\@writefile{lof}{\contentsline {figure}{\numberline {5}{\ignorespaces テクスチャのシーングラフ}}{4}{}\protected@file@percent } +\newlabel{figure:texture_scenegraphs}{{5}{4}} +\@writefile{toc}{\contentsline {subsubsection}{\numberline {5.2.4}CSV読み込みによる3DオブジェクトのWebへの反映}{4}{}\protected@file@percent } \bibcite{goout}{1} -\@writefile{toc}{\contentsline {subsubsection}{\numberline {5.2.4}資料をオブジェクトに貼付}{4}{}\protected@file@percent } -\@writefile{lof}{\contentsline {figure}{\numberline {3}{\ignorespaces PDF資料の貼付}}{4}{}\protected@file@percent } -\newlabel{figure:texture}{{3}{4}} -\@writefile{toc}{\contentsline {section}{\numberline {6}評価の方法}{4}{}\protected@file@percent } -\@writefile{toc}{\contentsline {section}{\numberline {7}今後の展望}{4}{}\protected@file@percent } \bibcite{nomura}{2} \bibcite{mitubisi}{3} \bibcite{home}{4} @@ -38,4 +41,7 @@ \bibcite{sonomama}{7} \bibcite{three}{8} \bibcite{webgl}{9} -\gdef \@abspage@last{5} +\@writefile{toc}{\contentsline {section}{\numberline {6}評価の方法}{5}{}\protected@file@percent } +\@writefile{toc}{\contentsline {section}{\numberline {7}今後の展望}{5}{}\protected@file@percent } +\bibcite{chrome}{10} +\gdef \@abspage@last{6} diff --git a/resume/2024-summer-vacation/c121092-2024-R.dvi b/resume/2024-summer-vacation/c121092-2024-R.dvi index 3afdf4a..8bed70f 100644 --- a/resume/2024-summer-vacation/c121092-2024-R.dvi +++ b/resume/2024-summer-vacation/c121092-2024-R.dvi Binary files differ diff --git a/resume/2024-summer-vacation/c121092-2024-R.log b/resume/2024-summer-vacation/c121092-2024-R.log index 5159164..2d8f7a3 100644 --- a/resume/2024-summer-vacation/c121092-2024-R.log +++ b/resume/2024-summer-vacation/c121092-2024-R.log @@ -1,4 +1,4 @@ -This is e-pTeX, Version 3.141592653-p3.9.1-210218-2.6 (utf8.euc) (TeX Live 2022/dev/Debian) (preloaded format=platex 2024.3.19) 8 AUG 2024 22:26 +This is e-pTeX, Version 3.141592653-p3.9.1-210218-2.6 (utf8.euc) (TeX Live 2022/dev/Debian) (preloaded format=platex 2024.3.19) 9 AUG 2024 23:30 entering extended mode restricted \write18 enabled. %&-line parsing enabled. @@ -119,7 +119,11 @@ \g__pdf_backend_link_int=\count271 \g__pdf_backend_link_sf_int=\count272 ) -(./c121092-2024-R.aux) +(./c121092-2024-R.aux + +LaTeX Warning: Label `figure:image' multiply defined. + +) \openout1 = `c121092-2024-R.aux'. LaTeX Font Info: Checking defaults for OML/cmm/m/it on input line 26. @@ -168,129 +172,166 @@ File: ../figure/threejs_scenegraphs.pdf Graphic file (type pdf) <../figure/threejs_scenegraphs.pdf> [2] -LaTeX Font Info: External font `cmex10' loaded for size -(Font) <7> on input line 189. -LaTeX Font Info: External font `cmex10' loaded for size -(Font) <5> on input line 189. +LaTeX Font Info: Trying to load font information for OMS+cmr on input line 1 +57. + (/usr/share/texlive/texmf-dist/tex/latex/base/omscmr.fd +File: omscmr.fd 2019/12/16 v2.5j Standard LaTeX font definitions +) +LaTeX Font Info: Font shape `OMS/cmr/m/n' in size <10> not available +(Font) Font shape `OMS/cmsy/m/n' tried instead on input line 157. -Overfull \hbox (3.7585pt too wide) in paragraph at lines 191--191 +Overfull \hbox (47.33186pt too wide) in paragraph at lines 157--158 +[]\OT1/cmr/m/n/10 const video-Ma-te-rial = new THREE.MeshBasicMaterial(\OMS/cms +y/m/n/10 f + [] + +LaTeX Font Info: External font `cmex10' loaded for size +(Font) <7> on input line 205. +LaTeX Font Info: External font `cmex10' loaded for size +(Font) <5> on input line 205. +File: ../figure/video_audio_scenegraphs.pdf Graphic file (type pdf) +<../figure/video_audio_scenegraphs.pdf> +[3] +File: ../figure/tenjikaijo.pdf Graphic file (type pdf) +<../figure/tenjikaijo.pdf> +File: ../figure/texture_scenegraphs.pdf Graphic file (type pdf) +<../figure/texture_scenegraphs.pdf> + +Overfull \hbox (3.7585pt too wide) in paragraph at lines 276--276 []\OT1/cmr/bx/n/10 CSV \JY1/gt/m/n/10 読み込みによる \OT1/cmr/bx/n/10 3D \JY1/g t/m/n/10 オブジ ェ クトの \OT1/cmr/bx/n/10 Web [] -Overfull \hbox (10.57709pt too wide) in paragraph at lines 203--203 +Overfull \hbox (10.57709pt too wide) in paragraph at lines 288--288 [] \OT1/cmtt/m/n/7 ../texture_photo/good-1.jpg,../texture_photo/good-2.jpg,[] [] -Overfull \hbox (6.85829pt too wide) in paragraph at lines 203--203 +Overfull \hbox (6.85829pt too wide) in paragraph at lines 288--288 [] \OT1/cmtt/m/n/7 ../texture_photo/good-3.jpg,../texture_photo/good-4.jpg[] [] - -Overfull \hbox (3.1395pt too wide) in paragraph at lines 276--276 -[] \OT1/cmtt/m/n/7 for (let number = 1; number < result.length;[] +[4] +Underfull \hbox (badness 10000) in paragraph at lines 385--386 +[]\JY1/mc/m/n/10 厚生労働省\OT1/cmr/m/n/10 . \JY1/mc/m/n/10 “ 図表 \OT1/cmr/m/ +n/10 1-1-3-1 \JY1/mc/m/n/10 　自宅で [] -Overfull \hbox (6.85829pt too wide) in paragraph at lines 276--276 -[] \OT1/cmtt/m/n/7 document.getElementById(`${number}`);[] - [] - -[3] -File: ../figure/tenjikaijo.pdf Graphic file (type pdf) -<../figure/tenjikaijo.pdf> - -Underfull \hbox (badness 10000) in paragraph at lines 356--359 -[]\JY1/mc/m/n/10 厚生労働省\OT1/cmr/m/n/10 . \JY1/mc/m/n/10 “ 図表 \OT1/cmr/m -/n/10 1-1-3-1 \JY1/mc/m/n/10 　自宅で +Underfull \hbox (badness 10000) in paragraph at lines 385--386 +\JY1/mc/m/n/10 の活動時間 、 外出率の増減 ” \OT1/cmr/m/n/10 .$\OT1/cmtt/m/n/10 + https : [] -Underfull \hbox (badness 10000) in paragraph at lines 356--359 -\JY1/mc/m/n/10 の活動時間 、 外出率の増減 ” \OT1/cmr/m/n/10 . $\OT1/cmtt/m/n/1 -0 https : - [] - - -Underfull \hbox (badness 10000) in paragraph at lines 356--359 +Underfull \hbox (badness 10000) in paragraph at lines 385--386 \OT1/cmtt/m/n/10 / / www . mhlw . go . jp / stf / wp / hakusyo / [] -Underfull \hbox (badness 10000) in paragraph at lines 356--359 +Underfull \hbox (badness 10000) in paragraph at lines 385--386 \OT1/cmtt/m/n/10 kousei / 20 / backdata / 1-[]1-[]3-[]1 . html$\OT1/cmr/m/n/10 -. (\JY1/mc/m/n/10 参 +.(\JY1/mc/m/n/10 参 [] -[4] -Underfull \hbox (badness 10000) in paragraph at lines 362--365 + +Underfull \hbox (badness 10000) in paragraph at lines 387--388 []\JY1/mc/m/n/10 三菱総合研究所\OT1/cmr/m/n/10 . \JY1/mc/m/n/10 “ \OT1/cmr/m/n /10 CX2030 \JY1/mc/m/n/10 ： バ ーチ ャ ル [] -Underfull \hbox (badness 10000) in paragraph at lines 362--365 +Underfull \hbox (badness 10000) in paragraph at lines 387--388 \JY1/mc/m/n/10 テクノロジ ー活用の場としての広義の [] -Underfull \hbox (badness 10000) in paragraph at lines 362--365 -\JY1/mc/m/n/10 メタバ ース ” \OT1/cmr/m/n/10 . $\OT1/cmtt/m/n/10 https : / / w -ww . mri . co . jp / +Underfull \hbox (badness 10000) in paragraph at lines 387--388 +\JY1/mc/m/n/10 メタバ ース ” \OT1/cmr/m/n/10 .$\OT1/cmtt/m/n/10 https : / / ww +w . mri . co . jp / [] -Underfull \hbox (badness 10000) in paragraph at lines 362--365 +Underfull \hbox (badness 10000) in paragraph at lines 387--388 \OT1/cmtt/m/n/10 knowledge / column / dia6ou000004u77a-[]att / [] -Underfull \hbox (badness 10000) in paragraph at lines 365--368 -\OT1/cmr/m/n/10 MAR-KET \JY1/mc/m/n/10 ” \OT1/cmr/m/n/10 . $\OT1/cmtt/m/n/10 h -ttps : / / www . biprogy . com / +Underfull \hbox (badness 10000) in paragraph at lines 388--389 +\OT1/cmr/m/n/10 MAR-KET \JY1/mc/m/n/10 ” \OT1/cmr/m/n/10 .$\OT1/cmtt/m/n/10 ht +tps : / / www . biprogy . com / [] -Underfull \hbox (badness 5756) in paragraph at lines 365--368 +Underfull \hbox (badness 5756) in paragraph at lines 388--389 \OT1/cmtt/m/n/10 solution / service / myhomemarket . html$\OT1/cmr/m/n/10 . (\J Y1/mc/m/n/10 参 [] -Underfull \hbox (badness 4429) in paragraph at lines 372--374 +Underfull \hbox (badness 4429) in paragraph at lines 391--392 \OT1/cmtt/m/n/10 www . sovec . net / sonomama / tenjikai/$\OT1/cmr/m/n/10 . (\J Y1/mc/m/n/10 参照 [] -Underfull \hbox (badness 1377) in paragraph at lines 376--381 -\JY1/mc/m/n/10 び \OT1/cmr/m/n/10 3D \JY1/mc/m/n/10 グラフ ィ ッ ク ” \OT1/cmr -/m/n/10 . $\OT1/cmtt/m/n/10 https : / / developer . +Underfull \hbox (badness 10000) in paragraph at lines 392--393 +[]\OT1/cmr/m/n/10 three.js. \JY1/mc/m/n/10 “ \OT1/cmr/m/n/10 Fun-da-men-tals \ +JY1/mc/m/n/10 ” \OT1/cmr/m/n/10 .$\OT1/cmtt/m/n/10 https : / / threejs . [] -Underfull \hbox (badness 10000) in paragraph at lines 376--381 +Underfull \hbox (badness 10000) in paragraph at lines 392--393 +\OT1/cmtt/m/n/10 org / manual / #en / fundamentals$\OT1/cmr/m/n/10 . (\JY1/mc/m +/n/10 参照日 + [] + + +Underfull \hbox (badness 1377) in paragraph at lines 393--394 +[]\OT1/cmr/m/n/10 MDN Web Docs. \JY1/mc/m/n/10 “ \OT1/cmr/m/n/10 We-bGL: \JY1/ +mc/m/n/10 ウ ェ ブの \OT1/cmr/m/n/10 2D \JY1/mc/m/n/10 お + [] + + +Underfull \hbox (badness 10000) in paragraph at lines 393--394 \OT1/cmtt/m/n/10 mozilla . org / ja / docs / Web / API / WebGL _ API$\OT1/cmr/m /n/10 . [] -[5 +[5] +Underfull \hbox (badness 2521) in paragraph at lines 394--397 +[]\OT1/cmr/m/n/10 Chrome for De-vel-op-ers. \JY1/mc/m/n/10 “ \OT1/cmr/m/n/10 C +hrome \JY1/mc/m/n/10 の自動再 + [] + + +Underfull \hbox (badness 10000) in paragraph at lines 394--397 +\JY1/mc/m/n/10 生ポリシ ー ” \OT1/cmr/m/n/10 .$\OT1/cmtt/m/n/10 https : / / de +veloper . chrome . + [] + + +Underfull \hbox (badness 4429) in paragraph at lines 394--397 +\OT1/cmtt/m/n/10 com / blog / autoplay ? hl = ja # webaudio$\OT1/cmr/m/n/10 . ( +\JY1/mc/m/n/10 参照 + [] + +[6 ] (./c121092-2024-R.aux) -LaTeX Warning: Label(s) may have changed. Rerun to get cross-references right. +LaTeX Warning: There were multiply-defined labels. ) Here is how much of TeX's memory you used: - 2576 strings out of 478741 - 39833 string characters out of 5860982 - 559932 words of memory out of 5000000 - 21009 multiletter control sequences out of 15000+600000 + 2609 strings out of 478741 + 40624 string characters out of 5860982 + 554932 words of memory out of 5000000 + 21037 multiletter control sequences out of 15000+600000 480089 words of font info for 71 fonts, out of 8000000 for 9000 929 hyphenation exceptions out of 8191 - 55i,8n,62p,415b,328s stack positions out of 5000i,500n,10000p,200000b,80000s + 55i,8n,62p,420b,328s stack positions out of 5000i,500n,10000p,200000b,80000s -Output written on c121092-2024-R.dvi (5 pages, 26248 bytes). +Output written on c121092-2024-R.dvi (6 pages, 31188 bytes). diff --git a/resume/2024-summer-vacation/c121092-2024-R.pdf b/resume/2024-summer-vacation/c121092-2024-R.pdf index 779f287..17ea3a0 100644 --- a/resume/2024-summer-vacation/c121092-2024-R.pdf +++ b/resume/2024-summer-vacation/c121092-2024-R.pdf Binary files differ diff --git a/resume/2024-summer-vacation/c121092-2024-R.tex b/resume/2024-summer-vacation/c121092-2024-R.tex index 788af4a..d47836d 100644 --- a/resume/2024-summer-vacation/c121092-2024-R.tex +++ b/resume/2024-summer-vacation/c121092-2024-R.tex @@ -26,7 +26,7 @@ \begin{document} \title{仮想空間での発表資料展示会の提案} \author{広瀬研究室\\C1210924 斎藤翼} -\date{2024年6月5日} +\date{2024年8月18日} \twocolumn[ \maketitle @@ -138,9 +138,25 @@ \end{figure} \subsubsection{ビデオの表示と再生・停止} -ビデオを再生するには，ビデオを再生する部分と音を出す部分を設計する必要がある。 +今日にはGoogle ChromeやSafari、Mozilla Firefoxなど様々なウェブブラウザがある。そのウェブブラウザの多くでは自動再生ポリシーが設定されている。本システムの開発環境ではGoogle Chromeを使用しているため、その自動再生ポリシーに基づいてシステムを作成する。 -ビデオを再生する部分だけ設計し，音を再生してしまうとFirefoxのポリシーに引っかかってしまい，うまく動作しなくなる。そのため，ビデオからの音声は無音にし，ビデオ再生と音の再生を別々に設計する。 +Google Chromeはユーザエクスペリエンスを向上させ、広告ブロッカーをインストールするインセンティブを最小限に抑え、高価なネットワークや制約のあるネットワークでのデータ消費量を削減するために、より厳格な自動再生ポリシーに移行している。この変更は、ユーザーが再生をより詳細に制御できるようにし、正当なユースケースを持つパブリッシャーにメリットをもたらすことを目的としている\cite{chrome}。 + +本システムの作成にあたり、気をつけるべきポリシーとして、以下の内容がある。 + +\begin{itemize} + \item ミュート状態で自動再生されるようにすることは常に許可される。 + \item 音声付き自動再生は、ユーザがドメインを操作した（クリック、タップなど）場合に許可される。 +\end{itemize} + +つまり、音声付き動画はクリックなどのアクションを起こさないと再生してはならないということである。 +本システムでは、ビデオが再生されているオブジェクトに近づけば音が大きくなり、遠くなれば音が小さくなるように設定する。Three.jsではビデオのテクスチャとオーディオを別々に作成し1つのオブジェクトに追加することで実現できる。 +今回は以下のコードで実装している。 + +\begin{itemize} + \item const videoMaterial = new THREE.MeshBasicMaterial(\{ map: videoTexture, color: 0xffffff \}); + \item videoMesh.add(positionalAudio); +\end{itemize} \begin{itembox}[l]{Video・Audio} \scriptsize @@ -188,16 +204,85 @@ \end{verbatim} \end{itembox} +コードの流れとしては、HTMLのvideoタグに動画を設置し、それをテクスチャとしてオブジェクトに貼り付ける。またビデオのオーディオをmp3として抽出し、それをオブジェクトに追加することで実現している。 +自動再生がされないようにビデオの方ではautoplayをfalseにし、オーディオではpause状態に設定しておく。 +オブジェクトのクリックをアクションとして再生と停止を実行している。 + +\begin{itembox}[l]{再生と停止の切替} + \scriptsize + \begin{verbatim} +function startStopVideoAndAudio( + flagNumber, videoTagId, audio) { + if (videoPlayPauseFlag[flagNumber] == false) { + videoTagId.play(); + audio[0].play(); + videoPlayPauseFlag[flagNumber] = true; + } else { + videoTagId.pause(); + audio[0].pause(); + videoPlayPauseFlag[flagNumber] = false; + } +} + \end{verbatim} +\end{itembox} + +\begin{figure}[tbp] + \centering + \includegraphics[width=7cm]{../figure/video_audio_scenegraphs.pdf} + \caption{ビデオとオーディオのシーングラフ} + \label{figure:video_audio_scenegraphs} +\end{figure} + +\subsubsection{資料をメッシュに貼付} +本システムではPDF資料を表示することを機能要件としている。 +ジオメトリとテクスチャを含んだマテリアルの２つからメッシュを作成する（図.\ref{figure:texture}）。 +本システムではTextureLoaderを使用している。これで読み込める拡張子は、ブラウザがサポートする画像フォーマットに依存する。そのためPDF資料を画像フォーマットにしてからテクスチャとして使用する。 + +\begin{itembox}[l]{texture} + \scriptsize + \begin{verbatim} +function makeResume(texturePath, makeNumber) { + const resumeGeometry = new THREE.BoxGeometry( + 1.5, 1.5 * Math.sqrt(2), 0.01); + const loadPhoto = new THREE.TextureLoader().load( + texturePath); + let resumeMaterial = new THREE.MeshBasicMaterial({ + map: loadPhoto }); + const resumeMesh = new THREE.Mesh( + resumeGeometry, resumeMaterial); + resumeMesh.castShadow = true; + resumeMesh.position.set(1.625, 0, 0); + resumeMesh.name = texturePath; + scene.add(resumeMesh); + return resumeMesh; +} + \end{verbatim} +\end{itembox} + +\begin{figure}[tbp] + \centering + \includegraphics[width=7cm]{../figure/tenjikaijo.pdf} + \caption{PDF資料の貼付} + \label{figure:texture} +\end{figure} + +\begin{figure}[tbp] + \centering + \includegraphics[width=7cm]{../figure/texture_scenegraphs.pdf} + \caption{テクスチャのシーングラフ} + \label{figure:texture_scenegraphs} +\end{figure} + \subsubsection{CSV読み込みによる3DオブジェクトのWebへの反映} -「GLFTLoader」クラスインスタンスで3DオブジェクトのWebへの反映はできるが，その都度無駄にコードを書かなくてはならなくなってしまい冗長である。そのため，CSVから値を読み込む手法を取る。CSV読み込みは，Fetch -APIを用いて行う。 +「GLFTLoader」クラスインスタンスで3DオブジェクトのWebへの反映はできるが，その都度無駄にコードを書かなくてはならなくなってしまい冗長である。そのため，CSVから値を読み込む手法を取る。CSV読み込みは，FetchAPIを用いて行う。 + \begin{itembox}[l]{CSV} \scriptsize \begin{verbatim} -videoPath,audioPath,rotationX,rotationY,x,y,z, +1:videoPath,audioPath,rotationX,rotationY,x,y,z, texturePath1,texturePath2,texturePath3,texturePath4 -../video/sea.mp4,../mp3/sea.mp3,0,0,3.5,0,-8.125, +2:../video/sea.mp4,../mp3/sea.mp3,0,0,3.5,0,-8.125, ../texture_photo/good-1.jpg,../texture_photo/good-2.jpg, ../texture_photo/good-3.jpg,../texture_photo/good-4.jpg \end{verbatim} @@ -208,67 +293,66 @@ \begin{verbatim} fetch("../csv/videoAndResume.csv") .then((response) => { - return response.text(); + return response.text(); }) .then((data) => { - let result = data.split(/\r?\n|\r/).map((e) => { - return e.split(","); - }); - for (let makeNumber = 1; - makeNumber < result.length; makeNumber++) { - let videoMesh = makeVideo(makeNumber, - result[makeNumber][0], - result[makeNumber][1]) - let resumeMesh = makeResume( - result[makeNumber][7], makeNumber) - makeGroup(makeNumber, videoMesh, resumeMesh, - result[makeNumber][2], result[makeNumber][3], - result[makeNumber][4], result[makeNumber][5], - result[makeNumber][6]); - } + let result = data.split(/\r?\n|\r/).map((e) => { + return e.split(","); + }); + for (let makeNumber = 1; + makeNumber < result.length; makeNumber++) { + let videoMesh = makeVideo(makeNumber, + result[makeNumber][0], + result[makeNumber][1]) + let resumeMesh = makeResume( + result[makeNumber][7], makeNumber) + makeGroup(makeNumber, videoMesh, resumeMesh, + result[makeNumber][2], result[makeNumber][3], + result[makeNumber][4], result[makeNumber][5], + result[makeNumber][6]); + } - document.addEventListener("click", (event) => { - event.preventDefault(); - const raycaster = new THREE.Raycaster(); - const mouse = new THREE.Vector2(); - mouse.x = 0; - mouse.y = 0; - raycaster.setFromCamera(mouse, camera); - const intersects = raycaster.intersectObjects( - scene.children, true); - if (intersects.length > 0) { - for (let number = 1; number < result.length; - number++) { - if (intersects[0].object.name == - result[number][7]) { - resumePageCounter[number] += 1; - const resumeMesh = makeResume( - result[number][ - resumePageCounter[number] + 7], - number); - intersects[0].object.parent.add( - resumeMesh); - } - if (resumePageCounter[number] == - result[1].length - 8) { - resumePageCounter[number] = -1; - } - } - for (let number = 1; - number <= Object.keys( - videoPlayPauseFlag).length; number++) { - if (intersects[0].object.name == - number) { - let audio = - intersects[0].object.children; - let videoTagId = - document.getElementById(`${number}`); - startStopVideoAndAudio( - number, videoTagId, audio); - } - } + document.addEventListener("click", (event) => { + event.preventDefault(); + const raycaster = new THREE.Raycaster(); + const mouse = new THREE.Vector2(); + mouse.x = 0; + mouse.y = 0; + raycaster.setFromCamera(mouse, camera); + const intersects = raycaster.intersectObjects( + scene.children, true); + if (intersects.length > 0) { + for (let number = 1; number < result.length; + number++) { + if (intersects[0].object.name == + result[number][7]) { + resumePageCounter[number] += 1; + const resumeMesh = makeResume( + result[number][ + resumePageCounter[number] + 7], + number); + ntersects[0].object.parent.add( + resumeMesh); } - }) + if (resumePageCounter[number] == + result[1].length - 8) { + resumePageCounter[number] = -1; + } + } + for (let number = 1; + number <= Object.keys( + videoPlayPauseFlag).length; number++) { + if (intersects[0].object.name == number) { + let audio = + intersects[0].object.children; + let videoTagId = + document.getElementById(`${number}`); + startStopVideoAndAudio( + number, videoTagId, audio); + } + } + } + }) }) .catch((error) => { console.log(error); @@ -283,61 +367,6 @@ % \label{figure:image1} % \end{figure} -\subsubsection{資料をオブジェクトに貼付} -本システムではPDF資料を表示することを機能要件としている。Three.jsではオブジェクトを作成し、そこにPNG形式のテクスチャデータを読み込み、貼付することで実装できる（図.\ref{figure:texture}）。 - -\begin{itembox}[l]{texture} - \scriptsize - \begin{verbatim} -const resumeGeometry = new THREE.BoxGeometry( - 1.5, 1.5 * Math.sqrt(2), 0.01); -const loadPhoto = new THREE.TextureLoader().load( - texturePath); -let resumeMaterial = new THREE.MeshBasicMaterial({ - map: loadPhoto }); -const resumeMesh = new THREE.Mesh( - resumeGeometry, resumeMaterial); -resumeMesh.castShadow = true; -resumeMesh.position.set(1.625, 0, 0); -resumeMesh.name = texturePath; -scene.add(resumeMesh); -return resumeMesh; - \end{verbatim} -\end{itembox} - -\begin{figure}[tbp] - \centering - \includegraphics[width=7cm]{../figure/tenjikaijo.pdf} - \caption{PDF資料の貼付} - \label{figure:texture} -\end{figure} - -% \subsection{Blender} -% \subsubsection{glTF形式の利用} -% \indent 3DモデルはBlenderを用いて作成し，glTF(Graphics Language Transmission Format)でエクスポートしたものを使用する。glTFの利点として， -% \begin{enumerate} -% \item webブラウザ，モバイルデバイスなどのプラットフォームで3Dシーンとモデルを効率的に実行して送信及びロードができる。 -% \item 3Dアセットを解凍・処理するための実行時処理を最小限に抑え，高度な広帯域グラフィックス機能を実現する。 -% \end{enumerate} - -% の2点が挙げられる\cite{glTF}。 -% これにより，webブラウザ上での軽量かつ高度なグラフィックスが実現される。 - -% \subsubsection{3Dモデルの光源} -% Three.jsではライトを設定することで，オブジェクトを照らしている。しかし，光の当たらないところは影になる。本システムでは四角柱のオブジェクトを設置し，そのオブジェクトの四面から資料を見れるに設計する。そのため，四面が影にならないようにしなくてはならない。 - -% どの方向から見ても影がないようにすればいいがThree,jsでライトをいくつも設定するのは手間がかかる。そのためBlenderでエクスポートする際に「Punctual Lights」をオンにしてエスクポートする。オンにすることでBlenderで設定したライトをオブジェクトのデータに組み込まれるようにな（図.\ref{figure:shadow}）。 -% \begin{figure}[tbp] -% \centering -% \includegraphics[width=7cm]{../figure/shadow_on_off.pdf} -% \caption{左：影あり　右：影なし} -% \label{figure:shadow} -% \end{figure} - -% \subsection{双方向通信} -% 双方向通信には，Node.js上で動作するSocket.ioを使用する。\\ -% \indent Socket.ioはクライエントとサーバ間の低遅延，双方向，イベントベースの通信を可能にするライブラリである\cite{socket.io}。 - \section{評価の方法} 本研究の評価として，利用者に本システムを利用してもらい，そのあとにアンケートでの定性調査を行う。\\ \indent @@ -353,30 +382,17 @@ % 物理演算用の Javascript ライブラリの Cannon.jsを実装して 3D モデルの通り抜けを防止する。 \begin{thebibliography}{99} - \bibitem{goout} 厚生労働省. “図表1-1-3-1　自宅での活動時間、外出率の増減”. - \url{https://www.mhlw.go.jp/stf/wp/hakusyo/kousei/20/backdata/1-1-3-1.html}. - (参照日 2023-12-05). - \bibitem{nomura} - 株式会社野村総合研究所.“ゲーム，VR，マンガ・本・書籍に対する人々の行動と意識の変化：アフターコロナのコンテンツ市場再成長の機会を逃してはいけない～新型コロナウイルス感染拡大による消費者の行動変容がICTメディア・サービス産業に及ぼすインパクトと対応策（3）コンテンツ～”. - \url{https://www.nri.com/jp/keyword/proposal/20200519/03}. (参照日 2023-08-13). - \bibitem{mitubisi} 三菱総合研究所.“CX2030：バーチャルテクノロジー活用の場としての広義のメタバース”. - \url{https://www.mri.co.jp/knowledge/column/dia6ou000004u77a-att/mtr_20221122.pdf}. - (参照日 2023-08-13). - \bibitem{home} BIPROGY.“バーチャル住宅展示場MY HOME MARKET”. - \url{https://www.biprogy.com/solution/service/myhomemarket.html}. (参照日 - 2023-08-13). - \bibitem{hometown} MY HOME MARKET.“バーチャル住宅展示場 VRタウン”. - \url{https://myhomemarket.jp/town/index.html}. (参照日 2023-08-13). - \bibitem{article1} - 澤崎敏文．メタバースを活用した多様な学習環境の構築と実践．日本教育工学会研究報告書．2023，vol.2023，no.2，p.83-87． - \bibitem{sonomama} SoVeC株式会社.“【メタバース会場】そのまま展示会ならリードが効率よく取れます。”. - \url{https://www.sovec.net/sonomama/tenjikai/}. (参照日 2023-08-13). - \bibitem{three} three.js.“Fundamentals”. - \url{https://threejs.org/manual/#en/fundamentals}. (参照日 2024-08-01). - \bibitem{webgl} MDN Web Docs.“WebGL:ウェブの2Dおよび3Dグラフィック”. - \url{https://developer.mozilla.org/ja/docs/Web/API/WebGL_API}. (参照日 - 2024-08-01). - % \bibitem{glTF} Khronos Group.“glTF Overview”. \url{https://www.khronos.org/gltf/}. (参照日 2023-08-13). + \bibitem{goout} 厚生労働省.“図表1-1-3-1　自宅での活動時間、外出率の増減”.\url{https://www.mhlw.go.jp/stf/wp/hakusyo/kousei/20/backdata/1-1-3-1.html}.(参照日 2023-12-05). + \bibitem{nomura}株式会社野村総合研究所.“ゲーム，VR，マンガ・本・書籍に対する人々の行動と意識の変化：アフターコロナのコンテンツ市場再成長の機会を逃してはいけない～新型コロナウイルス感染拡大による消費者の行動変容がICTメディア・サービス産業に及ぼすインパクトと対応策（3）コンテンツ～”.\url{https://www.nri.com/jp/keyword/proposal/20200519/03}. (参照日 2023-08-13). + \bibitem{mitubisi} 三菱総合研究所.“CX2030：バーチャルテクノロジー活用の場としての広義のメタバース”.\url{https://www.mri.co.jp/knowledge/column/dia6ou000004u77a-att/mtr_20221122.pdf}.(参照日 2023-08-13). + \bibitem{home} BIPROGY.“バーチャル住宅展示場MY HOME MARKET”.\url{https://www.biprogy.com/solution/service/myhomemarket.html}. (参照日2023-08-13). + \bibitem{hometown} MY HOME MARKET.“バーチャル住宅展示場 VRタウン”.\url{https://myhomemarket.jp/town/index.html}. (参照日 2023-08-13). + \bibitem{article1}澤崎敏文．メタバースを活用した多様な学習環境の構築と実践．日本教育工学会研究報告書．2023，vol.2023，no.2，p.83-87． + \bibitem{sonomama} SoVeC株式会社.“【メタバース会場】そのまま展示会ならリードが効率よく取れます。”.\url{https://www.sovec.net/sonomama/tenjikai/}. (参照日 2023-08-13). + \bibitem{three} three.js.“Fundamentals”.\url{https://threejs.org/manual/#en/fundamentals}. (参照日 2024-08-01). + \bibitem{webgl} MDN Web Docs.“WebGL:ウェブの2Dおよび3Dグラフィック”.\url{https://developer.mozilla.org/ja/docs/Web/API/WebGL_API}. (参照日2024-08-01). + \bibitem{chrome} Chrome for Developers.“Chromeの自動再生ポリシー”.\url{https://developer.chrome.com/blog/autoplay?hl=ja#webaudio}. (参照日2024-08-08). + % \bibitem{glTF} Khronos Group.“glTF Overview”. \url{https://www.khronos.org/gltf/}. (参照日 2023-08-13). % \bibitem{socket.io} Socket.IO.“Introduction”. \url{https://socket.io/docs/v4/}. (参照日 2023-08-13) \end{thebibliography} diff --git a/resume/figure/Threejs_scenegraphs.pdf b/resume/figure/Threejs_scenegraphs.pdf index 4e03292..2b08bd6 100644 --- a/resume/figure/Threejs_scenegraphs.pdf +++ b/resume/figure/Threejs_scenegraphs.pdf Binary files differ diff --git a/resume/figure/texture_scenegraphs.pdf b/resume/figure/texture_scenegraphs.pdf new file mode 100644 index 0000000..6992e50 --- /dev/null +++ b/resume/figure/texture_scenegraphs.pdf Binary files differ diff --git a/resume/figure/video_audio_scenegraphs.pdf b/resume/figure/video_audio_scenegraphs.pdf new file mode 100644 index 0000000..e354f11 --- /dev/null +++ b/resume/figure/video_audio_scenegraphs.pdf Binary files differ