L'agence
WanadevStudio
Débuter en réalité virtuelle mobile sur le web avec THREE.js
Il y a 12 ans
Créer une application en réalité virtuelle pour le web mobile est une chose tout a fait accessible mais pourtant assez méconnue. Je vous propose de démystifier tout ça en créant votre propre appli web VR mobile !
Lors de précédents articles nous avons abordé le sujet de la réalité virtuelle sur le web d'un point de vue théorique, aujourd'hui je vous propose de passer à la pratique en créant une petite application mobile à utiliser avec un casque de réalité virtuelle, type Homido, Samsung Gear VR ou encore Google Cardboard !
J'attire votre attention sur le fait qu'une application en réalité virtuelle est plus consommatrice qu'une application classique, que ce soit en terme de puissance nécessaire que d’énergie, ainsi, il faudra vous munir d'un mobile récent et suffisamment puissant. La configuration moyenne devra être architecturée autour d'un processeur à quatre cœurs, un bon GPU, 2 go de ram et enfin un écran allant de 4.5 à 6 pouces.
La VR comment ça marche ?
La réalité virtuelle permet d'obtenir une immersion impressionnante en donnant à l'utilisateur une sensation de profondeur. La première chose que l'on se dit en rentrant dans un monde virtuel est qu'on pourrait presque toucher les éléments du décors. Pour avoir cette sensation il faut avoir recourt à une projection stéréo de la scène sur un écran. Une projection par oeil, donc. Le casque que vous utilisez ensuite contient des lentilles spécifiques qui permettront de voir la scène en 3D correctement. Donc techniquement, on utilise deux caméras avec des réglages différents mais qui vont rendre la même scène.
Une scène en réalité virtuelle
Ensuite il y a ce deuxième aspect magique qu'est le Head Tracking (le suivi des mouvements de la tête). Il y a plusieurs méthodes pour suivre les mouvements de la têtes. La plus efficace est d'utiliser le gyroscope et l’accéléromètre conjointement afin de déterminer la bonne rotation à appliquer aux caméras. Ce point est important car si votre mobile n'a pas de gyroscope alors le HeadTracking sera absent. Il est cependant possible de n'utiliser que l’accéléromètre mais dans ce cas le suivis sera nettement moins précis.
Maintenant que nous avons vue la théorie, passons à la pratique avec un peu de code !
Mise en place du projet
Ce tutoriel est basé sur le Framework THREE.js qui propose d'excellentes bibliothèques pour mettre en place une application VR. Pour suivre ce premier tutoriel vous allez avoir besoin de la dernière version de THREE.js ainsi que d'autres scripts disponibles sur le dépôt github du projet. Commençons avec three.min.js qui contient les sources du moteur ; StereoEffect.js est un helper permettant d'avoir ce fameux rendu stéréoscopique ; DeviceOrientationControls.js est un script de contrôle de la caméra utilisé pour le HeadTracking ; Enfin, OrbitControls.js ne servira que sur PC afin de pouvoir déplacer la caméra avec la souris.
Une fois que vous avez récupéré tout ces scripts, il faut créer une page web avec le code suivant dedans :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no/>
<title>VR Sandbox 3D</title>
<style>
body {
margin: 0; padding: 0; overflow: hidden;
}
#container {
width: 100%; height: 100%;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="js/vendors/three.js"></script>
<script src="js/vendors/StereoEffect.js"></script>
<script src="js/vendors/DeviceOrientationControls.js"></script>
<script src="js/vendors/OrbitControls.js"></script>
<script>
var renderer, camera, scene,
viewController, stereoEffect,
clock, container;
function initialize() { }
function createScene() { }
function resize() { }
function loop() { }
// Entry point
window.onload = function () {
initialize();
createScene();
loop();
};
</script>
</body>
</html>
Si vous avez déjà travaillé avec THREE.js alors vous connaissez déjà un tas de choses. Je vais cependant expliquer rapidement à quoi vont nous servir toutes ces variables, si vous savez déjà tout ça alors vous pouvez passer à la suite.
Le but primaire d'une application 3D est d'afficher une scène à l'écran avec un point de vue particulier. Ainsi nous avons besoin d'une Scene contenant toutes les instances 3D, d'une Caméra qui définie le point de vue et enfin d'un Renderer qui dessine le tout sur votre écran (c'est une sorte de boite magique dans laquelle vous trouverez des références étranges comme BackBuffer, Shader ou encore Death Depth Buffer ;) ).
Transformer une scène 3D classique en scène VR est relativement simple mais pas automatique avec THREE.js, il suffit grossièrement de rendre la scène deux fois via deux caméras en prenant en compte certains paramètres comme l'écartement entre les deux yeux, le FOV (champs de vision), etc... Il n'y a absolument rien d'autre à faire. Le HeadTracking est quant-à lui assuré par l’événement JavaScript deviceorientation qui renvoie 3 coordonnées alpha, beta et gamma représentant l'accélération du mobile dans l'espace. À partir de ces données il est possible de détecter les mouvements de la tête sur les 3 axes de rotation et les appliquer à la caméra principale.
Nous allons commencer par peupler la fonction initialize en créant les instances utiles au bon fonctionnement d'une application avec THREE.js
renderer = new THREE.WebGLRenderer();
renderer.autoClear = false;
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xffffff, 1);
// Add the canvas into the DOM
container = document.getElementById("container");
container.appendChild(renderer.domElement);
// The camera
camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 5000);
camera.position.set(0, 50, 0);
// The scene
scene = new THREE.Scene();
Vous noterez qu'on passe le flag autoClear à false de l'objet WebGLRenderer, c'est très important de garder ça en tête pour la suite. Ensuite il faut mettre en place les doubles caméras en utilisant StereoEffect
stereoEffect = new THREE.StereoEffect(renderer);
Une ligne suffit à mettre en place la gestion de deux caméras. Il faut aussi savoir que tous les changements réalisés sur la caméra principale, celle que vous avez déclaré au début, seront appliqués aux deux caméras créées par l'effet. Donc de notre côté c'est totalement transparent, on joue sur la caméra principale et c'est tout ;) . Maintenant il faut ajouter le contrôleur de Head Tracking qui permettra de faire les rotations de la caméra en fonction des mouvement de la tête. Par défaut nous développons et testons sur PC donc dans un soucis de facilité, nous mettrons aussi en place un contrôleur de type Orbit. Si un évènement de rotation d'écran est détecté alors on basculera automatiquement sur le contrôleur de Head Tracking.
viewController = new THREE.OrbitControls(camera, renderer.domElement);
viewController.rotateUp(Math.PI / 4);
viewController.target.set(camera.position.x + 0.1, camera.position.y, camera.position.z);
clock = new THREE.Clock();
resize();
var onOrientationChanged = function (event) {
if (!event.alpha) {
return;
}
viewController = new THREE.DeviceOrientationControls(camera, true);
viewController.connect();
viewController.update();
resize();
window.removeEventListener("deviceorientation", onOrientationChanged);
};
window.addEventListener("deviceorientation", onOrientationChanged, false);
window.addEventListener("resize", resize, false);
Et pour terminer il faut rendre la scène dans une boucle infinie à 60 FPS, ici on ne va pas utiliser la fonction render de l'objet WebGLRenderer, mais celle de l'effet stéréo. C'est assez simple à comprendre en réalité car c'est lui qui gère les deux caméras chargées de rendre la scène.
function loop() {
requestAnimationFrame(loop);
viewController.update(clock.getDelta());
stereoEffect.render(scene, camera);
}
Il ne reste plus qu'à implémenter la fonction createScene avec ce que vous voulez, pour ma part j'ai crée une SkySphere, un sol et quelques cubes...
Une SkySphere, un sol et des cubes
Utilisation de l'API Fullscreen pour renforcer l'immersion et surtout supprimer la barre d'adresse !
Vous pouvez télécharger l'intégralité du code ici. Une fois votre scène en place vous pouvez l'afficher dans votre navigateur PC et mobile !
En route pour de nouvelles aventures !
Nous avons vu que créer une application VR avec THREE.js était à la portée de tous, il faut simplement utiliser l'effet stéréoscopique proposé sur le dépôt et enfin ajouter un contrôleur de Head Tracking, lui aussi disponible dans les sources du Framework. De là vous pouvez commencer à créer des expérience web multimédia intéressantes mais faites bien attention car une application VR va plus consommer étant donné que la scène est rendue deux fois !
Il faudra aussi faire attention à la partie UI qui doit elle aussi être présente en double... Ce n'est pas évident à gérer mais avec de la pratique vous verrez que l'on s'en sort quand même :)
Il y a maintenant des petites choses à faire en plus pour rendre l'expérience plus agréable. Déjà il est possible de proposer à l'utilisateur de passer en mode plein écran, ce qui aura pour effet de masquer la barre de navigation sur mobile, permettant une meilleure immersion. Par défaut l'utilisateur n'a aucun moyen de se déplacer mais il est tout à fait possible d'utiliser un clavier ou une souris en bluetooth ou en USB et de mettre au point un contrôleur de déplacement adapté à vos besoins (FPS, TPS, etc...).
Nous sommes impatients de voir et d'essayer vos applications en réalité virtuelle sur mobile ! Vous bossez sur quelque chose ? Vous avez besoin de conseils ? N'hésitez pas à laisser un petit commentaire ou si le cœur vous en dit, à venir boire un café avec nous.
Yannick Comte
-
#2 - Module Federation et Vue à l'ère de l'IA : retour de la MadVue 2026Il y a 3 mois
Voici la seconde partie de mon retour sur la MadVue 2026, la conférence Vue.js qui s'est tenue à Madrid le 22 mai 2026. Si vous avez manqué le début, la première partie est juste ici :
- Partie 1 - Temps réel, URLs typées, formulaires et toolchain
- Partie 2 - Module Federation et Vue à l'ère de l'IA
Après les fondations de l'application Vue moderne, on change d'échelle et d'époque. Dans cet article, on va voir comment partager des composants entre plusieurs applications Vue avec Module Federation, puis trois talks consacrés à Vue et l'intelligence artificielle : faire générer une interface en direct par un LLM, préparer son projet Vue pour les agents, et enfin apprendre le frontend à l'ère de l'IA.
C'est parti !
Lire la suite
Louis GOURAIN
-
#1 - Temps réel, URLs typées, formulaires et toolchain : retour de la MadVue 2026
Il y a 3 mois
Le 22 mai 2026, je me suis rendu à Madrid pour la MadVue 2026, la conférence espagnole dédiée à l'écosystème Vue.js. Une journée dense, neuf talks, et une tendance de fond très claire : entre une grosse moitié orientée IA et expérience développeur et une autre consacrée aux fondations qui rendent nos applications soutenables.
Dans cette série de deux articles, je reviens sur l'ensemble des talks. En les lisant, vous aurez l'impression d'y avoir assisté.
Cet article est le premier des deux, vous pourrez retrouver chaque partie de cette série ici :
- Partie 1 - Temps réel, URLs typées, formulaires et toolchain
- Partie 2 - Module Federation et Vue à l'ère de l'IA
Dans ce premier article, on pose les fondations d'une application Vue moderne : on verra comment faire du temps réel proprement, comment en finir avec le parsing manuel des paramètres d'URL, un tout nouveau modèle pour construire ses composants de formulaire, l'avènement d'une toolchain JavaScript unifiée (Oxc, Rolldown), et ce qui nous attend avec Nuxt 5.
Beaucoup de sujets à traiter, alors c'est parti !
Lire la suite
Louis GOURAIN
-
#4 - Construire un DOM Virtuel, les différentes méthodes de rendu et bien écrire ses tests : retour de la Vue.js Amsterdam 2023
Il y a 3 ans
Pour la première fois, Wanadev s’est rendu à la plus grosse conférence annuelle autour de Vue.js : la Vue.js Amsterdam 2023. J’ai eu l’honneur d’assister à la 5ème édition, couronnée par le retour d’Evan You, le créateur de Vue.js et Vite, en personne.
Dans cette série de quatre articles, je vais vous faire revivre ces deux jours de conférences. En les lisant, vous aurez l’impression d’y avoir assisté !
Cet article est le troisième des quatre, vous pourrez retrouver chaque partie de cette série ici :
Dans cet article nous allons voir comment construire un Virtual DOM, on parlera des différentes façons de faire du rendu dans le web, de comment écrire des bons tests et plein d’autres choses.
Beaucoup de sujets à traiter, alors, c’est parti !
Lire la suite
Louis GOURAIN
-
#3 - Vue.js en 2023, l'avenir de Vue Router, les patterns avec Pinia : retour de la Vue.js Amsterdam 2023
Il y a 3 ans
Pour la première fois, Wanadev s’est rendu à la plus grosse conférence annuelle autour de Vue.js : la Vue.js Amsterdam 2023. J’ai eu l’honneur d’assister à la 5ème édition, couronnée par le retour d’Evan You, le créateur de Vue.js et Vite, en personne.
Dans cette série de quatre articles, je vais vous faire revivre ces deux jours de conférences. En les lisant, vous aurez l’impression d’y avoir assisté !
Cet article est le troisième des quatre, vous pourrez retrouver chaque partie de cette série ici :
Dans cet article on va parler de Vue en 2023, de patterns Pinia, du futur de vue-router, de l’écosystème Vue et de TypeScript avec Vue.
Beaucoup de sujets à traiter, alors, c’est parti !
Lire la suite
Louis GOURAIN
-
#2 - Nuxt.js, l'art de la composition, accessibilité : retour de la Vue.js Amsterdam 2023
Il y a 4 ans
Pour la première fois, Wanadev s’est rendu à la plus grosse conférence annuelle autour de Vue.js : la Vue.js Amsterdam 2023. J’ai eu l’honneur d’assister à la 5ème édition, couronnée par le retour d’Evan You, le créateur de Vue.js et Vite, en personne.
Dans cette série de quatre articles, je vais vous faire revivre ces deux jours de conférences. En les lisant, vous aurez l’impression d’y avoir assisté !
Cet article est le second des quatre, vous pourrez retrouver chaque partie de cette série ici :
Dans cet article on va parler de Nuxt en 2023, d’un client Mastodon fait avec Nuxt, d’expérience développeur sur Nuxt, de Nitropack, de CSS-in-TS, de comment concevoir ses composants Vue.js, d’accessibilité et de maintenance d’écosystème open-source en entreprise.
Beaucoup de sujets à traiter, alors c’est parti !
Lire la suite
Louis GOURAIN
-
#1 - NPM Package, PlayWright, Google LightHouse : retour de la Vue.js Amsterdam 2023
Il y a 4 ans
Pour la première fois, Wanadev s’est rendu à la plus grosse conférence annuelle autour de Vue.js : la Vue.js Amsterdam 2023. J’ai eu l’honneur d’assister à la 5ème édition, couronnée par le retour d’Evan You, le créateur de Vue.js et Vite, en personne.
Dans cette série de quatre articles, je vais vous faire revivre ces deux jours de conférences. En les lisant, vous aurez l’impression d’y avoir assisté !
Cet article est le premier des quatre, vous pourrez retrouver chaque partie de cette série ici :
Dans cet article, nous allons parler de Rock’n Roll, voir comment créer son package NPM, découvrir PlayWright pour tester ses applications de bout en bout, parler de commerce international, déconstruire les idées reçues sur Google Lighthouse et aborder le sujet de la performance sous Vue.js.
Beaucoup de sujets à traiter, alors c’est parti !
Lire la suite
Louis GOURAIN