create-three-bun-ox 0.1.7 → 0.2.0

package/create.js

@@ -36,6 +36,7 @@ for (const file of files) {
   cpSync(join(__dirname, file), join(dest, file));
 }
 
+cpSync(join(__dirname, "assets"), join(dest, "assets"), { recursive: true });
 cpSync(join(__dirname, "src"), join(dest, "src"), { recursive: true });
 
 writeFileSync(
@@ -96,4 +97,4 @@ try {
 
 console.log(`\nDone! Created ${basename(dest)}`);
 console.log(`\n  cd ${arg}`);
-console.log("  bun run dev\n");
+console.log("  bun run dev\n");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-three-bun-ox",
-  "version": "0.1.7",
+  "version": "0.2.0",
   "description": "A minimal Bun + Three.js template with oxlint and oxfmt.",
   "homepage": "https://github.com/spinualexandru/create-three-bun-ox#readme",
   "bugs": {
@@ -12,10 +12,11 @@
     "type": "git",
     "url": "git+https://github.com/spinualexandru/create-three-bun-ox.git"
   },
-  "bin": "create.js",
+  "bin": { "create-three-bun-ox": "create.js" },
   "files": [
     "create.js",
     "README.md",
+    "assets",
     "index.html",
     "server.ts",
     "src",
@@ -27,6 +28,7 @@
   "type": "module",
   "module": "server.ts",
   "scripts": {
+    "npx": "node ./create.js",
     "dev": "bun --hot ./server.ts",
     "start": "bun run dev",
     "fmt": "oxfmt server.ts index.html src package.json README.md tsconfig.json .oxlintrc.json .oxfmtrc.json",

package/server.ts

@@ -4,6 +4,10 @@ const server = Bun.serve({
   port: Number(Bun.env.PORT ?? 3000),
   routes: {
     "/": index,
+    "/assets/*": (req) => {
+      const url = new URL(req.url);
+      return new Response(Bun.file(`.${url.pathname}`));
+    },
   },
   development: {
     hmr: true,

package/src/main.ts

@@ -1,11 +1,12 @@
 import * as THREE from "three";
 import { OrbitControls } from "three/addons/controls/OrbitControls.js";
+import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
 
 const scene = new THREE.Scene();
 scene.background = new THREE.Color(0x0f172a);
 
 const camera = new THREE.PerspectiveCamera(50, innerWidth / innerHeight, 0.1, 100);
-camera.position.set(3, 2, 4);
+camera.position.set(3.8, 2.3, 4.8);
 
 const renderer = new THREE.WebGLRenderer({ antialias: true });
 renderer.setSize(innerWidth, innerHeight);
@@ -16,7 +17,7 @@ document.body.append(renderer.domElement);
 
 const controls = new OrbitControls(camera, renderer.domElement);
 controls.enableDamping = true;
-controls.target.set(0, 0.75, 0);
+controls.target.set(0, 1.1, 0);
 controls.update();
 
 const plane = new THREE.Mesh(
@@ -27,25 +28,62 @@ plane.rotation.x = -Math.PI / 2;
 plane.receiveShadow = true;
 scene.add(plane);
 
-const sphere = new THREE.Mesh(
-  new THREE.SphereGeometry(0.75, 32, 16),
-  new THREE.MeshStandardMaterial({ color: 0xf59e0b, roughness: 0.35, metalness: 0.05 }),
+const logo = new THREE.Group();
+scene.add(logo);
+
+const loader = new GLTFLoader();
+
+loader.load(
+  "/assets/three-logo.glb",
+  (gltf) => {
+    const model = gltf.scene;
+
+    model.traverse((child) => {
+      if (child instanceof THREE.Mesh) {
+        child.castShadow = true;
+        child.receiveShadow = true;
+      }
+    });
+
+    const box = new THREE.Box3().setFromObject(model);
+    const size = box.getSize(new THREE.Vector3());
+    const maxDimension = Math.max(size.x, size.y, size.z) || 1;
+    const scale = 2.2 / maxDimension;
+
+    model.scale.setScalar(scale);
+    model.updateMatrixWorld(true);
+
+    const scaledBox = new THREE.Box3().setFromObject(model);
+    const scaledSize = scaledBox.getSize(new THREE.Vector3());
+    const scaledCenter = scaledBox.getCenter(new THREE.Vector3());
+
+    model.position.x -= scaledCenter.x;
+    model.position.y -= scaledCenter.y;
+    model.position.z -= scaledCenter.z;
+    model.position.y += scaledSize.y * 0.5 + 0.02;
+
+    logo.add(model);
+  },
+  undefined,
+  (error) => {
+    console.error("Failed to load /assets/three-logo.glb", error);
+  },
 );
-sphere.position.y = 0.75;
-sphere.castShadow = true;
-scene.add(sphere);
 
 const light = new THREE.DirectionalLight(0xffffff, 3);
-light.position.set(3, 5, 2);
+light.position.set(3.5, 5.5, 3);
 light.castShadow = true;
 scene.add(light);
 
+const fillLight = new THREE.HemisphereLight(0xe2e8f0, 0x0f172a, 1.2);
+scene.add(fillLight);
+
 const panel = document.createElement("div");
 panel.className = "ui";
 panel.innerHTML = `
   <label>
-    Sphere X
-    <input id="sphere-x" type="range" min="-3" max="3" step="0.01" value="0" />
+    Logo Rotation
+    <input id="logo-rotation" type="range" min="-180" max="180" step="1" value="0" />
   </label>
   <label>
     Light Intensity
@@ -54,12 +92,12 @@ panel.innerHTML = `
 `;
 document.body.append(panel);
 
-const sphereX = panel.querySelector<HTMLInputElement>("#sphere-x");
+const logoRotation = panel.querySelector<HTMLInputElement>("#logo-rotation");
 const lightIntensity = panel.querySelector<HTMLInputElement>("#light-intensity");
 
-if (sphereX && lightIntensity) {
-  sphereX.addEventListener("input", () => {
-    sphere.position.x = Number(sphereX.value);
+if (logoRotation && lightIntensity) {
+  logoRotation.addEventListener("input", () => {
+    logo.rotation.y = THREE.MathUtils.degToRad(Number(logoRotation.value));
   });
 
   lightIntensity.addEventListener("input", () => {