Babylon.jsの日本語の本出てたので読みました

本

Vite+TypeScript+Babylon.jsでWebARをはじめる本 (技術の泉シリーズ（NextPublishing）) | 堤 海斗 | 工学 | Kindleストア | Amazon

本の感想

説明にもある通り、座標系の説明とか全部すっ飛ばされて、ViteとかAzure Web Hostingとか3D好きそうなオタクがそんな興味なさそうな説明に結構ページが割かれてしまっています。あっさりしてて良い人もいるかも。
この本ではSceneでCreateBoxしてマウスでグリグリさせる方法だけが書いてあります。この本でBabylon.jsを色々学ぶというよりは、取っ掛かり的な書物と感じました。
その代わり、エディタの設定等が詳細に書いてあり、Babylonで型の恩恵を感じられます。設定したら、この本とほぼ同じ内容をCoPilot先輩が全部サジェストしてくれました。
Babylon.jsはMicroSoft製なのに、ドキュメントがドキュメントになっていて、Playgound まであるということに驚きました(MicroSoftなのに良い事してる！？)。
「Viteとかホスティングとか興味ないのでyarn/npm install babylonしてCanvasにCube表示さる方法を教えろ！」という方はp17からp26だけ読めばいいと思います。

物足りなかったので

床と玉生成していじってみました

youtube.com

床と玉の生成とCanvasの生成するコンポーネント

Nextで作ってその中に見て作ったキャンバス入れてたので、コンポーネントを追加した ObjBabylon.tsxを書いて

import * as BABYLON from "@babylonjs/core";
import { render } from "react-dom";
import { useRef } from "react";
import "babylonjs-loaders";

const objToBabyon = async (canvasId: string) => {
  const renderCanvas = document.getElementById(
    canvasId
  ) as HTMLCanvasElement | null;
  if (!renderCanvas) {
    console.log("cant render canvas");
  }
  if (renderCanvas) {
    console.log("render canvas");
    const engine = new BABYLON.Engine(renderCanvas, true);
    const scene = new BABYLON.Scene(engine);

    scene.createDefaultCameraOrLight(true, true, true);
    scene.createDefaultEnvironment();

    var sphere = BABYLON.MeshBuilder.CreateSphere(
      "sphere",
      { diameter: 2, segments: 32 },
      scene
    );

    sphere.position.y = 1;

    // Our built-in 'ground' shape. Params: name, options, scene
    var ground = BABYLON.MeshBuilder.CreateGround(
      "ground",
      { width: 5, height: 10 },
      scene
    );

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

export default function ObjBabylon() {
  const elementId = "renderCanvasObj";
  objToBabyon(elementId);
  return (
    <>
      <canvas id={elementId} ref={useRef(null)}></canvas>
    </>
  );
}

index.tsxはこのようにする、ToyBabylon.tsxは本見て書いたコードが入っている

import type { NextPage } from "next";
import Head from "next/head";
import Image from "next/image";
import styles from "../styles/Home.module.css";
import ToyBabylon from "../components/ToyBabylon";
import ObjBabylon from "../components/ObjBabylon";

const Home: NextPage = () => {
  return (
    <main>
      <h1 className=" text-10xl font-bold text-blue-700">
        本に書いてあったやつ↓
      </h1>
      <ToyBabylon />
      <h1 className=" text-10xl font-bold text-blue-700">床と玉作った↓</h1>
      <ObjBabylon />
    </main>
  );
};

export default Home;

他の本

Packtから9月にめちゃくちゃ面白そうな本が出るらしく全裸待機中

Amazon | Going the Distance with Babylon.js: Building extensible, maintainable, and attractive browser-based interactive applications from start to finish (English Edition) [Kindle edition] by Elster, Josh | Game Programming | Kindleストア

疑問？

.objローダーが動かなくて泣いているので調査中、ホントは親の顔より見たうさぎを読み込みたかった。

終わりに

WebGLでテドリイッセンマン！！とまではいかなくても、仕事でやりたいなぁという気持ちになっています。
自分のdiscordサーバーでBabylonとかTHREEの作業実況してるので良かったら連絡ください discord: nomorepython#5654, twitter: 永久凍結, instagram:nomorepython
たまにAWSキーぽろりもあるよ