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

ආයුබෝවන් යාලුවනේ! 👋 අද අපි පටන් ගන්න යන්නේ සුපිරිම වැඩක්! ඔයාලා කවදා හරි හිතුවද Websites වල එහෙම 3D දේවල් දාලා, Interactive දේවල් කරන්න තිබ්බනම් කොහොමද කියලා? 🤔 අන්න ඒ වැඩේට පාවිච්චි කරන නියම JavaScript library එකක් තමයි Three.js කියන්නේ. 🚀

මේ Lesson Series එකෙන් අපි මුල ඉඳන් සරලව Three.js ඉගෙන ගමු. මේක පළවෙනි කොටස. අපි අද බලමු Three.js වලින් පොඩි වැඩක් කරගන්නේ කොහොමද කියලා. Ready ද? 😎

🧐 මොකක්ද මේ Three.js කියන්නේ?

සරලවම කිව්වොත්, Three.js කියන්නේ ඔයාගේ Web Browser එකේ 3D graphics (ත්‍රිමාණ ග්‍රැෆික්ස්) හදන්න, පෙන්නන්න උදව් කරන JavaScript library එකක්. 👨‍💻 WebGL කියන තාක්ෂණය පාවිච්චි කරලා තමයි මේක වැඩ කරන්නේ. ඒත් WebGL කෙලින්ම පාවිච්චි කරනවට වඩා Three.js එක්ක වැඩ කරන එක හුඟක් ලේසියි, ඉක්මන්. 😉 Three.js එක හදලා තියෙන්නේ Ricardo Cabello (Mr.doob) කියලා කෙනෙක්. අද වෙද්දි ලොකු developer community එකක් මේකට දායක වෙනවා.

🤔 ඇයි Three.js පාවිච්චි කරන්නේ?

🎮 සුපිරි 3D Games, interactive experiences හදන්න පුලුවන්.
🎨 Interactive 3D models, product configurators, data visualizations හදන්න පුලුවන්.
🏛️ Virtual tours, architectural visualizations කරන්න පුලුවන්.
🖼️ Virtual Reality (VR) සහ Augmented Reality (AR) experiences හදන්න පුලුවන්.
🌐 Websites වලට unique, ආකර්ෂණීය පෙනුමක් දෙන්න පුලුවන්, User engagement එක වැඩි කරන්න පුලුවන්.
🆓 Open-source (MIT බලපත්‍රය යටතේ) නිසා නොමිලේ පාවිච්චි කරන්න පුලුවන්.
🤝 ලොකු, ක්‍රියාකාරී community එකක් ඉන්නවා උදව් ගන්න, documentation එකත් හොඳයි.

🛠️ අපි වැඩේට බහිමු! පළවෙනි Scene එක හදමු!

හරි, දැන් කතා ඇති. Code කරන්න වෙලාව! 💪 පොඩි ත්‍රිමාණ කියුබ් එකක් හදලා ඒක කරකවමු.

1. මුලික Setup එක: HTML File එක

මුලින්ම අපිට HTML file එකක් ඕනේ. ඔයා කැමති Code Editor එකක් (VS Code, Sublime Text වගේ) open කරලා, අලුත් file එකක් හදලා index.html කියලා save කරගන්න. ඒකට මේ code එක දාන්න:

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>මගේ පළවෙනි Three.js Scene එක! ✨</title>
    <style>
        /* මේ CSS ටිකෙන් වෙන්නේ page එකේ අනවශ්‍ය margins අයින් කරලා,
           අපේ 3D content එක දාන canvas එක මුළු screen එකම ගන්න හදන එක */
        body { margin: 0; overflow: hidden; } /* Page margin අයින් කරනවා, scroll bars හංගනවා */
        canvas { display: block; } /* Canvas එක block element එකක් කරනවා */
    </style>
</head>
<body>
    <script type="importmap">
        {
            "imports": {
                "three": "https://unpkg.com/three@0.163.0/build/three.module.js",
                "three/addons/": "https://unpkg.com/three@0.163.0/examples/jsm/"
            }
        }
    </script>

    <script type="module">
        // අපේ Three.js මැජික් එක මෙතනින් පටන් ගන්නේ! 🪄
        import * as THREE from 'three';

        // මෙතන ඉඳන් අපි අනිත් කෝඩ් ටික ලියමු...
        console.log("Three.js ලෝඩ් උනා! 🎉");

        // --- Scene, Camera, Renderer හදන තැන ---

        // --- Geometry, Material, Mesh හදන තැන ---

        // --- Animation Loop එක හදන තැන ---

    </script>
</body>
</html>

👀 මොකක්ද මේ importmap කියන්නේ?

මේක browser එකට කියනවා "three" කියලා code එකේ කොහේ හරි import කරොත්, අර දීලා තියෙන URL එකෙන් ඒ module එක load කරගන්න කියලා. මේක JavaScript modules පාවිච්චි කරන නූතන ක්‍රමයක්. අර URL එකේ version number එක (0.163.0) තියෙන එකෙන් අපි පාවිච්චි කරන්නේ Three.js වල අලුත්ම version වලින් එකක් කියලත් sure කරගන්නවා (මේ ලියන වෙලාවේ අලුත් version එකක්).

2. ප්‍රධාන අංග 3: Scene, Camera, Renderer

Three.js වලින් මොනවා හරි ත්‍රිමාණව පෙන්නන්න නම් අපිට අත්‍යවශ්‍යම components 3ක් තියෙනවා:

Scene (දර්ශන තලය): 🎬 හිතන්නකෝ මේක virtual ලෝකයක්, නැත්නම් හිස් වේදිකාවක් කියලා. අපි හදන හැම 3D object එකක්ම (චරිත, බඩුමුට්ටු වගේ) තියන්නේ මේ Scene එක ඇතුලේ. Lights, Cameras වුනත් Scene එකේ කොටස්.
Camera (කැමරාව): 📸 මේ virtual ලෝකයේ තියෙන දේවල් අපි බලන්නේ කොහොමද? අන්න ඒකට Camera එකක් ඕනේ. අපි කොයි කෝණයෙන්ද බලන්නේ, කොච්චර දුර ඉඳන්ද බලන්නේ, දර්ශන ක්ෂේත්‍රය කොච්චර පළලද වගේ දේවල් Camera එකෙන් control කරනවා. Cameras වර්ග කීපයක්ම තියෙනවා (PerspectiveCamera, OrthographicCamera වගේ), අපි පාවිච්චි කරන්නේ PerspectiveCamera එක. ඒකෙන් මිනිස් ඇහැ දකින විදියටම දුර වැඩිවෙද්දි ವಸ್ತು කුඩාවට පේනවා.
Renderer (විදැහුම්කාරකය): 🖼️ Scene එකේ Camera එකෙන් පේන දේ අරගෙන, ඒක අපේ Web page එකේ ඇත්තටම "අඳින" (render කරන) කෙනා තමයි Renderer කියන්නේ. එයා තමයි WebGL පාවිච්චි කරලා HTML එකේ තියෙන <canvas> element එක උඩ අපේ 3D රූපය මවන්නේ.

දැන් මේ තුන JavaScript code එකෙන් හදමු (<script type="module"> tag එක ඇතුලේ):

JavaScript

// ... (import line එකට පස්සේ)

// 1. Scene එක හදමු 🎬
const scene = new THREE.Scene();
// Scene එකට පොඩි background පාටක් දාමු, නැත්නම් කළු පාටයි
scene.background = new THREE.Color(0xaaaaaa); // ලා අළු පාටක් (Hex color code)

// 2. Camera එක හදමු 📸
// PerspectiveCamera( fov, aspect, near, far )
// fov (Field of View): කොච්චර පළල කෝණයකින්ද බලන්නේ (සාමාන්‍යෙන් 50-75 degrees)
// aspect (Aspect Ratio): දර්ශනයේ පළල / උස අනුපාතය (බොහෝවිට browser window එකේ අනුපාතය)
// near: කැමරාවට කොච්චර ලඟින් තියෙන දේවල් පේන්න පටන් ගන්නවද? (මේකට වඩා ලඟ ඒවා පේන්නේ නෑ)
// far: කැමරාවට කොච්චර දුරින් තියෙන දේවල් පේනවද? (මේකට වඩා දුර ඒවා පේන්නේ නෑ)
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
// කැමරාව z-අක්ෂය දිගේ ටිකක් පිටිපස්සට ගමු (default එකට (0,0,0) වල තියෙන්නේ)
camera.position.z = 5;

// 3. Renderer එක හදමු 🖼️
// WebGLRenderer එක තමයි අපි සාමාන්‍යෙන් පාවිච්චි කරන්නේ GPU acceleration එක්ක render කරන්න.
const renderer = new THREE.WebGLRenderer({ antialias: true }); // antialias දැම්මම edges ටිකක් smooth වෙනවා
// Renderer එකේ size එක browser window එකේ size එකටම සෙට් කරමු
renderer.setSize( window.innerWidth, window.innerHeight );
// Renderer එකෙන් හදන HTML <canvas> element එක අරගෙන අපේ HTML document එකේ body එකට එකතු කරමු
document.body.appendChild( renderer.domElement );

🥳 හුරේ! අපි මූලික අංග ටික හදාගත්තා! දැන් අපේ Scene එක තියෙනවා, බලන්න Camera එකක් තියෙනවා, ඒක පෙන්නන්න Renderer එකක් තියෙනවා. ඒත්... Scene එක හිස් නේද? 😟 තාම මොකුත් පේන්නේ නෑ.

3. අපේ පළවෙනි 3D Object එක! (කියුබ් එකක් හදමු 🧊)

දැන් තමයි විනෝදම කොටස! අපි Scene එකට ත්‍රිමාණ වස්තුවක් එකතු කරමු. මේකට අපිට දේවල් තුනක් ඕනේ:

Geometry (ජ්‍යාමිතිය): 📐 Object එකේ හැඩය (shape) සහ එහි vertices (ශීර්ෂ) වල පිහිටීම. ගෝලයක්ද? සිලින්ඩරයක්ද? නැත්නම් අපි හදන්න යනවා වගේ Box (කියුබ්) එකක්ද? Three.js වල මේ වගේ ගොඩක් built-in geometries තියෙනවා (BoxGeometry, SphereGeometry, PlaneGeometry etc.).
Material (ද්‍රව්‍යය): 🎨 Object එක පේන්නේ කොහොමද කියන එක. ඒකේ පාට මොකක්ද? දිලිසෙනවද (shiny)? Matt ද? විනිවිද පේනවද? ඒකේ surface එකේ texture එකක් තියෙනවද? මේ දේවල් Material එකෙන් තීරණය වෙනවා. ගොඩක් material වර්ග තියෙනවා (MeshBasicMaterial, MeshLambertMaterial, MeshPhongMaterial, MeshStandardMaterial etc.). අපි මුලින්ම පාවිච්චි කරන්නේ MeshBasicMaterial එක. මේකට Scene එකේ Lights (ආලෝකය) අවශ්‍ය නෑ, නිකන්ම ඒ පාට පේනවා.
Mesh: 📦 මේක තමයි Geometry එකයි Material එකයි එකතු කරලා හදන ඇත්තම 3D object එක. හිතන්න Geometry එක අස්ථි පද්ධතිය වගේ, Material එක හම වගේ, Mesh එක තමයි සම්පූර්ණ ශරීරය. Mesh එක තමයි අපි අරගෙන Scene එකට එකතු කරන්නේ.

දැන් මේ ටිකත් Code එකට දාමු:

JavaScript

// ... (Renderer හදපු code එකට පස්සේ)

// 4. Geometry (හැඩය) හදමු 📐
// BoxGeometry( width, height, depth )
const geometry = new THREE.BoxGeometry( 1, 1, 1 ); // හැම පැත්තම unit 1ක් දිග කියුබ් එකක්

// 5. Material (පාට/පෙනුම) හදමු 🎨
// MeshBasicMaterial එකට color property එකක් දෙන්න පුලුවන්
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } ); // කොළ පාට (Hex: 0xRRGGBB)

// 6. Mesh එක හදමු (Geometry + Material) 🧊
const cube = new THREE.Mesh( geometry, material );

// 7. Mesh (කියුබ්) එක Scene එකට එකතු කරමු 🎬 + 🧊
// scene.add() function එකෙන් objects scene එකට දාන්න පුලුවන්
scene.add( cube );

✅ නියමයි! දැන් අපේ Scene එකේ කොළ පාට කියුබ් එකක් තියෙනවා. ඒත් තාම අපිට ඒක පේන්නේ නෑ... 🤔 ඇයි ඒ? මොකද අපි Renderer එකට කිව්වේ නෑ "මේ Scene එක මේ Camera එකෙන් බලලා අඳින්න" කියලා.

4. Render කරමු! (Scene එක තිරයේ අඳිමු!)

අපි Renderer එක හැදුවට, එයාට render කරන්න කියලා කියන්න ඕනේ. ඒකට renderer.render() function එක call කරන්න ඕනේ, Scene එකයි Camera එකයි parameters විදියට දීලා.

JavaScript

// ... (scene.add(cube) line එකට පස්සේ)

// 8. Scene එක Render කරමු 🖼️👀
// මේ line එක එක පාරක් run උනොත්, ඒ මොහොතේ තියෙන විදියට scene එක ඇඳලා නතර වෙනවා.
// renderer.render( scene, camera ); // <-- අපි මේක animation loop එක ඇතුලට දාමු

අපි මේ render() call එක එකපාරක් දැම්මොත්, page එක load වෙද්දි එක frame එකක් render වෙලා නවතීවි. අපිට ඕනේ කියුබ් එක කරකවන්න නිසා, අපි මේක දිගටම වෙනස් වෙන Scene එක render කරන්න ඕනේ. ඒකට තමයි Animation Loop එක!

5. Animation Loop එක! (ජීවය දෙමු!) 🔄

Static කියුබ් එකක් බලන් ඉන්නවාට වඩා ඒක චලනය වෙනවා දකින්න ආසයිනේ? 😅 මේකට අපිට ඕනේ Animation Loop එකක්. මේකෙන් වෙන්නේ දිගටම, තත්පරේකට කීප වතාවක් (සාමාන්‍යෙන් තත්පරයට රාමු 60ක් - 60fps) මේ දේවල් කරන එක:

Object එකේ properties (position, rotation, scale වගේ) අවශ්‍ය විදියට වෙනස් කරනවා.
Renderer එකෙන් අලුත් Scene එක (වෙනස් උන object එක්ක) ආයෙමත් render කරනවා.

මේක කරන්න JavaScript වල requestAnimationFrame() කියලා function එකක් තියෙනවා. මේකෙන් browser එකට කියනවා "ඔයා ඊලඟ frame එක අඳින්න ලෑස්ති උනාම, මම දෙන මේ function එක call කරන්න" කියලා. මේක setInterval() වලට වඩා animation වලට සුදුසුයි, මොකද browser එක optimize කරලා performace සහ battery life එක ගැන බලනවා.

JavaScript

// ... (scene.add(cube) line එකට පස්සේ)

// 9. Animation Loop එක හදමු 🔄
function animate() {
	// ඊලඟ frame එක redraw කරන්න කලින් මේ animate function එක ආයේ call කරන්න request කරනවා
	requestAnimationFrame( animate );

	// මෙතන තමයි අපි හැම frame එකකම update කරන්න ඕන දේවල් දාන්නේ
	// කියුබ් එක කරකවමු! 💫
	// object.rotation එකේ x, y, z අක්ෂ වටා rotation එක radians වලින් තියෙන්නේ
	cube.rotation.x += 0.01; // X අක්ෂය වටා පොඩ්ඩ පොඩ්ඩ කරකවමු
	cube.rotation.y += 0.01; // Y අක්ෂය වටාත් පොඩ්ඩ පොඩ්ඩ කරකවමු

	// Scene එක හැම frame එකකම අලුත් විදියට render කරමු
	renderer.render( scene, camera );
}

// Animation loop එක පටන් ගමු! මේක call කරේ නැත්නම් මුකුත් වෙන්නේ නෑ.
animate();

දැන් ඔයා ඔයාගේ index.html file එක browser එකේ open කරලා බලන්න! 🎉 ඔව්! ඔයාට පේන්න ඕනේ අළු පාට Background එකේ ලස්සනට කැරකෙන කොළ පාට කියුබ් එකක්! 🤩 මේ ඔයාගේ පළවෙනි, ජීවය තියෙන Three.js නිර්මාණය! සුභ පැතුම්! 🥳

Bonus: Window Resize Handling (Responsive කිරීම)

Browser window එක resize කරොත් මොකද වෙන්නේ? අපේ කියුබ් එක හිරවෙලා, කැත වෙලා පේයි. මොකද Camera එකේ Aspect Ratio එකයි, Renderer එකේ Size එකයි update වෙන්නේ නෑ. ඒකටත් පොඩි code කෑල්ලක් දාමු.

JavaScript

// ... (animate function එකට කලින් හෝ පස්සේ දාන්න)

// Browser window එක resize කරනකොට මේ function එක call වෙන්න හදමු
window.addEventListener('resize', onWindowResize, false);

function onWindowResize() {
    // Camera එකේ aspect ratio එක අලුත් window size එකට අනුව update කරමු
    camera.aspect = window.innerWidth / window.innerHeight;
    // Camera එකේ projection matrix එක update කරන්න ඕනේ aspect ratio වෙනස් උනාම
    camera.updateProjectionMatrix();

    // Renderer එකේ size එකත් අලුත් window size එකට update කරමු
    renderer.setSize(window.innerWidth, window.innerHeight);
}

දැන් browser window එක resize කරලා බලන්න. හැමදේම ලස්සනට adjust වෙනවා නේද? 😉

සම්පූර්ණ Code එක:

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>මගේ පළවෙනි Three.js Scene එක! ✨</title>
    <style>
        body { margin: 0; overflow: hidden; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script type="importmap">
        {
            "imports": {
                "three": "https://unpkg.com/three@0.163.0/build/three.module.js",
                "three/addons/": "https://unpkg.com/three@0.163.0/examples/jsm/"
            }
        }
    </script>
    <script type="module">
        import * as THREE from 'three';

        console.log("Three.js ලෝඩ් උනා! 🎉");

        // 1. Scene 🎬
        const scene = new THREE.Scene();
        scene.background = new THREE.Color(0xaaaaaa); // ලා අළු background

        // 2. Camera 📸
        const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
        camera.position.z = 5; // කැමරාව ටිකක් පිටිපස්සට

        // 3. Renderer 🖼️
        const renderer = new THREE.WebGLRenderer({ antialias: true }); // antialias for smoother edges
        renderer.setSize( window.innerWidth, window.innerHeight );
        document.body.appendChild( renderer.domElement ); // Add canvas to HTML

        // 4. Geometry 📐 (The shape)
        const geometry = new THREE.BoxGeometry( 1.5, 1.5, 1.5 ); // ටිකක් ලොකු කියුබ් එකක්

        // 5. Material 🎨 (The appearance)
        const material = new THREE.MeshBasicMaterial( { color: 0x0077ff, wireframe: false } ); // නිල් පාට, wireframe: true කරලා බලන්න

        // 6. Mesh 🧊 (Combine Geometry and Material)
        const cube = new THREE.Mesh( geometry, material );

        // 7. Add cube to Scene 🎬 + 🧊
        scene.add( cube );

        // Responsive Design: Handle window resize
        window.addEventListener('resize', onWindowResize, false);

        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        }

        // 9. Animation Loop 🔄
        function animate() {
            requestAnimationFrame( animate ); // Request next frame

            // Rotate the cube
            cube.rotation.x += 0.005;
            cube.rotation.y += 0.005;
            // cube.rotation.z += 0.001; // Z අක්ෂය වටාත් කරකවලා බලන්න

            // Render the scene with the camera
            renderer.render( scene, camera );
        }

        // Start the animation loop!
        animate();
    </script>
</body>
</html>

අදට ඇති වගේ නේද? 😉

සුභ පැතුම්! ඔයා Three.js වලින් ඔයාගේ පළවෙනි ත්‍රිමාණ දර්ශනය නිර්මාණය කරලා, ඒකට චලනයකුත් එකතු කලා! මේක තමයි Three.js ගමනේ පළවෙනි, වැදගත්ම පියවර. අපි අද ඉගෙනගත්ත දේවල්:

HTML file එක setup කරගන්න විදිය.
importmap වලින් Three.js ලෝඩ් කරගන්න විදිය.
මූලික අංග තුන: Scene, Camera, Renderer.
3D object එකක් හදන්න Geometry, Material, Mesh පාවිච්චි කරන විදිය.
Object එකක් Scene එකට add() කරන විදිය.
requestAnimationFrame පාවිච්චි කරලා Animation Loop එකක් හදන විදිය.
renderer.render() වලින් Scene එක අඳින විදිය.
Window එක resize කරනකොට responsive වෙන විදියට හදන විදිය.

ඔයාට කරන්න තියෙන දේ (Try it yourself!):

මේ Code එක copy-paste කරන්නේ නැතුව, ඔයාම Type කරලා Run කරලා බලන්න. 💻 වැරදුනොත් browser console එකේ error messages බලන්න.
කියුබ් එකේ පාට (material එකේ color value එක) ඔයා කැමති hex code එකක් දාලා වෙනස් කරලා බලන්න. 🌈 (Google "color picker" කියලා හොයන්න hex codes ගන්න).
Material එකේ wireframe: true කරලා බලන්න මොකද වෙන්නේ කියලා.
කියුබ් එකේ Size එක (BoxGeometry එකේ numbers) වෙනස් කරලා බලන්න (උදා: new THREE.BoxGeometry( 2, 1, 1 )).
Rotation speed එක (cube.rotation.x += value එක) වෙනස් කරලා බලන්න (වැඩි කරන්න, අඩු කරන්න, අගයක් දාන්න). 🌪️
කියුබ් එක rotate කරනවට අමතරව cube.position.x, cube.position.y වගේ properties වෙනස් කරලා බලන්න animation loop එකේදී.
BoxGeometry වෙනුවට SphereGeometry දාලා බලන්න (new THREE.SphereGeometry( 1, 32, 16 )).
Camera එකේ position එක (camera.position.z = 5;) වෙනස් කරලා බලන්න (තව ලං කරන්න, දුරස් කරන්න, camera.position.x = 2; වගේ දාලා පැත්තකට කරන්න).

Experiment කරන්න! බය නැතුව code එක වෙනස් කරන්න, කඩන්න, හදන්න. 😄 එතකොට තමයි මේක ඇඟටම යන්නේ.

ඊලඟ Episode එකෙන් අපි බලමු තව Objects (වෙනස් Shapes) Scene එකට එකතු කරන්නේ කොහොමද, Lights (ආලෝකය) දාලා MeshBasicMaterial වෙනුවට MeshStandardMaterial වගේ advanced materials පාවිච්චි කරන්නේ කොහොමද, Controls (Mouse එකෙන් Scene එක කරකවන්න පුලුවන් විදියට) එකතු කරන්නේ කොහොමද කියලා. 💡🖱️

එතකන් මේ ටික හොඳට practice කරන්න! 💪

ඔබට ජය! 🎉🚀

🧠THREE JS | JavaScript වලින් 3D ලෝකයක් හදමු!

Rasanjana

Comments

Delete Article