Three.jsで新宿駅構内図を3Dで可視化してみる - Qiita
これは MIERUNE AdventCalendar 2023 24日目の記事です! 昨日は@northprintさんによるSvelteKitでURLクエリパラメーターの操作をするでした。 はじめに この記事では新宿駅の屋内地図データを使用して、Three.jsで3Dによる可視化をします。 DEMOはコチラ 使用するデータ 今回は、G空間情報センターで公開されている「新宿駅屋内地図オープンデータ」の統合版（ShapeFile）を使用します。 データについての詳細は製品仕様書に記載されています。 この記事のように、データの加工利用には以下の出典が必要となります。 コンテンツを編集・加工等して利用する場合は、上記出典とは別に、編集・加工等を行ったことを記載してください。なお、編集・加工した情報を、あたかも国（又は府省等）が作成したかのような態様で公表・利用してはいけません。（コンテンツを編集・
Three.jsとIndexedDBでMMDモデルビューアーを作った - Qiita
はじめに Three.jsにはMMDモデルを読み込んでくれるMMDLoaderというツールがあり、これでMMDモデルを確認できるビューアーアプリを作りたいと思ったのですが、MMDモデルをサーバーにアップロードする形だと著作権的にグレーな気がしました。 そのとき、「ローカルで見るだけならわざわざサーバーに送る必要ないのでは？」ということに気づき、サーバーに送らなくて済むタイプのMMDモデルビューアを作ってみることにしました。 そのために一時的にブラウザからアクセス可能なローカルの領域を用意する必要があるのですが、今回はそれにIndexedDBを使いました。 (Githubのissueを調べたところ、IndexedDBについては何かしら議論したあとがあったのですが、この感じだとまだサポートは無いんだと思います) 作ったもの デモ こちらのデモをご覧ください。 MMDモデル(pmd/pmx)のフ
3D Interactive Asteroid Space Visualization - Asterank
Rotate: left click + drag; Pan: right click + drag Zoom: scroll/middle click + drag; Fullscreen: press f Location of all objects shown is scientifically accurate.
FxUG@Fukuoka 「three.jsはじめましょ」LT資料を公開しました
2013-03-09 FxUG@FukuoakでのLT「three.jsはじめましょ」の資料を公開しました。 FxUGはActionScript, Flexなイベントですが、懐が広く本来なら関係ないthree.jsでのLTを許していただき20分ほどお時間頂きました。 当日は Stage3D Starling, Away3D, Altenativa3D, IN2AR など旬な3D OpenGL関連の話とSocket通信、またそれぞれをモバイルアプリにどう利用するかというワクワクする内容が盛りだくさんのステキなお話が目白押しの一日でした。 three.js は HTML5 canvas で3Dを実現するJavaScriptライブラリなので、3Dつながりということでお許しいただきたいと思います。 WebGLだけでないthree.js もともと three.js は Canvas WebGL のた
これが・・・俺の異能vationだ！ - ずっと君のターン
「あんどうさん最近おっぱいが足りないんじゃないですか？」 Androidの偉い人にそんなことを言われたのは確か今年のはじめくらいでしたか。それを聞いた私は「いきなり何を言ってるんだこの人は」と思うより先に「あぁ、そうかもしれないな・・・」と思ってしまったわけで。 ・・・ で、まぁそんなこんなでやっとそれなりに動くようになったので成果発表。 アプリ: http://technohippy.github.io/oppai/ コントローラ: http://technohippy.github.io/oppai/hand.html ソースコード: https://github.com/technohippy/oppai 操作方法は以下のとおり。 画面の操作 動作 マウスドラッグ 触る カーソルキー 視点を変更する スペースキー ボールをぶつける enterキー 上下に揺らす wキー ワイヤフレーム
JavaScript 3DレンダリングエンジンのThree.jsを試す
こんにちは。 KRAYアルバイトの浅海です。 今回は、最近ちまたで噂のThree.jsで遊んでみようとおもいます。 http://github.com/mrdoob/three.js webgl対応のブラウザで見ている方は、右上に3Dのボックスが表示されていると思います。 Three.jsを使えば、このようなことを簡単にJavascriptで実現できるのです。 半信半疑で使ってみたところ、たしかにThree.jsでは、3D特有の行列計算や数学的思考をせずとも、3Dを表示、操作することができました。 「ちょっとのプログラムで3Dができる。」 この面白さを皆さんに届けたいです。 目次 立方体を表示する 光をあてる テスクチャを貼り付ける マウスで回転させる マウスで移動させる クリック判定する Three.js web上には、HTML5のcanvasを利用した様々なサンプルページやアプリケーシ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
NameBright - Domain Expired
WebGL procedural terrain [three.js]