LoginSignup
8
9

More than 5 years have passed since last update.

3Dモデルをクリックするとハイパーリンクが開けるライブラリを作った。

Last updated at Posted at 2017-12-10

WebGL(HTML5のcanvas要素) の 3Dオブジェクトを簡単にハイパーリンクにするライブラリがありそうで無かったので、デファクトになっている Three.js のラッパーライブラリを作成しました。

作ったライブラリ

3Dink.js

https://github.com/takashift/3Dink.js

【2018年6月16日追記】npmでも公開しました。

https://www.npmjs.com/package/3dink

解説

これを使うと、3Dモデルをクリックした時に、指定したリンク先を開くことが出来るようになります。

なお、ハイパーリンクと化した3Dオブジェクトには名前が無いので、勝手に 3Dink と名付けました(以下、こう呼びます)。

一応公式サイトやスライドがあるので、詳しい説明などはリンクで紹介します。

公式サイト

http://3dink.webcrow.jp/

チュートリアル(サンプル)

https://higechira.hatenablog.com/entry/2018/12/21/013459

リファレンス

http://3dink.webcrow.jp/reference/index.html

リリースノート(変更点)

http://3dink.webcrow.jp/3Dink_history.html

デモ映像

https://www.youtube.com/watch?v=x_PDbOtZiOs

使い方

2.0.0より名前空間の変更(Js3Dink -> DDDINK)や setRendererObj() -> readRendererObj() があったりしますが(リリースノート参照)、使用例やスライドにサンプルコードが載っているので参考まで。
リファレンスは最新バージョン分用意しています。

最低3行で3Dink化できます。以下のような感じです。

// 3Dオブジェクト(model)にハイパーリンクを追加して3Dink化する。
DDDINK.addURL(model, "http://3dink.webcrow.jp/reference/index.html");
// 3Dinkを検出するために、three.jsの3つのオブジェクトを渡す。
DDDINK.readRendererObj( renderer, scene, camera );
// リンク参照時のDOMイベントを追加する関数(引数でリンクの実装方式を指定可能)
DDDINK.domEvent.addFnc();

2つの実装方式

モデルをクリックしてリンクを開けるようにする機能は2つの実装方式があります(利用時はどちらかを指定します。指定方法、デフォルトの指定は最新のリファレンスを参照)。

JavaScript の関数で実装する方式(関数モード)

動作がこちらの方が高速なのと、もう一方の実装方式を使用する際はちょっと手間があるので、指定しない場合はこちらで実装されます。
ただし、一部ブラウザで警告が表示されることがあります。また、現時点でコンテキストメニューを開くことができず、スマホで新規タブを開くことができません( PC はホイールクリックで可)。
よって、 PC では右クリック時に URL をコンソール出力します。

JavaScript で HTML のアンカータグを追加する方式( A タグモード)

HTML のアンカータグの挿入により実装しています。
この方式は普通のテキストリンクと同じなので、コンテキストメニューを開くことが出来、リンクを開く際にも警告は出ません。
ただし、ちょっと無理矢理な実装になっています。

注意点として、使用時は画面と同じサイズの空のタグ(<div></div>など)で囲わないといけません(詳しくはスライドの P.12 を参照)。

また、マウスだとリンクを開くには 3Dink をダブルクリックする必要があります。

余談

2014年、都内某所。
Web GL なのに、3Dモデルにハイパーリンクを付けられないとは何事だと一人の少年(18)が立ち上がった…

このライブラリ、実は最初にリリースしてから3年経っています。

当時は GitHub とか( Three.js が GitHub で公開されていたので存在は知っていたけど)使ったことは無かったので、Zip でサイトに公開していました。

そして、それから2年。
人様にライブラリとして使ってもらうにはちょっとお粗末だったものの、放置を経て手直しした上で GitHub に公開されました。

あと、Mashup Awards に参加したり。
http://ma10.mashupaward.jp/works/1491
https://hacklog.jp/works/49217

正直このライブラリを使った何かを作った方が良かったと思います(って思ってたんだけどそこまでの気力は無かった)。

3年経った今回、今までリファレンスが無かったので、用意することにしました。

というのも、twitter@komakinex4t さんがぜひ使いたいとのことでわざわざリプを投げてくれたのですが、使い方に困っていて申し訳なかったためこの機会に書きました(前々から作ろうという気持ちはあったものの先延ばしに、、)。

komakinex4tさんありがとうございます!

8
9
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
9