本
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
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キーぽろりもあるよ
