3Dink.js Introduction

3Dink.jsはWebGLで3Dモデルを容易にハイパーリンクに出来るライブラリです。
https://github.com/takashift/3Dink.js

Transcript

1. for the 3D Hyperlink Lib. WebGLで3Dモデルなハイパーリンクを 簡単に作成 2016年11月18日 3Dink Project - © 2016 髭散化汰
2. 目次 1. 何を提供してくれるのか （そもそも何なのか） 2. 何故作る必要があったのか （何があったのか） 3. 3Dink とは （3Dのリンクとはどのようなものか） 4. 使い方（どんな機能があるのか） 5. どういったことに活用でき るのか 6. 今後も進化するのか 7. 配布について 3Dink Project - © 2016 髭散化汰
3. 1. 3Dink.jsとは WebにはWebGLという、サイトに3Dモデルを表示させる技術が あります。 3Dink.jsはWebGLによって表示する3Dモデルを簡単にリンクに 出来るAPI（JavaScriptライブラリ）です。 3Dink Project - © 2016 髭散化汰 技術的には Three.js（ Mr.doob 氏）の関数を利用して、モデルを選択す るとアンカーテキスト同様にリンク先を開くwrapper liblary です。
4. 2. 何故作る必要があったのか WebGLは素のまま扱いづらく（難しく）、その為容易に3D モデルの制作が出来るようにしたり便利な関数を追加した Three.jsなどのラッパーAPIライブラリが登場しました。 しかし、 Three.jsはとりわけ自由度が高い（作りたいもの が作れる）ものの、その見返りとして自分でコードを記述 する部分も多く、直ぐに目的のコンテンツを実現すること はできませんでした。 3Dink Project - © 2016 髭散化汰
5. (泣)->(笑) 2. 何故作る必要があったのか そして、予てから作ってみたかった3D モデルによ るサイトマップの作成は一筋縄には行かない部分 がありました。特にスマホ画面に対応させたりな ど、WebGL以外の部分も考慮しなければならない 部分が多くありました。でもWebGLならばリンク があって然りです。こうして、同じことを考えて る人を泣き寝入りから救うべく、WebGLの普及も 目指して3Dink.jsは開発されました。 3Dink Project - © 2016 髭散化汰
6. 3. 3Dinkとは何だ？ 3Dink Project - © 2016 髭散化汰 3Dink（スリディンク）とは、 ハイパーリンクになっている3Dモデルのことです。 これを利用するメリットとして、 • 参照先を視覚的に分かりやすく表現出来る • テキストと異なり、タッチパネルで選択しやすい • 複数の参照先の構造や対応を図の如く分かりやすく表せる などが挙げられます。
7. ハイパーリンクって何だっけ？ Hyperlinkとはハイパーメディア（Webpage）への参照です。普 段単にリンクと呼ばれているものです。 参照だと分かりづらいので「超越参照体」と訳しますが、単な る参考文献とは参照先をコンテンツを“超えて”直接Web上で開 くことが出来る点で異なります。また、参照先は文書に限定さ れません。 3Dinkは三次元であることを強調すれば「超越参照立体」です。 3Dink Project - © 2016 髭散化汰
8. リンク先に移動するには、現時点で今までのウェブページのリンクと同 様にマウスでクリックしたり、画面をタッチする方法があります。 3Dink Project - © 2016 髭散化汰 3Dinkどう操作する？ 3Dink.js自体には画面のコントロール（移動）やモデルの移動などの関数 は（現時点では）有りません。これは開発者が別途自由に設定できます。 （ただし、3Dink Projectではコントロールの例も提供しています。）
9. 4. 3Dink.jsの使い方 ライブラリの使い方について説明します。 WebGLの使用にはここでの説明以外にも用意するものがありますが割愛します。 3Dink Project - © 2016 髭散化汰 1. 注意点 1. ファイルの読み込み順 2. モードについて • 関数モード • Aタグモード 2. 3Dink.jsの主な機能 3. 記述の流れ メソッドと記述方法
10. 4.1. 注意点 1. ファイルの読み込み HTML内のJavaScriptファイルの読み込みを記述する際に、3Dink.jsは必ず Three.jsの読み込みより後に読み込むようにしてください。 また、3Dink.jsを利用するJavaScriptファイルも3Dink.jsより後に読み込ん でください。 3Dink Project - © 2016 髭散化汰 これを間違えると関数が読み込まれる前に実行してしまうこと になり、正常に動作しません（動いているように見えても一部 機能がおかしかったりします）。
11. 4.1. 注意点 2. モードについて リンクの実装方法により以下の2つのモードがあります。 • 関数モード：JavaScript関数でページ移動を実装。 動作が高速。ただし、一部ブラウザで警告が表示されることがある。また、現時 点でコンテキストメニューを開くことができず、スマホで新規タブを開くことが できない（PCはホイールクリックで可）。よって、PCでは右クリック時にURLを コンソール出力する。デフォルトではこちらが選ばれている。 • Aタグモード：HTMLのアンカータグの挿入により実装。 コンテキストメニューが開ける。リンクを開く際にも警告は出ない。 ただし、タグを挿入することもあって、HTMLの記述に注意事項がある（次頁）。 またマウスだとリンクを開くにはモデルをダブルクリックする必要がある。 3Dink Project - © 2016 髭散化汰
12. 4.1. 注意点 Aタグモードでの注意点について Atagモード使用時は画面と同じサイズの空のタグ（<div></div>など）で囲わ ないと、ちゃんとリンクが現れて来ません。囲えば大丈夫です。 これはparent.style.position = “relative”; としているためです。 3Dink Project - © 2016 髭散化汰 onload = function(){ //hogeは囲うタグに付けたID、 width, heightは任意の定数 document.getElementById('hoge').style.width = width + 'px'; document.getElementById('hoge').style.height = height + 'px'; document.getElementById('hoge').appendChild(renderer.domElement); ︙ 例えば、JavaScript側でLoad時に以下を実行します。
13. 4.2 3Dink.jsの主な機能 • メソッド • モデルにURL設定（3Dink化） • 常に新しいタブで開く • オンマウス時にモデルを光らせる • 発光色の変更 • Boxオブジェクトの作成 3Dink Project - © 2016 髭散化汰 • プロパティ • マウスカーソルの設定 通常時 3Dinkと重なった時 今回紹介する機能（一部） ※なお、Three.js の詳しい用法はこの資料では割愛します。
14. 4.3 記述の流れ 1. まず、Three.jsでオブジェクト（Mesh）を生成します（以下、モデルと呼ぶ）。 既製モデルをファイルから読み込む場合はここで3Dink.jsが使えるように処理 をします。 2. モデルにURLを結びつけます。（3Dink化） 3. モデルに適宜3Dinkのパラメーターを設定します。 4. 適宜3Dinkの設定をして、3Dink.jsのイベント関数を追加します。 5. モデルをSceneに追加します。 （3Dinkの設定はSceneへの代入後でも構いません） 3Dink Project - © 2016 髭散化汰
15. 4.3.1 既製モデルの読み込み ここでは例として、.objと.mtlファイルを読 み込む場合を見ます。 右の図の赤い箇所が3Dinkに関する処理です。 なお、上のobject.materialの設定はモデルを 発光させない場合は不要です。 その下のaddURLは次頁で説明します。 3Dink Project - © 2016 髭散化汰 const mtlLoader = new THREE.MTLLoader(); mtlLoader.setPath( 'Obj/' ); mtlLoader.load('Home.mtl',function(materials){ materials.preload(); const objLoader = new THREE.OBJLoader(); objLoader.setMaterials(materials); objLoader.setPath( 'Obj/' ); objLoader.load('Home.obj',function(object){ object.position.set(10, 10, 10); object.material = {emissive:0}; Js3Dink.addURL( object, "./" ); scene.add( object ); }); }); ※Loaderの使用にはThree.js本体とは別 のファイルも読み込む必要があります。
16. 4.3.2 モデルの3Dink化 まず、3Dink.jsを利用する前に名前空間の確認です。 3Dink.jsでは名前空間オブジェクトにJs3Dinkと名付けています。よって、3Dink.jsの プロパティを直接呼び出す際は “Js3Dink.～” で始まります。 上記がモデルの3Dink化メソッドです。第一引数に3Dink化したいモデル、第二引数 にURLを代入します。ただし、URLは文字列なのでクォーテーションで囲う必要が あります。以後文字列の引数は全て同様です。 なお、このメソッドに戻り値は有りません。 3Dink Project - © 2016 髭散化汰 Js3Dink.addURL( model, url )
17. 4.3.3 パラメーターの設定 右の４つのメソッドはパラメーターを決めるもので す。いずれも戻り値はありません。また、いずれも 設定を変えない時は呼び出す必要はありません。 一つ目は常に新しいタブを開くかどうかの設定です。 二つ目以降はマウスオーバー時の発光に関する関数 ですが、第二引数は必須ではなく、もし ’ALL’ だった 場合は個別に設定が変更されていない全てのモデル を同じ設定をします。 shineColorは通常’#888888’のような16進表記の色が入 ります。 3Dink Project - © 2016 髭散化汰 // メソッド model.link.setNewTab( 'ON' ) model.link.setShineOnMouse('ON', 'ALL') model.link.setShineOnTouch('ON', 'ALL') model.link.setShineColor( shineColor, 'ALL' ) // プロパティ Js3Dink.domEvent.cursorDefault = 'pointer' Js3Dink.domEvent.cursorOn3Dink = 'auto' プロパティはただ代入するのみですが、上記の例は カーソルの形に関するスタイルシートのプロパティ を編集しているので、仕様にある値を代入します。 なお、上記で代入されている値はデフォルト値です。
18. 4.3.4 イベント関数の追加（コード例） 仕上げとしてピンク色の行でRenderer、Scene、 Cameraオブジェクトを渡しています。 最後の赤の行がイベント追加メソッドです。引 数は無くても動きます。第一引数はマウス操作 時のモード、第二引数ではタッチ操作時のモー ドを指定します。 因みに最初の行はBoxを一行で作るメソッドで す。最初の3引数がサイズ、次の3引数が座標、 最後はモデルに貼り付ける画像（テクスチャ） を指定します。 3Dink Project - © 2016 髭散化汰 const model = Js3Dink.createBox( 50, 50, 50, 140, 200, 0 , 'link_texture/hoge.png' ); Js3Dink.addURL(model, 'http://hoge.com'); model.link.setNewTab( 'ON' ); model.link.setShineOnMouse('ON', 'ALL'); const shineColor = 0x555555; model.link.setShineColor( shineColor, 'ALL' ); scene.add(model); Js3Dink.setRendererObj(renderer, scene, camera); Js3Dink.domEvent.addFnc('A', 'Fn');
19. 5. 活用術（どういったことに？） • 3D空間に詳細な情報（取説、Wiki、スペックetc...）への直接リンクを用意 できる → 例えばゲームのチュートリアルやPCの各スペック詳細などに活用 • ストリートビューのようなアプリ → そこにある建物などの情報に直接アクセスできる！ 3Dink Project - © 2016 髭散化汰
20. 5. 活用術（どういったことに？） • 好きなキャラクターを移動させてリンクを巡る → 一緒に移動している気分になれる！ • モデルによる表現と配置の工夫によってリンクを視覚的に表現 →オブジェクト指向なリンクマップを作成出来る 3Dink Project - © 2016 髭散化汰
21. 6. 今後の進化の予定 現在の機能ではマウスカーソルによって3Dinkを選択します。 これをオブジェクト同士の衝突によって行えれば、より3次元空間を活用 した利用が可能になると考えられます。 つまり、指定したモデルが3Dinkに触れたときにリンク先を開いたり、操 作出来る様になったら良いなと考えています。 3Dink Project - © 2016 髭散化汰
22. 7. 配布について • ライセンス（利用許諾条項） The Apache License, Version 2.0 http://www.apache.org/licenses/LICENSE-2.0 （和訳版、参考まで） https://ja.osdn.net/projects/opensource/wiki/licenses%2FApache_License_2.0 • リポジトリ（ソースファイルの公開場所） https://github.com/takashift/3Dink.js 3Dink Project - © 2016 髭散化汰
23. 資料 プロジェクト公式ツイッター 更新情報などを公開します。 @3Dink_Project リファレンス・Examplesなど詳しい情報は下記メインサイトへ http://3dink.webcrow.jp/ 3Dink Project - © 2016 髭散化汰 （2016/11/18現在） 3Dink.js ver1.1.7c