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

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

新規登録して質問してみよう
ただいま回答率
87.20%
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次元コンピュータグラフィックスを表示させるための標準仕様です。

受付中

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

afroscript
afroscript

総合スコア0

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クリップ

3738閲覧

投稿2016/08/07 14:58

編集2022/01/12 10:55

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

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

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

[https://teratail\.com/questions/40572\]\(https://teratail\.com/questions/40572\)

こちらで頂いた回答を元に、
[CSS3DRenderer.js](https://github\.com/mrdoob/three\.js/blob/master/examples/js/renderers/CSS3DRenderer\.js\)を使って、teratailを3D空間に表現するというのはできた\(下記参照\)のですが、

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

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

そこで、[こちらの記事](https://html5experts\.jp/edo_m18/18552/\)を参考に、いろいろと書き換えてみたのが下記なのですが、おそらくそもそもCSS3DRenderer\.jsがVRに対応してないみたいで実現できず。。。

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

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

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

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

一応、現在書いているJavaScriptを掲載しておきます。([上記のGitHubにあるmain.js](https://github\.com/afroscript/teraVR360\)と同じものです\)

JavaScript

/\* \* WebGLRendererの生成 \*/ var renderer = new THREE\.WebGLRenderer\({antialias: true}\); renderer\.setSize\(window\.innerWidth, window\.innerHeight\); renderer\.setPixelRatio\(window\.devicePixelRatio\); //CanvasをDOMツリーに追加 document\.body\.appendChild\(renderer\.domElement\); /\* \* CSS3DRendererの生成 \*/ var cssRenderer = new THREE\.CSS3DRenderer\(\); cssRenderer\.setSize\(window\.innerWidth, window\.innerHeight\); cssRenderer\.domElement\.style\.position = 'absolute'; cssRenderer\.domElement\.style\.top = 0; cssRenderer\.domElement\.style\.margin = 0; cssRenderer\.domElement\.style\.padding = 0; cssRenderer\.setPixelRatio\(window\.devicePixelRatio\); document\.body\.appendChild\( cssRenderer\.domElement \); /\* \* シーンの追加 \*/ var scene = new THREE\.Scene\(\); var cssScene = new THREE\.Scene\(\); /\* \* カメラの生成 \*/ var fov = 75; var aspect = window\.innerWidth / window\.innerHeight; var near = 0\.1; var far = 10000; var camera = new THREE\.PerspectiveCamera\(fov, aspect, near, far\); var camera_position_x0 = 0; var camera_position_y0 = 0; var camera_position_z0 = 0; camera\.position\.set\(camera_position_x0,camera_position_y0,camera_position_z0\); /\* \* VR用コントローラを生成(OrbitControlsは一旦//で消してる) \*/ var controls = new THREE\.VRControls\(camera\); // var controls = new THREE\.OrbitControls\(camera, renderer\.domElement\); /\* \* VREffectの生成\(2分割画面を構築する\) \*/ var effect = new THREE\.VREffect\(renderer\); effect\.setSize\(window\.innerWidth, window\.innerHeight\); var cssEffect = new THREE\.VREffect\(cssRenderer\); cssEffect\.setSize\(window\.innerWidth, window\.innerHeight\); /\* \*VRマネージャの生成 \*/ var manager = new WebVRManager\(renderer, effect\); var cssManager = new WebVRManager\(cssRenderer, cssEffect\); ////////////////////////////////////////////////////// /\* \*WebGLSceneにオブジェクトを追加していく \*/ //Object\(床をつくってみる\) var pcWidth = 256; var pcHeight = 256; var floorGeo = new THREE\.PlaneGeometry\(pcWidth,pcHeight\); var floorMesh = new THREE\.MeshBasicMaterial\({color:0xc0c0c0}\); // var floorMesh = new THREE\.MeshBasicMaterial\({wireframe:true}\); var floor = new THREE\.Mesh\( floorGeo, floorMesh \); var objePositionX = 0; var objePositionY = 0; var objePositionZ = -500; floor\.position\.set\(objePositionX, objePositionY, objePositionZ\); // floor\.rotation\.x = Math\.PI/2; scene\.add\( floor \); /\* \*cssSceneにオブジェクトを追加していく \*/ var element = document\.createElement\('iframe'\); element\.src = 'https://teratail\.com/'; element\.style\.width = pcWidth \+ 'px'; element\.style\.height = pcHeight \+ 'px'; // create the object3d for tjhis element var cssObject = new THREE\.CSS3DObject\( element \); // we reference the same position and rotation cssObject\.position\.set\(objePositionX, objePositionY, objePositionZ\); cssObject\.rotation = floor\.rotation; // add it to the css scene cssScene\.add\(cssObject\); /\* \* Lightをシーンに追加 \*/ var light = new THREE\.DirectionalLight\(0xffffff\); light\.position\.set\(0,30,-50\); scene\.add\(light\); cssScene\.add\(light\); /\* \*環境光を追加 \*/ var ambient = new THREE\.AmbientLight\(0x333333\); scene\.add\(ambient\); cssScene\.add\(ambient\); /\* \*補助軸の表示\(最終的に消す\) \*/ // var axis = new THREE\.AxisHelper\(1000\); // cssScene\.add\(axis\); // scene\.add\(axis\); /\* \*アニメーションループ \*/ var lastRender = 0; function animate\(timestamp\) { // var delta = Math\.min\(timestamp - lastRender, 500\); lastRender = timestamp; //VRコントローラのupdate controls\.update\(\); //VRマネージャを通してシーンをレンダリング manager\.render\(scene, camera, timestamp\); //アニメーションループ requestAnimationFrame\(animate\); } // アニメーションの開始 animate\(performance \? performance\.now\(\) : Date\.now\(\)\);

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

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次元コンピュータグラフィックスを表示させるための標準仕様です。