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

Question

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と同じものです)

/*
 * 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());

Answer 1

こんにちは。
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タグなどのリンクが操作出来るのが結構大きな強みかなと思うのですが、それができなくなるので、その点をどう対処するか(注視点などを利用するなど)を考える必要があるかもなと思います。

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

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