Apprenez à faire de la 3D pour du Web avec THREE js

On tombe souvent sur des sites internet qui nous en mettent plein la vue avec des animations étonnantes. Certaines sont encore plus surprenantes car elles utilisent de la 3D. Dans cet article je vais vous initier à la 3D grâce à la librairie THREE.js qui permet d’utiliser cette technique webdesign sur votre site web assez facilement. Vous pouvez suivre cet article si vous connaissez HTML, CSS et JavaScript.

Nous allons afficher un cube dans un élement canvas qui permet d’afficher des dessins. Nous pourrons le faire tourner dans tous les sens. Pour ce faire, nous allons intégrer ce que l’on appelle des controls.

Construisons la base

Nous venons d’importer la librairie THREE.js dans notre projet ; vous pouvez la télécharger à partir de ce lien. La deuxième ressource chargée est un fichier JavaScript qui s’appelle OrbitControl.js
Nous allons maintenant pouvoir passer à la création de notre univers.

La scène

Pour afficher notre élément à l’écran il faut lui créer une scène. Nous devons aussi le voir de nos propres yeux. Nous intégrerons pour cela une caméra.
On remarque tout de suite que les éléments que nous rajoutons sont les mêmes que ceux d’un logiciel 3D comme Blender, 3DS Max ou encore Cinema 4D.

let scene = new THREE.Scene()
let camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)

let renderer = new THREE.WebGLRenderer()

renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)
window.addEventListener('resize', () => {
    let width = window.innerWidth
    let height = window.innerHeight
    renderer.setSize(width, height)
    camera.aspect = width / height
    camera.updateProjectionMatrix()
})

controls = new THREE.OrbitControls(camera, renderer.domElement)

Nous venons d’initialiser notre scène. Nous pouvons maintenant ajouter un objet dans cette scène.

/**
 * Create the shape
 */
let geometry = new THREE.BoxGeometry(1000, 1000, 1000)
let cubeMaterials = [
    new THREE.MeshBasicMaterial({
        map: new THREE.TextureLoader().load('https://picsum.photos/700/700/?random'),
        side: THREE.DoubleSide
    }),
    new THREE.MeshBasicMaterial({
        map: new THREE.TextureLoader().load('https://picsum.photos/500/500/?random'),
        side: THREE.DoubleSide
    }),
    new THREE.MeshBasicMaterial({
        map: new THREE.TextureLoader().load('https://picsum.photos/800/800/?random'),
        side: THREE.DoubleSide
    }),
    new THREE.MeshBasicMaterial({
        map: new THREE.TextureLoader().load('https://picsum.photos/550/550/?random'),
        side: THREE.DoubleSide
    }),
    new THREE.MeshBasicMaterial({
        map: new THREE.TextureLoader().load('https://picsum.photos/520/520/?random'),
        side: THREE.DoubleSide
    }),
    new THREE.MeshBasicMaterial({
        map: new THREE.TextureLoader().load('https://picsum.photos/620/620/?random'),
        side: THREE.DoubleSide
    }),
]

let cubeMaterial = THREE.MeshFaceMaterial(cubeMaterials)

/**
 * Create a material
 */
let cube = new THREE.Mesh(geometry, cubeMaterial)
scene.add(cube)


camera.position.z = 3

let ambientLight = new THREE.AmbientLight(0xFFFFFF, 1.0)
scene.add(ambientLight)

La variable cubeMaterials contient toutes les faces du cube.
Toutes les fonctions présentes dans ce fragment de code se trouvent dans la documentation THREE.js.

Le rendu

Passons au rendu, lequel permet d’afficher à l’écran le canvas où s’affichera le cube.

/**
 * Game logic
 */
 let update = function() {
    
 }

 /**
  * Draw scene
  */
 let render = function() {
     renderer.render(scene, camera)
 }

 /**
  * Run game loop (update, render, repeat)
  */
 let GameLoop = function() {
    requestAnimationFrame(GameLoop)
    update()
    render()
 }

 GameLoop()

 

C’est tout ?

Oui c’est tout ce dont vous avez besoin pour afficher un élément en 3D sur votre page. Vous ne me croyez pas ? Voici le rendu final :

See the Pen NzovEa by PanPan (@PanPan_94) on

CodePen.

Si cet article vous a plu, nous vous invitons à découvrir notre agence de Webdesign et à télécharger notre livre blanc « Identité Visuelle : rendez votre marque mémorable et reconnaissable »