Skip to content
Snippets Groups Projects
Commit d1f80621 authored by AKIFI NAIL's avatar AKIFI NAIL
Browse files

casque vr mobile zoom (push pour plesk et test)

parent 8f310a40
Branches
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 39 additions and 74 deletions
public/js/three.js
+ 39
− 74
View file @ d1f80621
import * as THREE from "https://cdn.skypack.dev/three@0.129.0/build/three.module.js";
import { OrbitControls } from "https://cdn.skypack.dev/three@0.129.0/examples/jsm/controls/OrbitControls.js";
import { FBXLoader } from "https://cdn.skypack.dev/three@0.129.0/examples/jsm/loaders/FBXLoader.js";
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ alpha: true });
// Création de la caméra
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
// Création du renderer
const renderer = new THREE.WebGLRenderer();
let isMobile = window.innerWidth <= 768; // On considère que l'écran est mobile si sa largeur est inférieure ou égale à 768px
if (isMobile) {
console.log("Mobile");
renderer.setSize(window.innerWidth, window.innerHeight / 3 ); // Pleine taille pour mobile
} else {
console.log("Desktop");
renderer.setSize(window.innerWidth / 2, window.innerHeight / 2); // Divisé par 2 pour les écrans plus grands
}
renderer.setClearColor( 0xffffff , 1);
const container = document.getElementById("three-container");
container.appendChild(renderer.domElement);
// Pour réagir aux changements de taille d'écran, ajoutez un écouteur
window.addEventListener("resize", () => {
let isMobile = window.innerWidth <= 768;
function updateRendererSize() {
isMobile = window.innerWidth <= 768;
if (isMobile) {
renderer.setSize(window.innerWidth, window.innerHeight / 2.6);
camera.aspect = window.innerWidth / (window.innerHeight / 2.6);
} else {
renderer.setSize(window.innerWidth / 2, window.innerHeight / 2);
const newWidth = window.innerWidth * 0.5; // 50% de l'écran en desktop
renderer.setSize(newWidth, window.innerHeight / 2);
camera.aspect = newWidth / (window.innerHeight / 2);
}
camera.aspect = window.innerWidth / (isMobile ? window.innerHeight / 2.6 : window.innerHeight / 2);
camera.updateProjectionMatrix();
});
}
window.addEventListener("resize", updateRendererSize);
updateRendererSize();
// Ajouter le renderer au DOM
const container = document.getElementById("three-container");
container.appendChild(renderer.domElement);
renderer.setClearColor(0xffffff, 1);
// Lumières
const ambientLight = new THREE.AmbientLight(0xffffff, 2); // Lumière ambiante
const ambientLight = new THREE.AmbientLight(0xffffff, 2);
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0x202020, 0.3); // Lumière directionnelle
const directionalLight = new THREE.DirectionalLight(0x202020, 0.3);
directionalLight.position.set(1, 1, 1);
scene.add(directionalLight);
......@@ -62,11 +44,10 @@ controls.dampingFactor = 0.25;
controls.screenSpacePanning = false;
controls.enableZoom = false;
// Charger un modèle FBX
// Charger un modèle FBX
// Chargement du modèle FBX
const loader = new FBXLoader();
loader.load(
"/models/casque_vr.fbx", // Remplace par le chemin vers ton modèle
"/models/casque_vr.fbx",
(fbx) => {
const pivot = new THREE.Group();
scene.add(pivot);
......@@ -77,42 +58,33 @@ loader.load(
controls.target.copy(center);
controls.update();
// Préparer l'animation de la caméra
const startPosition = new THREE.Vector3(0, 300, -750); // Position initiale
let endPosition;
// Position initiale de la caméra
const startPosition = new THREE.Vector3(0, 300, -750);
const endPosition = isMobile ?
new THREE.Vector3(-440, 150, 100) : // Mobile
new THREE.Vector3(-520, 150, 100); // Desktop, ajusté pour centrer
if (isMobile) {
endPosition = new THREE.Vector3(-440, 150, 100);
// Définir directement la position de la caméra pour les mobiles
camera.position.copy(endPosition);
controls.target.copy(center);
controls.update();
} else {
endPosition = new THREE.Vector3(-520, 150, 100);
let animationTriggered = false;
window.addEventListener("scroll", () => {
if (!isMobile && window.scrollY > 1050 && !animationTriggered) {
animationTriggered = true;
animateCamera(startPosition, endPosition, 3000, center);
}
});
}
const duration = 3000; // Durée en millisecondes (3 secondes)
// Écouter l'événement scroll pour déclencher l'animation uniquement sur desktop
let animationTriggered = false;
window.addEventListener("scroll", () => {
if (!isMobile && window.scrollY > 1050 && !animationTriggered) {
console.log(window.scrollY);
animationTriggered = true; // Empêche de relancer l'animation plusieurs fois
animateCamera(startPosition, endPosition, duration, center);
}
});
},
(xhr) => {
console.log((xhr.loaded / xhr.total) * 100 + "% chargé");
},
(error) => {
console.error("Erreur lors du chargement du modèle FBX", error);
}
(xhr) => console.log((xhr.loaded / xhr.total) * 100 + "% chargé"),
(error) => console.error("Erreur de chargement du modèle FBX", error)
);
// Fonction d'animation de la caméra avec easing
// Animation de la caméra avec easing
function animateCamera(startPosition, endPosition, duration, target) {
const startTime = performance.now(); // Heure de début de l'animation
const startTime = performance.now();
function easeInOutCubic(t) {
return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
......@@ -120,32 +92,25 @@ function animateCamera(startPosition, endPosition, duration, target) {
function updateCameraAnimation() {
const elapsedTime = performance.now() - startTime;
const progress = Math.min(elapsedTime / duration, 1); // Progression entre 0 et 1
// Appliquer l'easing à la progression
const progress = Math.min(elapsedTime / duration, 1);
const easedProgress = easeInOutCubic(progress);
// Interpolation de la position de la caméra avec easing
camera.position.lerpVectors(startPosition, endPosition, easedProgress);
// Garder la caméra ciblée sur le modèle
controls.target.copy(target);
controls.update();
if (progress < 1) {
requestAnimationFrame(updateCameraAnimation);
} else {
console.log("Animation terminée");
}
}
requestAnimationFrame(updateCameraAnimation);
}
// Positionner la caméra
camera.position.set(0, 300, -600); // Position initiale de la caméra
// Position de la caméra par défaut
camera.position.set(0, 300, -600);
// Fonction d'animation générale
// Fonction d'animation principale
function animate() {
requestAnimationFrame(animate);
controls.update();
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment