馬をくるくるさせよう！

はじめに

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

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

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

くるくるの作り方

使用したバージョン

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

1. 画面に馬を表示する

まずは、次のように Next.js と Three.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. 馬にライトを当てる

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

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

3. 馬を正面に向ける

馬が真下を向いてしまっています。こちらに向けてあげましょう。

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. 馬をくるくるできるようにする

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

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

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