Installation
1.Create a new folder
mkdir test_threejs
cd test_threejs
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"
3.Install TypeScript
and Threejs
and Vite
for
bun add -d @types/bun # dev dependency
bun add three
bun add vite
4.Config Scripts in package.json
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview"
},
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>
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();
3.Render in web browser
- Use command :
bun run dev
- Now we can access the local host 3d viewer from browser with localhost url from console log:
Local: http://localhost:5173/
See the result
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"],
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',
},
});
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
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 }}
Tada : you can see my deploy at : https://chuongmep.github.io/threejs_bun/
Repo : https://github.com/chuongmep/threejs_bun
Top comments (0)