馬をくるくるさせよう！

# はじめに
今夏、馬が名刺上に現れるAR名刺を作りました。現れた馬をタップすると、私のポートフォリオサイトに遷移します。この名刺をなかなか気に入っており、今年は出会う人出会う人に名刺を配り歩いてきました。

![1000003435.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2065133/97d706d8-035f-b876-c67d-b986a8afc48c.png)

https://qiita.com/hiroki-yod/items/779674e3c89559783a0f

今冬、今度はポートフォリオサイトの方をアップデートしました。名刺に現れた馬をポートフォリオサイトの方にも出現させ、くるくるできるようにしました。ぜひポートフォリオサイトにアクセスして、遊んでみてください。

![スクリーンショット 2023-12-04 14.18.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2065133/674c3ef7-9d9c-96d7-53bc-8f7fa886f137.png)

https://hiroki-yod.com/

今回の記事では、馬をくるくるさせる方法を簡単にまとめます。

# くるくるの作り方

### 使用したバージョン

"next": "13.3.0",
"three": "^0.156.1",
"three-stdlib": "^2.25.1"

### 1. 画面に馬を表示する
まずは、次のように Next.js と Three.js を利用して、画面上に馬を表示させましょう。

![スクリーンショット 2023-12-04 14.29.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2065133/1fbcd7f3-3ffb-bb95-ab5a-f4dd073ad2cd.png)

```js
import * as THREE from "three";
import { Canvas, useLoader } from "@react-three/fiber";
import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
import { MTLLoader } from "three/examples/jsm/loaders/MTLLoader";
import { DDSLoader } from "three-stdlib";

THREE.DefaultLoadingManager.addHandler(/\.dds$/i, new DDSLoader());


const Scene = () => {
    const materials = useLoader(MTLLoader, "Horse.mtl");
    const obj = useLoader(OBJLoader, "Horse.obj", (loader) => {
        materials.preload();
        loader.setMaterials(materials);
    });

    return <primitive object={obj} scale={0.002} />;
};

export default function App() {
    return (
        <>
            <div className="h-screen w-screen">
                <Canvas>
                    <Scene />
                </Canvas>
            </div>
        </>
    );
}
```

### 2. 馬にライトを当てる
馬が真っ黒になっていたのは、ライトが当たっていないことが原因です。光源を設定してあげましょう。

![スクリーンショット 2023-12-04 14.38.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2065133/099e5ae7-3b5f-40ad-2355-6247f6d9df63.png)

```js
export default function App() {
    return (
        <>
            <div className="h-screen w-screen">
                <Canvas>
                    <ambientLight intensity={5} />
                    <Scene />
                </Canvas>
            </div>
        </>
    );
}
```

### 3. 馬を正面に向ける
馬が真下を向いてしまっています。こちらに向けてあげましょう。

![スクリーンショット 2023-12-04 14.47.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2065133/b53679ee-8553-cabe-8f84-715dcebdfa87.png)

```js
const Scene = () => {

    // オブジェクトの基本情報
    const materials = useLoader(MTLLoader, "10026_Horse_v01-it2.mtl");
    const obj = useLoader(OBJLoader, "10026_Horse_v01-it2.obj", (loader) => {
        materials.preload();
        loader.setMaterials(materials);
    });

    // オブジェクトの角度や位置
    obj.rotation.x = Math.PI / -2;
    obj.rotation.z = Math.PI / -8;
    obj.position.y = -1.5;

    return <primitive object={obj} scale={0.002} />;
};
```

### 4. 馬をくるくるできるようにする
今のままでは、馬は同じ方向を向いたままで、好きな方向にくるくるさせることができません。操作できるようにしてあげましょう。

![スクリーンショット 2023-12-04 15.13.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2065133/fef464cd-73ff-2fe4-18a3-7ccc82b106b6.png)
![スクリーンショット 2023-12-04 15.13.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2065133/535adb64-64bf-c0ef-296b-f2fcf3168a15.png)
![スクリーンショット 2023-12-04 15.14.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2065133/f0d1d68f-7d79-1268-9c61-dde1ab0c2393.png)

```js
export default function App() {
    return (
        <>
            <div className="h-screen w-screen">
                <Canvas>
                    <ambientLight intensity={5} />
                    <Scene />
                    <OrbitControls />
                </Canvas>
            </div>
        </>
    );
}
```

以上の過程で、馬をくるくるできるようになりました。
読んでいただいた皆さんも、ぜひ何かをくるくるさせてみてはいかがでしょうか。