質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.54%
Three.js

Three.jsはWebGLをサポートしているJavaScriptの3D描画用ライブラリです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

WebGL

WebGL(ウェブジーエル)は、ウェブブラウザで 3次元コンピュータグラフィックスを表示させるための標準仕様です。

Q&A

解決済

3回答

5130閲覧

3D空間内でWebサイトを表示する方法は?

afroscript

総合スコア148

Three.js

Three.jsはWebGLをサポートしているJavaScriptの3D描画用ライブラリです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

WebGL

WebGL(ウェブジーエル)は、ウェブブラウザで 3次元コンピュータグラフィックスを表示させるための標準仕様です。

1グッド

3クリップ

投稿2016/07/09 06:41

編集2016/08/07 14:14

Three.js初心者です。

タイトルの通りなのですが、
Three.jsで3D空間にTHREE.PlaneGeometryなどで壁を表示させ、
そこに特定のWebサイトを表示させるというをしたいと思っております。

例えば

イメージ説明

上記のような3D空間の左のうす黄緑壁に、

イメージ説明

こんな感じでteratailが見れるみたいな感じです。

(2次元でいうところのiframe的な感じですかね...??説明分かりづらかったらすみません。。。)

自分でも調べてみてはいるのですが、特に例が見つからず。。。
(というか、何てググればいいかもよく分からず困っております。。。)

どうやったらできるのでしょうか?
そもそもthree.jsで実現可能なのでしょうか...??

ヒントでもいいので、どなたか教えていただけると幸いです...!!

#追記(2016/08/07)
ここで頂いた回答を元に実現できました!!
作ったものを貼っておきます。

ソースコード
https://github.com/afroscript/3Dteratail
デモ
http://usaqwako.sakura.ne.jp/3Dteratail/

kei344👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

5

ベストアンサー

僕もあまり細かくは見ていなくて内容は把握していないのですが、参考程度にリンク貼っときます。
demo1
demo2
解説ページ
ぱっと見、やっていることは先の回答のようにリアルタイムでサイトをキャプチャしているのではないかと思います。(demo2の方で読み込みの様子などが見られるかも?)
多分やりたいこととしては、上記URLの通りだと思います。

いやあ、WebGLでHTMLページのレンダリングは夢がありますよね〜〜
何か他に情報あったら教えてください!!

投稿2016/07/09 16:45

nami634

総合スコア188

223horn, afroscript, youkan_, mitsuru_cbc👍を押しています

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

afroscript

2016/07/09 17:19

>nami634さん おぉっ…!!!まさにこれです!!!これを探しておりました!!! 貴重な情報ありがとうございます!! 試してみます!!! (ちなみにちょっと追加で調べてみたたんですが、CSS3のtransformを使ってもできるようです:)) http://nulldesign.jp/log/js3d_prototype/
guest

2

こんにちは。

以下のウェブサイトが参考になるかもしれません。
http://webnaut.jp/markup/618.html

具体的には、サイトを直接表示するのではなく、サムネイル画像とリンクという形です。

サムネイル画像をリアルタイムでウェブサイトからキャプチャできるようなAPI(http://creator.cotapon.org/articles/api/webページが撮れる画面キャプチャapi)などを組み合わせられれば、よりご希望のものに近づくのかもしれません。
上記URLが参考になるか分かりませんが…

ほとんど知識がないので、ご希望のイメージと違ったら申し訳ないですが、何かのヒントになれば幸いです。
以降の回答者様、お願い致します。

投稿2016/07/09 07:06

編集2016/07/09 07:08
223horn

総合スコア364

afroscript, youkan_👍を押しています

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

afroscript

2016/07/09 10:49

(あ、つっつんだ。ホルンの人だ(・∀・)w) おぉっ!あざます!! だいぶイメージに近いものができそです!!
guest

1

遅レス失礼します。
僕も3D内でのサイト表示に興味がありいろいろ試していたところでしたので参考までに回答させていただきます。

個人的な意見ですが、
サイト表示部分以外のコンテンツ(サンプルの濃い緑や青い壁の部分)がどのようなものか、と
3D空間内に表示したサイトが"サイトとして"機能するものか、サムネイル扱いか、
で対応が変わるかなと。

空間内に球体など3D表現がある場合や、サイトを"サムネイル"としてキャプチャを貼ればいい場合などは、
他のみなさんの回答のようにThree.jsにキャプチャを貼るのがベストと思いますが、
貼り付けたサイトのaタグリンクなどをクリッカブルに機能させるのであれば、
Three.jsを使わずに、nami634さんの回答の返信で挙げていられるようなCSSを使ったもののほうが、
aタグリンクやvideoなどのメディアもそのまま使用出来るのでいいかなと思っています。

https://webgl.souhonzan.org/entry/?v=0649
総本山さんで紹介されてるこのコンテンツとか、すごい上手くやってるなと。

ちょっと趣旨からはズレますが、cssだけでどれだけ3D表現できるか(VR対応)とかもやってみましたので参考までに。
http://cardboardclub.jp/lab/cssvr/
(css3dがwebGLかどうか的な話は置いといて)

投稿2016/07/27 03:28

mitsuru_cbc

総合スコア31

afroscript👍を押しています

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.54%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

同じタグがついた質問を見る

Three.js

Three.jsはWebGLをサポートしているJavaScriptの3D描画用ライブラリです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

WebGL

WebGL(ウェブジーエル)は、ウェブブラウザで 3次元コンピュータグラフィックスを表示させるための標準仕様です。