Les langages du web > Le Javascript > Three.js - Introduction

Three_2

Shape() et ExtrudeGeometry()

Documentation

Après avoir importé ces deux classes,
import { Shape, ExtrudeGeometry } from "...", il est possible de dessiner une forme (une base). Puis, de l'extruder (et ainsi réaliser un prisme droit)

Un prisme est un polyèdre à deux bases parallèles et dont les faces sont des parallélogrammes.
Un prisme droit a ses faces perpendiculaires à ses bases (=> ces faces sont rectangulaires)
Un polyèdre est un solide délimité par des faces polygonales dont les intersections forment des arêtes et les points de rencontre de celles-ci, des sommets. Un polyèdre a au moins 4 faces, et s'appelle alors tétraèdre.

Code (geometries.js)

import { Shape, ExtrudeGeometry } from "../../three.module.min.js"

function createGeometries() {

  /* = hangar (9,3 m de large; 3,5 m de haut (faîte du toit) ; 19,1 m de long)
  2,8 m = hauteur des parois latérales */

  let prism = new Shape(); /* dans le plan XY, la base */

  prism.moveTo( -4.65, 0 ); /* point initial */
  prism.lineTo( -4.65, 2.80 );
  prism.lineTo(  0,    3.50 );
  prism.lineTo( 4.65,  2.80 );
  prism.lineTo( 4.65,  0 );
  prism.lineTo( -4.65, 0 ); /* retour au point initial */

  let extrudeSettings = {
    steps: 1,
    depth: -19.1, /* dans l'axe Z, la longueur d'étirement */
    bevelEnabled: false,
    bevelThickness: 1,
    bevelSize: 0,
    bevelOffset: 0,
    bevelSegments: 1
  };

  let geometry = new ExtrudeGeometry( prism, extrudeSettings );

  return {geometry}
}

export { createGeometries }

La couleur du polyèdre, son positionnement, la caméra, la lumière seront définis dans d'autres modules.
NB : Si la caméra se trouve à l'intérieur du polyèdre, la couleur ne sera pas visible ...
Si la caméra est trop proche, le polyèdre apparaîtra coupé par un plan.