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

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

新規登録して質問してみよう
ただいま回答率
85.83%
WebVR

WebVRは、WebでVR(Virtual Reality)体験を実現可能にする技術。Oculus RiftといったVRデバイスをブラウザで直接使用できるAPIです。

Three.js

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

JavaScript

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

WebGL

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

Q&A

受付中

CSS3Dレンダリングで3D空間に生成した要素をWebVRで見るようにはできないのでしょうか??

afroscript
afroscript

総合スコア148

WebVR

WebVRは、WebでVR(Virtual Reality)体験を実現可能にする技術。Oculus RiftといったVRデバイスをブラウザで直接使用できるAPIです。

Three.js

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

JavaScript

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

WebGL

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

1回答

1グッド

3クリップ

4421閲覧

投稿2016/08/07 14:58

編集2016/08/07 22:29

WebGL(Three.js)、WebVRともに初心者のものです。

以前このような質問をさせて頂きました。

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

https://teratail.com/questions/40572

こちらで頂いた回答を元に、
CSS3DRenderer.jsを使って、teratailを3D空間に表現するというのはできた(下記参照)のですが、

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

これを次はVR空間で表現したい(スマホVRで見れるようにしたいです)と考えています。

そこで、こちらの記事を参考に、いろいろと書き換えてみたのが下記なのですが、おそらくそもそもCSS3DRenderer.jsがVRに対応してないみたいで実現できず。。。

※ソースコード:https://github.com/afroscript/teraVR360
※デモ(真っ黒画面で何も表示されません。。。Consoleからエラーメッセージは確認できます):
http://usaqwako.sakura.ne.jp/teraVR360/
Uncaught TypeError: cssRenderer.setPixelRatio is not a functionとのエラーメッセージが出てます

何か実現できる方法はあるのでしょうか??
あるいは今のCSS3DRenderer.jsを使った方法でも、何か改善すれば実現できるのでしょうか??

ヒント等でもけっこうです。
どなたかご教示いただけますと幸いでございます…!!

よろしくお願いいたします。

一応、現在書いているJavaScriptを掲載しておきます。(上記のGitHubにあるmain.jsと同じものです)

JavaScript

1/* 2 * WebGLRendererの生成 3 */ 4var renderer = new THREE.WebGLRenderer({antialias: true}); 5renderer.setSize(window.innerWidth, window.innerHeight); 6renderer.setPixelRatio(window.devicePixelRatio); 7//CanvasをDOMツリーに追加 8document.body.appendChild(renderer.domElement); 9 10 11/* 12 * CSS3DRendererの生成 13 */ 14var cssRenderer = new THREE.CSS3DRenderer(); 15cssRenderer.setSize(window.innerWidth, window.innerHeight); 16cssRenderer.domElement.style.position = 'absolute'; 17cssRenderer.domElement.style.top = 0; 18cssRenderer.domElement.style.margin = 0; 19cssRenderer.domElement.style.padding = 0; 20cssRenderer.setPixelRatio(window.devicePixelRatio); 21document.body.appendChild( cssRenderer.domElement ); 22 23 24/* 25 * シーンの追加 26 */ 27var scene = new THREE.Scene(); 28var cssScene = new THREE.Scene(); 29 30 31/* 32 * カメラの生成 33 */ 34var fov = 75; 35var aspect = window.innerWidth / window.innerHeight; 36var near = 0.1; 37var far = 10000; 38var camera = new THREE.PerspectiveCamera(fov, aspect, near, far); 39var camera_position_x0 = 0; 40var camera_position_y0 = 0; 41var camera_position_z0 = 0; 42camera.position.set(camera_position_x0,camera_position_y0,camera_position_z0); 43 44 45/* 46 * VR用コントローラを生成(OrbitControlsは一旦//で消してる) 47 */ 48var controls = new THREE.VRControls(camera); 49// var controls = new THREE.OrbitControls(camera, renderer.domElement); 50 51 52/* 53 * VREffectの生成(2分割画面を構築する) 54 */ 55var effect = new THREE.VREffect(renderer); 56effect.setSize(window.innerWidth, window.innerHeight); 57var cssEffect = new THREE.VREffect(cssRenderer); 58cssEffect.setSize(window.innerWidth, window.innerHeight); 59 60 61/* 62 *VRマネージャの生成 63 */ 64var manager = new WebVRManager(renderer, effect); 65var cssManager = new WebVRManager(cssRenderer, cssEffect); 66 67 68////////////////////////////////////////////////////// 69/* 70 *WebGLSceneにオブジェクトを追加していく 71 */ 72//Object(床をつくってみる) 73var pcWidth = 256; 74var pcHeight = 256; 75var floorGeo = new THREE.PlaneGeometry(pcWidth,pcHeight); 76var floorMesh = new THREE.MeshBasicMaterial({color:0xc0c0c0}); 77// var floorMesh = new THREE.MeshBasicMaterial({wireframe:true}); 78var floor = new THREE.Mesh( floorGeo, floorMesh ); 79var objePositionX = 0; 80var objePositionY = 0; 81var objePositionZ = -500; 82floor.position.set(objePositionX, objePositionY, objePositionZ); 83// floor.rotation.x = Math.PI/2; 84scene.add( floor ); 85 86 87/* 88 *cssSceneにオブジェクトを追加していく 89 */ 90var element = document.createElement('iframe'); 91element.src = 'https://teratail.com/'; 92element.style.width = pcWidth + 'px'; 93element.style.height = pcHeight + 'px'; 94// create the object3d for tjhis element 95var cssObject = new THREE.CSS3DObject( element ); 96// we reference the same position and rotation 97cssObject.position.set(objePositionX, objePositionY, objePositionZ); 98cssObject.rotation = floor.rotation; 99// add it to the css scene 100cssScene.add(cssObject); 101 102 103/* 104 * Lightをシーンに追加 105 */ 106var light = new THREE.DirectionalLight(0xffffff); 107light.position.set(0,30,-50); 108scene.add(light); 109cssScene.add(light); 110 111 112/* 113 *環境光を追加 114 */ 115var ambient = new THREE.AmbientLight(0x333333); 116scene.add(ambient); 117cssScene.add(ambient); 118 119 120/* 121 *補助軸の表示(最終的に消す) 122 */ 123// var axis = new THREE.AxisHelper(1000); 124// cssScene.add(axis); 125// scene.add(axis); 126 127 128 129/* 130 *アニメーションループ 131 */ 132var lastRender = 0; 133function animate(timestamp) { 134 // var delta = Math.min(timestamp - lastRender, 500); 135 lastRender = timestamp; 136 137 //VRコントローラのupdate 138 controls.update(); 139 140 //VRマネージャを通してシーンをレンダリング 141 manager.render(scene, camera, timestamp); 142 143 //アニメーションループ 144 requestAnimationFrame(animate); 145} 146 147// アニメーションの開始 148animate(performance ? performance.now() : Date.now());
ikuwow👍を押しています

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

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

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

下記のような質問は推奨されていません。

  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答1

2

こんにちは。
CSS3DRenderer.jsは使ったことないのですが、僕もCSSでwebVRを少し試してみていて、今回の件は、このまま(WebVR Boilerplate)では出来ないのではないかと思っています。
※あくまでもいまのところの僕の見解で、そこまで詳しい知識の裏付けはないので参考までに・・・

まず、出来ないと思う理由ですが、
通常のthree.jsのTHREE.WebGLRendererなどのレンダラーはcanvasに描画しますが、
CSS3DRendererはcanvasを使用しないでDOM要素のtransformスタイル等で3D表現しています。
そうなると、これをVRにする(画面を左右に分割する)には、DOM要素を複製して左右に並べる必要があります。

なので、WebVR Boilerplate等を使ったVR処理(ひとつの3D空間を二つのカメラで撮ってcanvasにレンダリング)では根本的なところが違うのではないかなと。

ちなみに前回のご質問のスレに遅レスさせていただいた、以前僕が試してみたCSSでVR表示も、同じDOM構造を2つ作って左右に表示してます。

ということで、今回の件をVRにする一番シンプルな方法(=チカラワザw)は下記なのかなと。
(※サンプルコード書くと逆にややこしいかもなので、行程の羅列のみで失礼します。)


1)divを2つ用意し、横幅50% 縦幅100%で左右に並べる(ovreflow:hidden)
2)両方のdivの中にiframeを用意し、https://teratail.com/を読み込む
3)マウス操作や端末のジャイロセンサーなどで両方のiframe要素のtransform:rotate3dなどを変化させる


3)が面倒なときは両方のdivの中にそれぞれhttp://usaqwako.sakura.ne.jp/3Dteratail/の状態を作ってからiframeの状態を連動させるとかですかね。処理重くなっちゃうかもですが・・・
僕はTHREE.DeviceOrientationControls.jsを改造して流用してみました。

これで、(WebVR Boilerplateを使用したときのようなデバイスチェックや左右エリアの周囲のゆがみ補正などはつかないですが)左右に同じteratailの板が表示されるので、googleCardboardなどで見ると一応VRになります。
(このときは奥行き感を出すのに少し工夫してますがとりあえず省きます。)

以降は上記や他の情報をもとに今回の仕様が実現できた際の注意ですが、VRにしてゴーグルなどで見ると、(コントローラーがなければ)iframe内の操作ができなくなります。
※ハコスコ2眼など下から指を入れて画面が触れるゴーグルならなんとかタップできるかもですが・・・

3Dオブジェクトに別なhtmlページを貼るのって、3Dでありながら、スクロールやaタグなどのリンクが操作出来るのが結構大きな強みかなと思うのですが、それができなくなるので、その点をどう対処するか(注視点などを利用するなど)を考える必要があるかもなと思います。

以上、長くなってしまいましたが、参考までに。

このスレタイ僕も気になるので引き続きフォローさせていただきます!

投稿2016/08/24 07:39

mitsuru_cbc

総合スコア31

afroscript, ikuwow👍を押しています

下記のような回答は推奨されていません。

  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.83%

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

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

質問する

関連した質問

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

WebVR

WebVRは、WebでVR(Virtual Reality)体験を実現可能にする技術。Oculus RiftといったVRデバイスをブラウザで直接使用できるAPIです。

Three.js

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

JavaScript

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

WebGL

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