Comment utiliser Expo et Three.js avec React Native ! (1/2)

Aujourd’hui nous allons voir à quel point il est facile de créer des objets 3D. Nous allons nous concentrer sur la bibliothèque Three.js et le framework EXPO pour créer nos modèles 3D.

Attention pour le moment l’outil Snack du site https://snack.expo.io/ n’apprécie pas trop la 3D avec Three … donc ne vous inquiétez pas si vous avez des messages du type Error ColladaLoader, il suffit juste de lancer l’application directement en local pour que tout rentre dans l’ordre. Une prochaine mise à jour devrait résoudre le problème.

Donc pour commencer, initialisez un projet Expo en local. Et ajouter les librairies suivantes :

yarn add expo-gl expo-three three

Ensuite ouvrir le fichier App.js, il va falloir initialiser les import, votre fichier devrait ressembler à ça :

//App.js
import * as React from 'react';
import * as ExpoTHREE from 'expo-three';
import * as THREE from 'three';

export default function App() {
  render() {
    return (
      <View></View>
    );
  }
}

Ce qui nous donne un magnifique écran blanc, sans erreur dans votre console.

L’appel import * as permet d’importer tous les composants d’une librairie, puis de les rendre accessible à partir du nom défini avec le mot suivant. Pratique pour éviter les en-tête rallonge.

Passons à la dernière étape pour afficher notre première Scène 3D. Pour commencer il faut initialiser le Context WEBGL dans lequel nous allons afficher une scène fixe avec une grille. Le code est commenté pour que vous puissiez comprendre à quoi sert chaque

export default function App() {

    // Fonction permettant de créer un affichage dans notre GLVIEW
    async function _onContextCreate (gl) {
        
        const { drawingBufferWidth: width, drawingBufferHeight: height } = gl; // Définition des dimensions d'affichage
        const sceneColor = 0x10505b; // Couleur de fond de la zone

        // Création d'un "Renderer" WEBGL sans le DOM habituel avec THRE
        let renderer = new ExpoTHREE.Renderer({ gl });
        renderer.setSize(width, height);
        renderer.setClearColor(sceneColor);

        // Création de la caméra 3D avec positionnement dans l'espace
        let camera = new THREE.PerspectiveCamera(80, width / height, 0.01, 1000);
        camera.position.set(2, 5, 5);

        // Création de la scène à afficher, et ajout d'une grille pour aider au positionnement
        let scene = new THREE.Scene();
        scene.add(new THREE.GridHelper(10, 10));

        // Rendu de la scène 
        renderer.render(scene, camera);
        gl.endFrameEXP();
    }

    return (
        <GLView
            style={{ flex: 1 }}
            onContextCreate={_onContextCreate}
        />
    );
}

Vous venez d’afficher votre première scène 3D Basique avec WEBGL, THREE, et Expo. Le rendu est simple, il va vous permettre grâce aux explications suivantes d’ajouter des objets sur la scène, et de les animer.