DEV Community

Cover image for Get Start Threejs With Bun TypeScript In MacOs
chuongmep
chuongmep

Posted on • Edited on

Get Start Threejs With Bun TypeScript In MacOs

Installation

1.Create a new folder

mkdir test_threejs
cd test_threejs
Enter fullscreen mode Exit fullscreen mode

2.Install bun

I'm Install Bun replace for node.js. With bun, you have the performance better than 10x.
use command :

curl -fsSL https://bun.sh/install | bash # for macOS, Linux, and WSL
# to install a specific version
curl -fsSL https://bun.sh/install | bash -s "bun-v1.2.0"
Enter fullscreen mode Exit fullscreen mode

3.Install TypeScript and Threejs and Vite for

bun add -d @types/bun # dev dependency
bun add three
bun add vite
Enter fullscreen mode Exit fullscreen mode

4.Config Scripts in package.json

"scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
Enter fullscreen mode Exit fullscreen mode

Usage

1.We will try with simple project by add a new file index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ThreeJS Starter</title>
  </head>
  <body>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

2.Next, we create a file typescript main.js in folder scr/main.ts to see the basic a geometry visulize

import * as THREE from 'three';

// Create scene, camera, and renderer
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Add a cube to the scene
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// Set the camera position
camera.position.z = 5;

// Animation loop
function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();
Enter fullscreen mode Exit fullscreen mode

3.Render in web browser

  • Use command :
bun run dev
Enter fullscreen mode Exit fullscreen mode
  • Now we can access the local host 3d viewer from browser with localhost url from console log:
Local:   http://localhost:5173/
Enter fullscreen mode Exit fullscreen mode

See the result

Image description

Deploy to Github Pages

Some step you need to do
1.Create a repo in github and set in public mode
2.Config build bun
Add dom support in to tsconfig.

"lib": ["es5", "es6", "dom"], 
Enter fullscreen mode Exit fullscreen mode

3.Setup file vite.config.ts

import { defineConfig } from 'vite';

export default defineConfig({
  base: './', // Use relative paths for production builds
  build: {
    outDir: 'dist',
    assetsDir: 'assets',
  },
});
Enter fullscreen mode Exit fullscreen mode

try run build again to make sure everything is working, when you have a warning The CJS build of Vite's Node API is deprecated please rename the file vite.config.ts to vite.config.mis

4.Setup github action in setting deploy with main or master branch

Image description

5.Add github action file into folder .github/workflows with name deploy.yml

name: Deploy to GitHub Pages

on:
  push:
    branches:
      - main  # Trigger the action when there is a push to the main branch
permissions:
  id-token: write
  contents: read
  pull-requests: write
  pages: write
jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout the repository
        uses: actions/checkout@v3

      - name: Deploy to GitHub Pages
        uses: actions/checkout@v3 # Checkout repo
      - name: Setup Bun
        uses: oven-sh/setup-bun@v1 # Setup bun
        with:
            bun-version: latest # You can also use a specific version
      - run: bun install # Only needed if you have any dependencies

      - name: Build
        run: bun run build # Build your project

      - name: Setup Pages
        uses: actions/configure-pages@v5

      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
            name: github-pages
            path: './dist'  # Ensure this path points to your build output directory

      - name: Deploy
        uses: actions/deploy-pages@v4
        env:
         name: github-pages
        with:
            artifact_name: github-pages
            token: ${{ secrets.GITHUB_TOKEN }}
Enter fullscreen mode Exit fullscreen mode

Tada : you can see my deploy at : https://chuongmep.github.io/threejs_bun/
Repo : https://github.com/chuongmep/threejs_bun

Reference

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay