💬

【React Three Fiber】Reactで作る３D【#２Your First Scene】

2023/03/23に公開

React

Three.js

React Three Fiber

tech

【#２Your First Scene】

YouTube: https://youtu.be/81JZJNNS_Ac

https://youtu.be/81JZJNNS_Ac

今回は公式ドキュメントのチュートリアルを使用して、
３Dのオブジェクトの表示について解説します。

まずは、背景が明るいと少し見ずらいので、背景色を暗めに設定します。
こちらは暗めであればお好きな色で大丈夫です。

src/index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  background: darkblue;
}

こちらの設定ができましたら、
公式のドキュメントを上から順に進めていきます。

src/App.tsx

import './App.css'
import { Canvas } from '@react-three/fiber'

function App() {
  return (
    <div className="w-full h-screen">
      <Canvas>
        <ambientLight intensity={0.1} />
        <directionalLight position={[0, 0, 5]} />
        <mesh>
          <boxGeometry args={[2, 2, 2]} />
          <meshStandardMaterial color="red" />
        </mesh>
      </Canvas>
    </div>
  )
}

export default App

「Canvas」が３Dを表示する領域で、
「mesh」のタグの中身が３Dのオブジェクトに関する設定になります。
「mesh」には「Geometry」と「Material」を設定する必要があります。

「ambientLight」は全方向から同じ強さでライトアップすることができ、
「directionalLight」は１方向から直線上にライトを当てる設定になります。

「Material」によるのですが、
３Dのオブジェクトにはライトを当てないと黒い物体が表示されます。

【#２Your First Scene】

Discussion