U današnjem digitalnom dobu, tehnološki napredak omogućava nam da proširimo horizonte načina na koji doživljavamo svijet. Jedna od najinovativnijih tehnologija koja se ističe u ovom području su 3D scene.
Kroz njih, promocija turizma, kulturnih vrijednosti te drugih aspekata kreiranja sadržaja postaje više nego samo gledanje slika na ekranu – postaje interaktivno iskustvo koje osvaja srca i umove.
U primjerima ispod naučiti ćete kako napraviti jednostavnu trodimenzionalnu turu za obilazak određenih lokacija.
Ovo može biti vrlo korisno u promociji turističkih destinacija.
Inicijalizacija HTML-a:
- Stvorite HTML datoteku i uključite A-Frame biblioteku.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Change Sky Image on Entity Click</title>
<meta name="description" content="A-Frame Example">
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
</head>
<body>
<!-- A-Frame scena -->
<a-scene cursor="rayOrigin: mouse">
<!-- Ostatak koda će biti dodan ovdje -->
</a-scene>
<!-- Skripta za manipulaciju A-Frame scenom -->
<script>
// JavaScript kod će biti dodan ovdje
</script>
</body>
</html>
Dodavanje Skyboxa:
- Dodajte
<a-sky>element unutar A-Frame scene kako biste postavili početni izvor slike za skybox.
<a-sky id="skybox" src="https://3dkodiranje.com/wp-content/uploads/2023/11/Realism_equirectangular-jpg_stari_most_u_Mostaru_1639036364_9544749-1024x512.jpg"></a-sky>
Dodavanje Kamere i Raycastera:
- Dodajte
<a-camera>element unutar scene s<a-entity>za raycaster kako biste omogućili kursoru zračenje iz kamere.
<a-camera position="0 1.6 0">
<a-entity visible="false" raycaster="objects: .clickable"></a-entity>
</a-camera>
Dodavanje Klikabilnog Elementa:
- Dodajte
<a-box>kao klikabilni element koji će mijenjati izvor slike na svaki klik.
<a-box class="clickable" position="0 1 -5" color="blue"></a-box>
Dodavanje JavaScript Koda:
- Dodajte JavaScript kod unutar
<script>bloka koji će omogućiti promjenu izvora slike na klik na klikabilni element.
<script>
var skybox = document.getElementById("skybox");
var clickableEntity = document.querySelector('.clickable');
var isImage1 = true;
// Dodajte event listener na entitet koji je klikabilan
clickableEntity.addEventListener('click', function () {
toggleSkyImage();
});
function toggleSkyImage() {
// Promijeni izvor slike na temelju trenutnog stanja
if (isImage1) {
skybox.setAttribute('src', 'https://i.imgur.com/5tSSa8Ub.jpg');
} else {
skybox.setAttribute('src', 'https://3dkodiranje.com/wp-content/uploads/2023/11/Realism_equirectangular-jpg_stari_most_u_Mostaru_1639036364_9544749-1024x512.jpg');
}
// Invertiraj trenutno stanje
isImage1 = !isImage1;
}
</script>
Sada imate potpuni kod koji mijenja izvor slike na klik na entitet. Kopirajte ovaj kod u HTML datoteku i otvorite je u pregledniku da biste vidjeli rezultat.
Leave a Reply