Briefing

Le projet Intérieur / Extérieur vous propose de réaliser en binôme une expérience transversale qui relie création artistique, narration visuelle et maîtrise technique. Placé stratégiquement au cœur de votre parcours, il a pour objectif de développer votre capacité à concevoir et à mener à bien un projet multimédia complet, de l’idée initiale jusqu’à sa mise en œuvre concrète.

Concrètement

Nous nous concentrerons sur la partie Intérieur, qui sera de développemer une scene d'un bâtiment en 3D, accessible de manière interactive.

Critères
d'évaluations

Les critères seront une représentation de votre projet global:

• Qualité fonctionnelle du dispositif
• Qualité de la démonstration
• Qualité technique
• Qualité graphique
• Expérience utilisateur (UX)
• Planification et organisation
• Qualité du rapport de production

Want more ?

DOM & manipulation de pixels

Le Document Object Model représente le document comme un ensemble de nœuds et d'objets (les balises) possédant des propriétés et des méthodes. Par contre quand il s'agit de manipuler des pixels le DOM n'est d'aucun secours, ou presque.

Il existe une balise canvas qui nous permet de manipuler directement des pixels, comme dans un programme d'édition d'images.

2D

Voici comment dessiner un carré dans un canvas en 2D:

// Retourne notre canvas.myCanvas
const canvas = document.querySelector( ".myCanvas" );

// Récupère la boite à outils pour dessiner dans un contexte en 2D
const ctx = canvas.getContext( '2d' );

// Dessine un carré noir de 100px de côté, en haut à gauche du canvas
ctx.fillRect( 0, 0, 100, 100);

3D

Si on se voulait du mal, on pourrait utiliser un contexte 3D:

// Retourne notre canvas.myCanvas
const canvas = document.querySelector( ".myCanvas" );

// Récupère la boite à outils pour dessiner dans un contexte en 3D
const ctx = canvas.getContext( 'webgl2' );

Contrairement à un contexte en 2D, coder dans un contexte en 3D peut être très compliqué sans notions approfondies de WebGL et GLSL.

Three.js

Se tenir à jour

Cette librairie évolue constamment, il est toujours bon de savoir où regarder pour voir les derniers changements.

Hello³

Prérequis

• Moteur de rendu
• Au moins une caméra
• Une scene
• Un objet 3d
• Du courage (ça va bien se passer)

Installation

Il existe plusieurs façon d'importer three.js à votre projet, mais cela dépend en partie de votre workflow. La recommandation est de passer par un import depuis npm, et d'utiliser un bundler (webpack, esbuild, rollup, etc.).

Codepen

Pour nous faciliter la tâche on va commencer sur codepen, nous reviendrons sur l'installation pour le projet ultérieurement.

WebGL Renderer

La première étape est de mettre en place le moteur de rendu. Ce dernier calculera comment afficher nos objets en 3D. Par défaut il crée une balise canvas, mais on peut aussi lui en fournir une existante pour plus de flexibilité.

Camera

Sans caméra pas de rendu. Il existe plusieurs types de caméras, la plus utilisée et celle qui se rapproche le plus de l'œil humain: la PerspectiveCamera.

Perspective Camera

const camera = new THREE.PerspectiveCamera( verticalFov, aspectRatio, near, far );

Scene

Il nous manque un endroit où placer nos objets 3D: une Scene.

Avec la méthode add on va pouvoir y ajouter nos éléments (objets 3d, cameras, lumières, etc.).

const scene = new THREE.Scene();
scene.add( camera );

Coordonnées

Par défaut, chaque élément créé (camera, objet 3D, etc.) se positionne au centre d'une scene (x: 0, y: 0, z :0). Les valeurs n'ont pas d'unité, c'est à vous de créer une échelle de valeur de sorte que votre scene soit crédible.

Premier rendu

Pour lancer un rendu de votre scene, il faut appeler la méthode render de notre renderer. Il faut lui passer 2 arguments: la scene à rendre et la caméra active.

renderer.render( scene, camera );

Le fond noir prouve que notre setup fonctionne. Pour le moment, la caméra ne voir rien à afficher et donc afficher la couleur de fond par défaut.

Mesh

Un objet en 3d est appelé Mesh, il est composé d'une forme (geometry) et d'une apparence (material).

Geometry

Créons un cube de taille 1 avec la méthode BoxGeometry:

const geometrie = new THREE.BoxGeometry( 1, 1, 1 );

Material

Avec la méthode MeshBasicMaterial nous pouvons définir une apparence simple et sans gestion de lumière pour notre géométrie:

const material = new THREE.MeshBasicMaterial(
  {
    color: 'gold'

    // Si true, permet de voir uniquement
    // les arêtes de notre forme.
    wireframe: false
  }
);

Fuuuuuusion

Une fois qu'on a défini la forme et l'aspect de notre objet, nous allons les combiner pour lui donner vie avec la méthode Mesh.

const geomtry = […],
      material = […],
      mesh = new THREE.Mesh( geometry, material );

// on ajoute notre objet dans la scene
scene.add( mesh );

Une dernière chose: notre camera se situe en {x:0, y: 0, z: 0}, comme notre cube. Reculons là pour enfin voir quelque chose.

camera.position.z = 5;