ThreeJS Bangla Tutorial Part 2 – Setting up a threejs project using vite
By @shariarsensei
Introduction
Welcome to the second part of the ThreeJS Bangla Tutorial series. In this tutorial, we will learn how to set up a ThreeJS project using vite. Vite is a build tool that leverages esbuild to provide instant server start and blazing fast builds. It is perfect for building modern JavaScript projects, including ThreeJS applications.
Setting up the project
To get started, make sure you have Node.js and npm installed on your machine. Once you have that set up, you can create a new directory for your ThreeJS project and open a terminal in that directory.
mkdir threejs-project
cd threejs-project
Next, you can initialize a new npm project using the following command:
npm init -y
This will create a new package.json file in your project directory. Now you can install vite using npm:
npm install -D vite
Once vite is installed, you can initialize a new vite project by running the following command:
npx vite init
This will set up a new project with a basic folder structure and a default configuration file. You can now install ThreeJS as a dependency for your project using npm:
npm install three
Creating a simple ThreeJS scene
Now that we have our project set up, we can create a simple ThreeJS scene. Open the main.js file in your project’s src directory and add the following code:
import * as THREE from 'three';
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);
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
const animate = () => {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
};
animate();
This code sets up a simple ThreeJS scene with a rotating cube. Save the main.js file and open a terminal in your project directory. Run the following command to start the vite server:
npm run dev
Open your browser and navigate to http://localhost:3000. You should see your ThreeJS scene rendered in the browser.
Conclusion
In this tutorial, we learned how to set up a simple ThreeJS project using vite. We created a basic ThreeJS scene with a rotating cube and ran it using the vite server. In the next part of the tutorial, we will explore more advanced ThreeJS features and build a more complex scene.
😁😁😁
অসাধারণ ভাই। আশাকরি প্লেলিস্ট টা কন্টিনিউ করবেন। ❤
That would be great if you zoomed the code a little bit. Thanks for the video and hope you'll go through all the documentation step by step.
bangla comunity er jonno best …ai topic a keo vedio banay na …….thanks a lot❤❤
Thank you so much.