黒歴史()

もはや黒歴史くらい内容の薄い過去のメタバース記事の続きです。

とはいえ今回も簡易的な3Dとウィンドウシステムのテストですが、体の調子がいいうちにアウトプットしてきます(苦笑)

今回の演目is...

今回やることは

electron(JS&C++?)からTauri(TS&Rust)への切り替え
ThreeJSの実質発展版であるBabylonJS(Typescript版)

の導入でごわす。

導入方法

前提知識

これからはRustの実行環境とマネージャー的なやつのcargoとかpnpmとかnodejsとかを導入済みとして進めていきます。
わかんない人はggって(大変)

んでpnpm create tauri-appしてもいいのですが、私は余分なファイルも持ってこられるのは個人的に(あくまで個人的に)嫌なので一度nextjs(Typescript)で事前に手動配置したものに以下の手順で導入

CLIツール導入
pnpm install --save-dev @tauri-apps/cli


Rustのコード生成
pnpm tauri init

これでsrc-tauriフォルダが生成され最小限の構成で始められます。

次にBabylonJSを導入します。もとはJSのライブラリですが、将来を見越して(?)TS版を導入しています。

pnpm install @babylonjs/core

以下簡易的なキューブ表示用ソース。


import { NextPage } from "next";
import * as BABYLON from "@babylonjs/core";
import { useRef, useEffect } from "react";
import style from '../styles/babylon.module.sass'

const Babylonjs: NextPage = () => {
    const ref = useRef(null);

    useEffect( () => {
        const renderCanvas = document.getElementById(
            "renderCanvas"
        ) as HTMLCanvasElement | null;

        const engine = new BABYLON.Engine(renderCanvas, true);
        const scene = new BABYLON.Scene(engine);


        scene.createDefaultCameraOrLight(true, true, true);

        scene.createDefaultEnvironment();

        const boxSize = 0.3;
        const box = BABYLON.MeshBuilder.CreateBox("box", { size: boxSize });

        box.position.addInPlaceFromFloats(0, boxSize / 2.0, 0);

        engine.runRenderLoop(() => {
            scene.render();
        });
    } )

    return (
        <canvas
            id="renderCanvas"
            className={style.Main}
            style={{ width: 700, height:700}}
            ref={ref}
        ></canvas>
    );
};

export default Babylonjs;

※サンプルなのであまり詳しく説明できないっす。すまそ。

ただ全体的にThreeJSのTS版もといNextJS版の延長線上な感じがします。

行数的には大体一緒ですが、ライブラリがすごい優秀なのでこれだけでマウスでぐりぐりしたりズームとかもできるようになっちゃいます。

いつもの()

以下のリポジトリで(ry

メタバースプラットフォーム開発者募集中!!!!