three.js geoms

February 20, 2023

About the three.js

Three.js is a cross-browser JavaScript library and application programming interface used to create and display animated 3D computer graphics in a web browser using WebGL. The source code is hosted in a repository on GitHub.

Three.js allows the creation of graphical processing unit (GPU)-accelerated 3D animations using the JavaScript language as part of a website without relying on proprietary browser plugins. This is possible due to the advent of WebGL, a low-level graphics API created specifically for the web.

(...)

One notable difference is that, unlike common geometry-handling tools (Rhino, Sketchup, Revit, etc.), Three.js reverses the y-axis and z-axis.

THREE.BoxGeometry array

Reversed axes and boxes array
The camera can be controlled with the mouse.

BoxGeometry is a geometry class for a rectangular cuboid with a given 'width', 'height', and 'depth'. On creation, the cuboid is centered on the origin, with each edge parallel to one of the axes. Using these properties, where the cuboid is centered, the box array shown above can be created. The detailed code is available on GitHub.

    for (let i = 1; i <= this.size; i++) {
        const geometry = new THREE.BoxGeometry(i, i, i);
        const edges = new THREE.WireframeGeometry(geometry);
        const line = new THREE.LineSegments( edges, new THREE.LineBasicMaterial( { color: 0xffffff } ) );
    
        const material = new THREE.MeshBasicMaterial({color: 0x0011e3});
        const cube = new THREE.Mesh(geometry, material);
  
        let interval = i;
        if (i == 1) {
          interval = 0;
        } else {
          interval = i / 2 * i * 1.5
        }
  
        cube.position.x = -interval;
        line.position.x = -interval;
  
        cube.position.y = i / 2;
        line.position.y = i / 2;
  
        line.renderOrder = 1;
  
        scene.add(cube);
        scene.add(line);
      }

THREE.SphereGeometry

SphereGeometry is a geometry class for a sphere with a given 'radius', 'widthSegments', and 'heightSegments'.

All geometries in Three.js are expressed as a Mesh. Thus, incomplete spheres can be created depending on the number of Mesh segments. The initial SphereGeometry has 10 by 10 meshes (the Segments value in the control box). Increasing these values using the control box located in the upper right produces a more finely expressed SphereGeometry.

Sphere geometry
The camera and the sphere properties can be controlled with the mouse.

---