Développement web

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

 

<!DOCTYPE html>

 

<html lang= »fr »>

 

<head>

 

<meta charset= »UTF-8″>

 

<meta name= »viewport »content= »width=device-width, initial-scale=1.0″>

 

<meta http-equiv= »X-UA-Compatible »content= »ie=edge »>

 

<link rel= »stylesheet »href= »css/style.css »>

 

<title>Three.js Crash Course</title>

 

</head>

 

<body>

 

 

<script src= »js/three.js »></script>

 

<script src= »js/OrbitControls.js »></script>

 

<script src= »js/app.js »></script>

 

</body>

 

</html>

 

 

 

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 »

Gabriel Dabi-Schwebel

Ingénieur de formation j’ai commencé ma carrière dans le conseil en télécom et en média. J’ai aussi monté de multiples projets entrepreneuriaux, marque de bijoux, bar à jus de fruits, éditeurs de logiciel avant de créer 1min30 en 2012, la première agence en Inbound Marketing en France.

Avec 1min30, nous avons piloté les stratégies digitales de centaines d’entreprises mais aussi développé un blog qui a plus de 300K lecteurs par mois, une communauté de plus de 100K abonnés sur l’ensemble des nos réseaux sociaux et une maison d’édition dans laquelle nous publions nos livres et ceux de nos clients.

Depuis 2017, je suis ainsi l’auteur et coauteur de 8 livres sur le marketing et la vente, dont 5 de méthodes basées sur l’intelligence collective : Acquisition Strategy Design, Customer eXperience ReDesign, Brand Strategy Design, Q2C Selling et 3 méthodes marketing pour les RHs

Aujourd’hui, 1min30 fait partie des 3 plus grandes agences HubSpot en France. Nous avons fait des intégrations les plus complexes notre spécialité et proposons à nos clients un accompagnement complet sur la solution alliant conseil, intégration, formation et agence. Contactez moi si vous souhaitez dépasser les objectifs de leur investissement CRM.