React3Dチュートリアル - カミナシエンジニアブログ

      <Canvas camera={{ fov: 45, position: [0, 8, 12] }}>
        <CameraControls />
        <ambientLight />
        <pointLight position={[0, 10, 10]} />
        <Board
          squares={history[stepNumber].squares}
          handleClick={handleClick}
        />
      </Canvas>

カメラ

<Canvas camera={{ fov: 45, position: [0, 8, 12] }}><Canvas>

Canvasタグではカメラの設定を行うことができ、positionに三次元の座標を指定します。中心座標を少し上から覗きこむような配置にしています。

gyazo.com

CameraControls

<CameraControls />

CameraControlsは、マウスのドラック操作などに合わせてカメラの位置を動かします。

今回扱う３Dオブジェクトはただの板なので、グリグリしても何も面白くありませんが３Dキャラクターなどを「いろいろな角度から見たい」って時に重宝します。

ライティング

<ambientLight />
<pointLight position={[0, 10, 10]} />

もしライトを配置しないと、光のない世界になってしまうので、下の画像のようにただ黒い状態になります。

ライトはいくつか用意されていて、それによって色合いや影のつき方などが変わるので合わせて選ぶ必要があります。ThreeJSのドキュメントを参照してください

2. Boadコンポーネント

Boadコンポーネントは、9つのSquareをマス状に配置するために座標を指定します。

import React from 'react'
import { BoardProps } from '../types'

import Square from './Square'

const positions: [x: number, y: number, z: number][] = [
  [-3, 3, 0],
  [0, 3, 0],
  [3, 3, 0],

  [-3, 0, 0],
  [0, 0, 0],
  [3, 0, 0],

  [-3, -3, 0],
  [0, -3, 0],
  [3, -3, 0],
]

const Board: React.FC<BoardProps> = (props) => {
  return (
    <>
      {props.squares.map((square, index) => {
        return (
          <Square key={index} position={positions[index]} value={square} handleClick={() => props.handleClick(index)} />
        )
      })}
    </>
  )
}

export default Board

3. Squareコンポーネント

Squareは1つずつ、meshとして定義します。

    <mesh
        {...props}
        ref={mesh}
        onClick={(_) => props.handleClick()}
        onPointerOver={(_) => {
          setHover(true);
        }}
        onPointerOut={(_) => {
          setHover(false);
        }}
      >
        <boxBufferGeometry args={[3, 3, 0]} />
        <meshStandardMaterial color={getColor(props.value, hovered)} />
      </mesh>

mesh

meshタグの子要素にある、Geometry(3D形状）とMaterial(素材)を基に、3Dオブジェクトが表示されるようになります。

<boxBufferGeometry args={[3, 3, 0]} />
<meshStandardMaterial color={getColor(props.value, hovered)}

マウスイベント

マス目を選択できるようにするために、クリックとホバーイベントを検知するようにします。

ThreeJSでこれらのイベントを実装する場合、レイキャストを使って当たり判定から行う必要があるのですが、react-three-fiberでは、その処理がラップされていて、 meshタグの属性のonClick、onPointerOver、onPointerOutでイベント時の処理を実装できます。

◯×表示

マス目が選択状態になった場合、◯or×をマス目に表示します。 textGeometryで立体的な文字としてOXが表示されます。（そもそも題材が３D向きではなかったなぁ💦）

    {props.value !== null && (
        <Suspense fallback={null}>
          <Text
            size={1}
            text={props.value}
            color="gray"
            position={props.position}
          />
        </Suspense>
      )}