アドカレ用：PlayCanvasでEngine Standaloneなプロジェクトを作る

にー兄さん

参考：

にー兄さん

環境：

node v20.9.0
pnpm 9.13.2
vite 6.0.1
pc: 2.2.2

にー兄さん

いつもの通り、pnpm create viteしてvscodeで開く

にー兄さん

index.html

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Vite + TS</title>
</head>

<body>
  <canvas id="renderCanvas"></canvas>
  <script type="module" src="/src/main.ts"></script>
</body>

</html>

style.css

html,
body,
#renderCanvas {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: unset;
  border: none !important;
  outline: none !important;
  display: block;
}

main.ts

import "./style.css";

const main = () => {
  const renderCanvas =
    document.querySelector<HTMLCanvasElement>("#renderCanvas");
  if (!renderCanvas) {
    return;
  }

  console.log("hello");
};

main();

にー兄さん

import "./style.css";

import {
  Application,
  Camera,
  Color,
  Entity,
  FILLMODE_FILL_WINDOW,
  RESOLUTION_AUTO,
} from "playcanvas";

const main = () => {
  const renderCanvas =
    document.querySelector<HTMLCanvasElement>("#renderCanvas");
  if (!renderCanvas) {
    return;
  }

  const app = new Application(renderCanvas);
  app.setCanvasResolution(RESOLUTION_AUTO);
  app.setCanvasFillMode(FILLMODE_FILL_WINDOW);
  app.start();

  const camera = new Entity();
  camera.addComponent("camera", {
    clearColor: new Color(0.3, 0.3, 0.7),
  } as Camera);
  camera.setPosition(0, 0, 3);
  app.root.addChild(camera);

  const light = new Entity();
  light.addComponent("light");
  light.setEulerAngles(45, 45, 0);
  app.root.addChild(light);

  const box = new Entity();
  box.addComponent("model", { type: "box" });
  app.root.addChild(box);

  app.on("update", (dt: number) => {
    box.rotate(10 * dt, 20 * dt, 30 * dt);
  });
};

main();

にー兄さん