Galerie 3D créée par Luc Pallegoix ©2025
Rotonde beige
Galerie en rotonde beige à rayures par Luc Pallegoix
https://aframe.io/releases/1.4.0/aframe.min.js
/* Style pour la signature */
#signature {
position: fixed; /* Position fixe pour rester en place */
bottom: 10px; /* 10px du bas */
left: 10px; /* 10px de la gauche */
color: #000000; /* Couleur du texte */
font-family: Arial, sans-serif; /* Police */
font-size: 7px; /* Taille du texte */
z-index: 9999; /* S’assurer que c’est au-dessus de la scène */
background-color: rgba(255, 255, 255, 0.5); /* Fond semi-transparent */
padding: 5px 10px; /* Espacement intérieur */
border-radius: 5px; /* Coins arrondis */}
AFRAME.registerComponent(‘zoom-on-click’, {
schema: {
zoomFactor: { type: ‘number’, default: 4 }, // Facteur d’agrandissement
duration: { type: ‘number’, default: 3000 }, // Durée de l’animation en ms
centerPosition: { type: ‘vec3’, default: { x: 0, y: 1.85, z: -2 } } // Position centrale de la scène
},
init: function () {
const el = this.el;
const originalScale = el.getAttribute(‘scale’).clone(); // Sauvegarder l’échelle originale
const originalPosition = el.getAttribute(‘position’).clone(); // Sauvegarder la position originale
let isZoomed = false; // État initial : non agrandi
// Écouteur d’événement pour le clic
el.addEventListener(‘click’, () => {
if (isZoomed) {
// Réduire l’image et la ramener à sa position d’origine
el.setAttribute(‘animation__scale’, {
property: ‘scale’,
to: `${originalScale.x} ${originalScale.y} ${originalScale.z}`,
dur: this.data.duration,
easing: ‘easeInOutQuad’
});
el.setAttribute(‘animation__position’, {
property: ‘position’,
to: `${originalPosition.x} ${originalPosition.y} ${originalPosition.z}`,
dur: this.data.duration,
easing: ‘easeInOutQuad’
});
} else {
// Agrandir l’image et la centrer
el.setAttribute(‘animation__scale’, {
property: ‘scale’,
to: `${originalScale.x * this.data.zoomFactor} ${originalScale.y * this.data.zoomFactor} ${originalScale.z * this.data.zoomFactor}`,
dur: this.data.duration,
easing: ‘easeInOutQuad’
});
el.setAttribute(‘animation__position’, {
property: ‘position’,
to: `${this.data.centerPosition.x} ${this.data.centerPosition.y} ${this.data.centerPosition.z}`,
dur: this.data.duration,
easing: ‘easeInOutQuad’
});
}
isZoomed = !isZoomed; // Inverser l’état
});
}
});
document.addEventListener(‘DOMContentLoaded’, function () {
// Écouteur pour la porte de gauche
document.querySelector(‘#porte’).addEventListener(‘click’, function () {
window.location.href = ‘https://atomic-temporary-242954088.wpcomstaging.com/galeries-3d-rotonde/’;
});
});
// Composant personnalisé pour le son
AFRAME.registerComponent(‘toggle-sound’, {
schema: {
src: { type: ‘string’ }, // Source du fichier audio
volume: { type: ‘number’, default: 1 }, // Volume du son
},
init: function () {
let isPlaying = false; // État de lecture initial
let sound; // Référence à l’élément audio
// Créer un élément audio
sound = new Audio(this.data.src);
sound.volume = this.data.volume;
// Ajouter un écouteur d’événement pour le clic
this.el.addEventListener(‘click’, () => {
if (isPlaying) {
sound.pause(); // Arrêter la lecture
isPlaying = false;
} else {
sound.play(); // Démarrer la lecture
isPlaying = true;
}
});
}
});
AFRAME.registerComponent(‘limit-movement’, {
schema: {
min: { type: ‘vec3’, default: { x: -5, y: 1.6, z: -6.25 } }, // Limites minimales
max: { type: ‘vec3’, default: { x: 5, y: 1.6, z: 6.25 } } // Limites maximales
},
tick: function () {
const position = this.el.getAttribute(‘position’); // Position actuelle de la caméra
const min = this.data.min; // Limites minimales
const max = this.data.max; // Limites maximales
// Vérifier et corriger la position sur l’axe X
if (position.x max.x) position.x = max.x;
// Vérifier et corriger la position sur l’axe Y
if (position.y max.y) position.y = max.y;
// Vérifier et corriger la position sur l’axe Z
if (position.z max.z) position.z = max.z;
// Appliquer la nouvelle position
this.el.setAttribute(‘position’, position);
}
});
