emotionを使用してreact-three-fiberのCanvasを全画面表示にする(メモ)

はじめに

react-three-fiberのCanvasで作成した画面はデフォルトだと全画面描画されません。
下の図のようにcanvasの領域が固定化されてしまいます。
今回はこれを、emotionを使って全画面化する方法を紹介します。

emotion適用前のコード

Starsだけの単純なコードです。

index.ts

import type { NextPage } from "next";
import React from "react";
import { Canvas } from "@react-three/fiber";
import { Stars } from "@react-three/drei";

const SampleStarts: NextPage = () => {
  return (
  <Canvas>
    <Stars></Stars>
  </Canvas>
  );
};

export default SampleStarts;

emotionとは？

CSS in JSのフレームワークです。
詳しくはこちら。
https://emotion.sh/docs/introduction

さっそく使ってみる

事前準備

@emotion/reactをインストールします。

npm i @emotion/react

tsconfigの設定変更とbabelの設定ファイルを作成します。
※.babelrcはpackage.jsonと同じ階層に置いてください。

tsconfig.json

  "compilerOptions": {
　　・・・（略）
    "types": ["@emotion/react/types/css-prop"],　←追加
  }

.bablerc

{
    "presets": [
      [
        "next/babel",
        {
          "preset-react": {
            "runtime": "automatic",
            "importSource": "@emotion/react"
          }
        }
      ]
    ],
    "plugins": ["@emotion/babel-plugin"]
  }

index.tsを以下のように書き換えます。
スタイルはオブジェクトスタイルでも、ストリングスタイルでもどちらでも構いません。
ポイントはCanvas要素をdivでラップしてあげているところです。

index.ts

import type { NextPage } from "next";
import React from "react";
import { Canvas } from "@react-three/fiber";
import { Stars } from "@react-three/drei";
import { css } from '@emotion/react'

const theme = css({
  width: '100vw',
  height: '100vh',
  backgroundColor: 'black'
});

const Home: NextPage = () => {
  return (
    <div css={theme}>
      <Canvas >
        <Stars></Stars>
      </Canvas>
    </div>
  );
};

export default Home;

確認

無事全画面にCanvas要素が描画されました。