Material Demo Page

描画するオブジェクトの材質を指定できるMaterialのデモページです
ここで紹介している以外にも沢山の材質が指定できるので
そちらはThree.jsの公式ドキュメントで見てみて下さい

MeshBasicMaterial


  const MeshBasicMaterial = () => {
    return (
      <Canvas>
        <CameraController />
        <mesh scale={1}>
          <torusGeometry args={[3, 1, 16, 100]}/>
          <meshBasicMaterial
            color='#049ef4'
            // wireframe
          />
        </mesh>
      </Canvas>
    )
  }

光源を必要としないマテリアル
テクスチャをつける事ができたりワイヤーフレームを表示したりできます

MeshNormalMaterial


  const MeshNormalMaterial = () => {
    return (
      <Canvas>
        <CameraController />
        <mesh scale={1}>
          <torusGeometry args={[3, 1, 16, 100]}/>
          <meshNormalMaterial
            flatShading
          />
        </mesh>
      </Canvas>
    )
  }

こちらも光源を必要としないマテリアル
面を表現したりワイヤーフレームを表示したりすることができます

MeshStandardMaterial


  const MeshStandardMaterial = () => {  
    return (
      <Canvas>
        <CameraController />
        <ambientLight intensity={0.7} />
        <pointLight intensity={1} position={[5, 5, 5]} />
        <mesh scale={1}>
          <torusGeometry args={[3, 1, 16, 100]}/>
          <meshStandardMaterial
            color='#049ef4'     // ジオメトリの色
            roughness={0.2}     // 粗さ
            metalness={0.8}     // 金属性
          />
        </mesh>
      </Canvas>
    )
  }

物理ベースレンダリングで、光源を必要とするマテリアル
roughnessは粗さを表し、1に近づくほどのっぺりとなります
metalnessは金属性を表し、1に近づくほど金属っぽくなります

MeshPhongMaterial


  const MeshPhongMaterial = () => {  
    return (
      <Canvas>
        <CameraController />
        <ambientLight intensity={0.7} />
        <pointLight intensity={1} position={[5, 5, 5]} />
        <mesh scale={1}>
          <torusGeometry args={[3, 1, 16, 100]}/>
          <meshPhongMaterial
            flatShading
            shininess={100}
            specular='#d63031'    // 光の反射の色
            emissive='#000000'    // 光によってできる影の色
          />
        </mesh>
      </Canvas>
    )
  }

物理ベースレンダリングで、光源を必要とするマテリアル
光の反射率や、反射の色等を指定することができます