Learn Three.js for 3D Computer Graphics/

...

/

Advanced Geometries: BoxLineGeometry and RoundedBoxGeometry

Advanced Geometries: BoxLineGeometry and RoundedBoxGeometry

Learn to use THREE.BoxLineGeometry, THREE.RoundedBoxGeometry and how to set their properties.

We'll cover the following...

The BoxLineGeometry

If we just want to show the outline, we can use THREE.BoxLineGeometry. This geometry works exactly like THREE.BoxGeometry, but instead of rendering a solid object, it renders the box using lines, as shown below:

Press + to interact
A box rendered using lines
A box rendered using lines

Example: BoxLineGeometry

Let’s execute the box-line-geometry.js example in the playground below by clicking the “Run” button:

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
// const CopyWebpackPlugin = require('copy-webpack-plugin')
const fs = require('fs').promises

// we should search through the directories in examples, and use
// the name from the files to generate the HtmlWebpackPlugin settings.
module.exports = async () => {

  return {
    module: {
      rules: [
        {
          test: /\.glsl$/i,
          use: 'raw-loader'
        }
      ]
    },
    mode: 'development',
    entry: {
      'chapter-6': './samples/chapters/chapter-6/box-line-geometry.js',
    },
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'bundle.js',
      publicPath: '/',
    },
    plugins: [
      new HtmlWebpackPlugin(),
    ],
    experiments: {
      asyncWebAssembly: true
    },
    devServer: {
       allowedHosts: 'all',
       host: '0.0.0.0',
       port: '3000',
       static: [
        {
          directory: path.join(__dirname, 'assets'),
          publicPath: '/assets'
        },
        {
          directory: path.join(__dirname, 'dist')
        }
      ] 
    },
  mode: 'development',
  }
}
Explore the properties of BoxLineGeometry

Note: We can change the properties of the geometries from the right control panel in the output screen.

Creating THREE.BoxGeometry

We use this geometry in the same way as THREE.BoxGeometry, but instead of creating THREE.Mesh, we need to create THREE.LineSegments (line 8), using one of the available line-specific materials:

Press + to interact
import { BoxLineGeometry } from 'three/examples/jsm/geometries/BoxLineGeometry'
const material = new THREE.LineBasicMaterial({
    color:
        0x000000
}),
const geometry = new BoxLineGeometry(width, height, depth,
    widthSegments, heightSegments, depthSegments)
const lines = new THREE.LineSegments(geometry, material)
scene.add(lines)

We can pass the following properties to the THREE.BoxLineGeometry, these are the same as THREE.BoxGeometry’s properties:

  • width: This is the width of the cube. This is the length of the vertices of the cube along the ...