TypescriptでThree.jsを利用した視力検査の使い方＋他

# 使い方
![vision_test_process.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3455756/b24b724b-c952-2c6b-25e3-7546d214649d.png)
①初期画面です。青色の「START」ボタンを押してください。
②ダイアログの「OK」を押すとボタンが切り替わります。
③上下左右の青色のボタンのいずれかを押して、ﾗﾝﾄﾞﾙﾄ環の切れ目がどの向きにあるのか選んでください。
④最後まで正解したら試験が終了します。ダイアログが出ますので「OK」を押して①に戻ります。

サイトはこちらです。
[視力検査](http://inksoul.html.xdomain.jp/)

# ここからは「他」にあたります
## はじめに
超簡単な視力検査を作りました。「使い方がわかりにくいな～」と思ったので、「使い方」を書いてます。

## 視力検査を作ろうとしたわけ
「私は目が悪いので、簡単に視力検査ができたらな」と思ったのがきっかけです。
「3DCGとwebを組み合わせてみよう」という試みがあります。3Dモデルを使っているのはﾗﾝﾄﾞﾙﾄ環の部分になります。
ﾗﾝﾄﾞﾙﾄ環とは「Cの形をしたマーク」のことです。

## 使用したもの
|ソフト  |プログラミング言語|ライブラリ|プラットフォーム|パッケージマネージャ|
|---    |---             |---      |---|---|
|Maya   |Typescript|Three.js|Node.js|yarn|
|Blender|-|React|-|-|
|VScode |-|Vite|-|-|

##  苦労したこと
### 1. ﾗﾝﾄﾞﾙﾄ環の描画サイズの決定
#### 1. 視力検査でよく見る「C」から調べてみる
NIDEKさんのウェブサイトを参考にしました。

:::note info
NIDEKさんのウェブサイト
[ﾗﾝﾄﾞﾙﾄ環とは](https://www.nidek.co.jp/eyestory/eye_5.html)
[視角と視力の関係](https://www.nidek.co.jp/visitor_general/eyestory/entry-2440.html)
:::

ふむふむへーほー（なるほど）。
- 視力1.0の時、5ｍの距離から測ったときのﾗﾝﾄﾞﾙﾄ環の大きさは7.272mmとなる。ﾗﾝﾄﾞﾙﾄ環の切れ目の大きさは1.454mmになる。
- 視角と視力の関係をグラフにすると、視力は隙間の大きさに反比例する。

ということがわかりました。

スマホやiphoneで測る場合で考えると。

| | 画面からの距離 | ﾗﾝﾄﾞﾙﾄ環の大きさ | ﾗﾝﾄﾞﾙﾄ環の切れ目の大きさ |
|---|---|---|---|
|基本|5m| 7.272mm | 1.454mm|
|１０で割る|50cm | 0.7272mm | 0.1454mm|
|ピクセルへ変換|1889.764px | 2.748px | 0.549px|
|使用したピクセル|無視|2.75px|0.55px|

となります。
はじめは「画面からの距離」を30cmでやるつもりでしたが、視力1.0の時のﾗﾝﾄﾞﾙﾄ環が、潰れて見えなかったので断念しました。

#### 2. 各視力値の時のﾗﾝﾄﾞﾙﾄ環の大きさを求める
次の動画を参考にしました。

:::note info
数学校チャンネルさんの動画
[ﾗﾝﾄﾞﾙﾄ環と関数について](https://www.youtube.com/watch?v=u5_Q0H-dfGs)
:::

y=1.5/x を利用して
x : 視力 
y : ﾗﾝﾄﾞﾙﾄ環の切り目の大きさ(単位mm)
計px : mmをpxに変換した値
使px : 実際に使用した幅のpx 
使px/10 : 実際に使用したpx
ﾗﾝﾄﾞﾙﾄ環 : 使px/10に5を掛けた値

| x     | 0.05|  0.07| 0.1|  0.3|   0.5|  0.6|  0.7|   0.8|  0.9|  1.0|
|---    |---  |---   |--- |---  |---   |---  |---  |---   |---  |---  |
| y     |   30| 21.43|  15|    5|     3|  2.5| 2.14| 1.875| 1.67|  1.5|
|計px   |  113|    80|  56|18.90| 11.34| 9.45| 8.09|  7.09| 6.31| 5.67|
|使px   |  112|    80|  56|   19|    11|    9|    8|     7|    6|    5|
|使px/10| 11.2|     8| 5.6|  1.9|   1.1|  0.9|  0.8|   0.7|  0.6|  0.5|
|ﾗﾝﾄﾞﾙﾄ環| 56  |    40|  28|  9.5|   5.5|  4.5|  4.0|   3.5|  3.0|  2.5|

#### 3. 大体値が一致しているのでヨシ！
1.と2.から、視力1.0の時の値は 2.75px ≒ 2.5px 
大体あってます。
実際にウェブアプリケーションの方で視力1.0を表示しているとき、定規で測ってみてください。大体0.7mmになっていると思います。

### 2. リポジトリの作成ミス
私が知っているリポジトリの作成方法は二つあります。
PowerShell上でリポジトリを作る方法と、github上でリポジトリを作る方法の二つです。
私は両方実行してしまいました。
どういうことかというと、先ず基礎となるフォルダを作成します。次に、git-hub上でリポジトリを作成。その後、PowerShell上でリポジトリを作成していました。するとGit Graphのブランチが二つになってしまいます。

:::note info
github? Git Graph? ブランチ? リポジトリ?と思った方はこちらを参考にしてください。
[github?](https://github.co.jp/)
[Git Graph?](https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph)
[リポジトリ?](https://docs.github.com/ja/get-started/quickstart/create-a-repo)
[ブランチ?](https://docs.github.com/ja/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-branches)
:::

#### ・何が困ったのか？
基礎のフォルダの情報をすべて**消して**しまったことです。
①基礎のフォルダの情報を持ったブランチ、②何も情報がないブランチとして。①から②へブランチを変更してしまい、手持ちのPCのフォルダ情報がすべて消えてしまいました。

#### ・どう解決したのか？
デフォルトのブランチを変更して、②を削除しました。
幸い、ブランチは残っていたので、リポジトリの設定へ移動。デフォルトブランチを①へ変更した後、②を削除することで解決しました。
    
### 3. Material UI Boxのエラー

:::note info
[Material UI Boxとは？](https://mui.com/material-ui/react-box/)
:::

typescriptで次のようにBoxを使用するとエラーが出ます。
子タグ内
```typescript
const function_1 = () => {
	//何らかの処理
    return (
        <div>
            <Box xs={{ pt:30 }}>//この行にエラー
    			//略
            </Box>
        </div>
    )
}

export const function_2 = () => {
	//何らかの処理
    return (
        <div>
            <Box xs={{ pt:20 }}>//この行にエラー
    			//略
            </Box>
        </div>
    )
}

export default function_1
```
親タグ内で
```typescript
function App() {
  return (
    <div className='任意名'>
      <Function_1 />//頭文字を大文字にしないとエラーが出ます    仕様な模様
      <Function_2 />
    </div>
  )
}

export default App
```
#### ・エラー内容
子タグで、両方のBox部分に「Expression produces a union type that is too complex to represent. ts(2590)」
翻訳すると「エクスプレッションは、表現するには複雑すぎる共用体型を生成します。」だそうです。
「複雑すぎだよ！」ということですね。

#### ・試したこと

##### 1. 次のウェブページを参考にした処理
:::note info
[https://zenn.dev/nyatinte/articles/1777eb483319d2](https://zenn.dev/nyatinte/articles/1777eb483319d2)
:::

私はVscodeを使用してます。
Vscodeでやる処理は、
①ショートカット「Ctrl + Shift + P」を入力
②「TypeScript: Select TypeScript Version...」→「Enter」の順に入力
③「Use workspace version」を選択
エラーの解決はせず。

##### 2. ptの指定方法を変えてみた
二つのパターンで下記のように変更。
```typescript
const function_1 = () => {
	//何らかの処理
    const TopSpace = { pt:30 }
    return (
        <div>
            <Box xs={TopSpace}>
    			//略
----------------------------------------------
const function_1 = () => {
	//何らかの処理
    return (
        <div>
            <Box pt={30}>
    			//略
```

エラーの解決はせず。
実際には、function_1はエラーが消えました。しかし、function_2でエラーは残ったままです。

##### 3. Material-UI boxの公式ページをよく見ると…
[Overriding MUI components](https://mui.com/system/react-box/#overriding-mui-components)
を発見！
以下のように、function_1とfunction_2のBoxを変更
```typescript
<Box component="span" pt={3}>
    //略
</Box>
```
エラーが消えました。
エラーをちゃんと見る。
公式を見る。
この二つが重要ですね。

## 最後に
github上に公開しています。
利用してみたい方はこちらのgithubページへアクセスしてください。
[https://github.com/inxole/Vision_test.git](https://github.com/inxole/Vision_test.git)