Dodavanje elemenata u scenu pomoću Three.js biblioteke

Da biste prikazali više objekata u sceni koristeći Three.js, morate dodati dodatne objekte (npr. kocke, sfere, krugove) u scene te podesiti njihove pozicije kako bi bili prikazani na različitim mjestima unutar 3D prostora.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Three.js - Više objekata</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
    <script>
        // Kreiranje scene
        const scene = new THREE.Scene();

// Kreiranje kamere
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.z = 5;

// Kreiranje WebGL renderer-a
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

// Dodavanje više objekata u scenu

// 1. Kocka
        const geometry1 = new THREE.BoxGeometry(1, 1, 1); // Geometrija kocke
        const material1 = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // Zeleni materijal
        const cube = new THREE.Mesh(geometry1, material1); // Kreiranje kocke
        cube.position.x = -2; // Pozicija kocke
        scene.add(cube); // Dodavanje kocke u scenu

// 2. Krug
        const geometry2 = new THREE.CircleGeometry(1, 32); // Geometrija kruga
        const material2 = new THREE.MeshBasicMaterial({ color: 0xff0000 }); // Crveni materijal
        const circle = new THREE.Mesh(geometry2, material2); // Kreiranje kruga
        circle.position.x = 2; // Pozicija kruga
        scene.add(circle); // Dodavanje kruga u scenu

// Animacija
        function animate() {
            requestAnimationFrame(animate);

// Rotacija objekata
            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;
            circle.rotation.x += 0.01;
            circle.rotation.y += 0.01;

renderer.render(scene, camera);
        }

animate();
    </script>
</body>
</html>

Objašnjenje:

Kreiranje scene:
- const scene = new THREE.Scene(); – Ovo stvara scenu u kojoj ćemo dodavati objekte.
Kreiranje kamere:
- const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); – Ovdje kreiramo kameru koja gleda u scenu. Kamera je postavljena tako da gleda 3D prostor sa pozicije camera.position.z = 5;.
Kreiranje renderera:
- const renderer = new THREE.WebGLRenderer(); – Ovdje se koristi WebGL renderer za prikazivanje scene na ekranu.
Kreiranje objekata:
- Kocka: Korištenjem THREE.BoxGeometry() kreiramo kocku, a zatim dodajemo materijal pomoću THREE.MeshBasicMaterial(). Kocka se dodaje u scenu i pozicionira na -2 po osi X.
- Krug: Korištenjem THREE.CircleGeometry() kreiramo krug, dodajemo materijal i pozicioniramo ga na +2 po osi X.
Animacija:
- function animate() – Ovdje animiramo oba objekta tako da rotiraju oko svojih osi u svakom “frameu”. requestAnimationFrame() poziva funkciju animate za svaki novi okvir kako bi se scena kontinuirano renderirala.

Dodavanje više objekata:

Da biste dodali više objekata u scenu, jednostavno ponovite korake stvaranja objekta (geometrija + materijal) i dodajte ih u scenu s različitim pozicijama.

Na primjer:

Dodajte kocku na poziciju x = -2, krug na poziciju x = 2, a zatim možete dodati još sfere ili valjke na druge pozicije.

// Dodavanje sfere
const geometry3 = new THREE.SphereGeometry(1, 32, 32); // Geometrija sfere
const material3 = new THREE.MeshBasicMaterial({ color: 0x0000ff }); // Plavi materijal
const sphere = new THREE.Mesh(geometry3, material3); // Kreiranje sfere
sphere.position.y = 2; // Pozicija sfere
scene.add(sphere); // Dodavanje sfere u scenu

// Dodavanje valjka
const geometry4 = new THREE.CylinderGeometry(1, 1, 2, 32); // Geometrija valjka
const material4 = new THREE.MeshBasicMaterial({ color: 0xffff00 }); // Žuti materijal
const cylinder = new THREE.Mesh(geometry4, material4); // Kreiranje valjka
cylinder.position.y = -2; // Pozicija valjka
scene.add(cylinder); // Dodavanje valjka u scenu

Zadaci za razmišljanje:

Dodavanje više objekata različitih boja i oblika: Dodajte više objekata različitih geometrija (kocka, sfera, valjak) i pozicionirajte ih tako da se ne preklapaju.

Dodavanje elemenata u scenu pomoću Three.js biblioteke

Objašnjenje:

Dodavanje više objekata:

Na primjer:

Zadaci za razmišljanje:

Odgovori Otkaži odgovor

O platformi

Kodiraj kako vidiš

Prednosti Tehničara

Zašto odabrati Tehničar.net?