TechBlogLK - Sri Lanka's Premier Tech Community & Programming Tutorials

Three.js කියන්නේ JavaScript වලින් 3D graphics කරන්න පුළුවන් ලාංකීයවම කියනවා නම්, “Browser එකේ 3D දේවල් ගහන්න හැකි පිස්සුවක්” 😅

පළමු episode එකේ අපි setup එක (Scene, Camera, Renderer) හැදුවා. දැන් අපි හැදුව Scene එකට cube එකක් දාමු, rotate කරමු, හා animate කරමු.

📁 File Structure එක:

threejs-app/
├── index.html
└── script.js

🧾 index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Three.js Cube Example</title>
  <style>
    body { margin: 0; overflow: hidden; }
    canvas { display: block; }
  </style>
</head>
<body>
  <script type="module" src="script.js"></script>
</body>
</html>

📜 script.js – Full Code with Sinhala Comments

// Three.js එක import කරනවා CDN එකෙන්
import * as THREE from 'https://cdn.skypack.dev/three@0.152.2';

// ✅ Scene එකක් හදමු
const scene = new THREE.Scene();

// ✅ Perspective camera එකක් හදමු
const camera = new THREE.PerspectiveCamera(
  75, // Field of View (angle)
  window.innerWidth / window.innerHeight, // aspect ratio
  0.1, // near clipping plane
  1000 // far clipping plane
);

// ✅ Renderer එක canvas එකට ගහමු
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// ✅ Box (Cube) Geometry එකක් හදමු
const geometry = new THREE.BoxGeometry(1, 1, 1); // width, height, depth

// ✅ Material එකක් – cube එකට color එකක්
const material = new THREE.MeshStandardMaterial({ color: 0x0077ff });

// ✅ Mesh එක = Geometry + Material
const cube = new THREE.Mesh(geometry, material);

// ✅ Scene එකට cube එක එකතු කරමු
scene.add(cube);

// ✅ Light එකක් – otherwise object එක black වෙනවා
const light = new THREE.DirectionalLight(0xffffff, 1); // white light
light.position.set(2, 2, 5); // light එක position
scene.add(light);

// ✅ Camera එක zoom එක adjust කරමු
camera.position.z = 5;

// ✅ Animation function එකක් – cube එක rotate වෙන්න
function animate() {
  requestAnimationFrame(animate); // frame by frame run කරන function එක

  // X සහ Y axis වලට cube එක little bit rotate වෙයි
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  renderer.render(scene, camera); // scene එක draw කරනවා
}

animate();

🧠 Sinhala Explanation – මොකද්ද මෙතන වෙන්නෙ?

Scene – ඒකයි හැමදෙයක්ම තියෙන්නෙ. උදා: cube එක, light, background.
Camera – Scene එක බලන අයියෝ. Scene එකේ තියෙන දේවල් camera එකෙන් දැක්කම තමා අපිට browser එකේ render වෙන්නෙ.
Renderer – Scene එක සහ Camera එක එකට combine කරලා canvas එකට ගහනවා.
Geometry + Material = Mesh – visible 3D object එක.
Light – object එකට realistic look එකක් දියි.
requestAnimationFrame – continuously animation එකක් run කරන method එක.

🖥️ Final Result:

ඔබේ browser එකට run කරද්දි, blue-colored cube එකක් slow motion එකෙන් rotate වෙනවා.
මෙන්න ඔබේ පළමු 3D object එක web browser එකේ! 😎👏

✅ Extra Tips:

THREE.MeshBasicMaterial() – lighting බලන්නේ නෑ.
THREE.MeshStandardMaterial() – lighting effect බලනවා.
Light එකක් නොදී StandardMaterial දාලා නම් object එක totally black වෙනවා.
Renderer එක fullscreen කරන්න නම්:

renderer.setSize(window.innerWidth, window.innerHeight);

🔜 Episode 3 (Coming Soon):

"Multiple Objects, Background Colors & Orbit Controls!" 🌈🌀

අපි cube එකට පාසලක් වගේ හත අටක් එක්ක ඒවා move කරන්න බලමු! Zoom, Rotate controls add කරන්නත් ඉගෙන ගමු.

🎬 Three.js Tutorial – Episode 2: 3D Cube එකක් හදලා Animate කරමු!