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

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

総合スコア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クリップ

3927閲覧

投稿2016/08/07 14:58

編集2022/01/12 10:55

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

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