【Three.js】DOMを3D表示できるCSS3DRendererを触ってみた!

はじめましてエンジニアの新田です！
弊社フロントエンジニアチームでは、定期的に勉強会をおこなっています。
最近はWebGLを使用した表現について主に勉強しており、その中でWebGLライブラリであるThree.jsのCSS3DRenderer機能について触ってみたのでご紹介したいと思います。

CSS3DRendererとは？

公式ドキュメントは日本語ページもありますが、CSS3DRendererの項目は英語ページしかないため、要約すると・・・
CSS3 transform プロパティを使用して DOM 要素に階層的な 3D 変換を適用して3D表現ができる機能です。
キャンバスベースのレンダリングを使用せずに、Web サイトに 3D 効果を適用したい場合に特に適していて、DOM 要素を WebGLで作成したコンテンツと組み合わせて使えます。

公式ドキュメント
https://threejs.org/docs/#examples/en/renderers/CSS3DRenderer

基本的な使い方

まずはTHREE.jsを読み込みましょう。
NpmまたはCDN,静的ホスティングからもインストールすることができます。

公式ドキュメント　Installation
https://threejs.org/docs/#manual/ja/introduction/Installation

Three.jsとCSS3DRenderer、CSS3DObjectを読み込みます。
CSS3DRenderer、はThree.jsのアドオンであるため追加でimportが必要になります。

import * as THREE from "three";
import { CSS3DRenderer, CSS3DObject } from 'three/addons/renderers/CSS3DRenderer.js';

CSS3DRendererの設定

 cssrender = new CSS3DRenderer();
 cssrender.setSize(window.innerWidth, window.innerHeight);
 cssrender.domElement.style.position = 'absolute';
 cssrender.domElement.style.top = 0;
 document.body.appendChild(cssrender.domElement);

CSS3DObjectの設定

const cssobj = document.getElementById("css3d");
const css3dobj = new CSS3DObject(cssobj);

//通常のオブジェクトのように、scale,position,rotationを設定できます。
css3dobj.scale.set(1.0 1.0, 1.0);
css3dobj.position.set(0, 0,0);
css3dobj.rotation.set(0,Math.PI / 4, 0);

実際に触って作ってみた

今回は通常のWebGLRendererと併して、3Dモデルを設置してテレビ画面にYoutubeが映っているような表現を作成してみました！

See the Pen
threejs-3droom-with-css3d by bbfront (@bbfront)
on CodePen.0

サンプルの3Dモデルはこちらのサイトからお借りさせて頂きました。
https://sketchfab.com/feed

サンプルでは設置したボタンからカメラを移動できるようにしてみましたが、カメラを移動させてもカメラの移動に合わせてCSSのプロパティの値を変更してくれるようです！

CSS3DRendererはCanvas内にオブジェクトとして追加するわけではなく、擬似的に3D表示をしています。 そのため、three.jsのマテリアルを使用することができないのでリアルな質感を適用したり、シェーダーで複雑な処理をしたい場合には 向いていないですが、モデルを用意せず、手軽に3D表現が行えますし、リンクを貼ったりiframeやyoutube動画を組み込むことができるので、いろいろな使い道があるのではないでしょうか？！

公式のexampleでは、下記のような面白い演出も紹介されています。
https://threejs.org/examples/#css3d_periodictable

今回はCSS３DRendereでYoutubeを３D表示してみましたが、動画を３D空間内に表示する場合、Video Textureという機能も用意されています。

公式ドキュメント
https://threejs.org/docs/#api/en/textures/VideoTexture

公式example（音が出ますのでご注意ください）
https://threejs.org/examples/#webgl_materials_video

公式exampleのように複雑な処理やエフェクトが可能になりますね。
また、次の機会にご紹介できればと思っております！
BBブログでは、今後もWebGLを使用した記事を投稿していきます。ぜひお楽しみに＞＜