three.js
1 - Configuration

Configuration

Vite

Nous implémentons vite pour la configuration de notre projet. Il nous sert de bundler pour notre projet. Il permet d'avoir un serveur, de la compilation et de l'optimisation.

Vous pouvez récuperer le projet sur ce repository GitHub (opens in a new tab)

Installation

# npm init vite@latest # Déjà fait
npm install

Recuperation des templates

Vous pouvez récupérer le dossier

Vous pouvez voir les fichiers de template sur le repository GitHub (opens in a new tab).

Fichiers

Notre code sera dans le dossier src/. Nous allons implémenter les différentes parties du cours dans des dossiers séparés :

  • ex1
  • ex2
  • ex3 ...

HTML, CSS, JS

Nous avons 3 fichiers principaux :

  • index.html
  • style.css
  • script.js

La logique sera dans script.js.

index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
 
<canvas class="webgl"></canvas>
<script type="module" src="script.js"></script>
</body>
</html>
  • La balise script contient un attribut type="module" pour importer des modules ES6.

style.css

/* A venir */

script.js

// A venir

vite.config.js

import { defineConfig } from 'vite'
import glsl from 'vite-plugin-glsl'
import restart from 'vite-plugin-restart'
import { resolve } from 'path'
 
export default defineConfig({
    root: 'src/', // Sources files (typically where index.html is)
    publicDir: '../public/', // Path from "root" to static assets (files that are served as they are)
    server: {
        host: true, // Open to local network and display URL
    },
    build: {
        outDir: '../dist', // Output in the dist/ folder
        emptyOutDir: true, // Empty the folder first
        sourcemap: true, // Add sourcemap
        rollupOptions: {
            input: {
                main: resolve(__dirname, 'src/ex1.html'),
                ex2: resolve(__dirname, 'src/ex2/index.html'),
                ex3: resolve(__dirname, 'src/ex3/index.html'),
                ex4: resolve(__dirname, 'src/ex4/index.html'),
                ex5: resolve(__dirname, 'src/ex5/index.html'),
                ex6: resolve(__dirname, 'src/ex6/index.html'),
                ex7: resolve(__dirname, 'src/ex7/index.html'),
                ex8: resolve(__dirname, 'src/ex8/index.html'),
                ex9: resolve(__dirname, 'src/ex9/index.html'),
                ex10: resolve(__dirname, 'src/ex10/index.html'),
                ex11: resolve(__dirname, 'src/ex11/index.html'),
                ex12: resolve(__dirname, 'src/ex12/index.html'),
                ex13: resolve(__dirname, 'src/ex13/index.html'),
                ex14: resolve(__dirname, 'src/ex14/index.html'),
                ex15: resolve(__dirname, 'src/ex15/index.html'),
            }
        }
    },
    plugins: [
        restart({ restart: ['../public/**'] }), // Restart server on static file change
        glsl()
    ],
})

Lancer le serveur

npm run dev

Aller à l'adresse http://localhost:5173/ex1/index.html (opens in a new tab)

Inspecter et vérifier que tout est bien configuré.

Pour l'instant il n'y a rien, mais nous allons commencer à coder dans le prochain chapitre.

Introduction2 - Installer Three.js