Three.js - Polyhedron Geometries

Quiz

A polyhedron is a geometry that has only flat faces and straight edges. You can draw different types of polyhedrons by specifying vertices and indices.

vertices − Array of points that make up the polyhedron.
indices − Array of indices that make up the faces from the vertices.
radius − The radius of the final shape. This defaults to 1.
detail − How many levels to subdivide the geometry. The more detail, the smoother the shape.

The following code creates a polyhedron with four faces.

const vertices = [
   1, 1, 1,
   -1, -1, 1,
   -1, 1, -1,
   1, -1, -1
]
const indices = [
   2, 1, 0,
   0, 3, 2,
   1, 3, 0,
   2, 3, 1
]
const geometry = new THREE.PolyhedronGeometry(vertices, indices, radius, detail)

Example

Check out the following example.

polyhedron.html

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta http-equiv="X-UA-Compatible" content="ie=edge" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Three.js - Polyhedron</title>
      <style>
         * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -applesystem, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
               Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
         }
         html,
         body {
           height: 100vh;
           width: 100vw;
         }
         #threejs-container {
            position: block;
            width: 100%;
            height: 100%;
         }
      </style>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.7/dat.gui.js"></script>
   </head>
   <body>
      <div id="threejs-container"></div>
      <script type="module">
         // Creating a tetrahedron using Polyhedron geometry in Three.js
         // GUI
         const gui = new dat.GUI()
         // sizes
         let width = window.innerWidth
         let height = window.innerHeight
         // scene
         const scene = new THREE.Scene()
         scene.background = new THREE.Color(0x262626)
         const axesHepler = new THREE.AxesHelper(10)
         scene.add(axesHepler)
         // camera
         const camera = new THREE.PerspectiveCamera(30, width / height, 0.1, 100)
         camera.position.set(0, 0, 10)
         const camFolder = gui.addFolder('Camera')
         camFolder.add(camera.position, 'z').min(10).max(60).step(10)
         camFolder.open()
         // prettier-ignore
         const vertices = [
            1, 1, 1,
            -1, -1, 1,
            -1, 1, -1,
            1, -1, -1
         ]
         // prettier-ignore
         const indices = [
            2, 1, 0,
            0, 3, 2,
            1, 3, 0,
            2, 3, 1
         ]
         const geometry = new THREE.PolyhedronGeometry(vertices, indices)
         const material = new THREE.MeshNormalMaterial({
            color: 0xffffff
         })
         const materialFolder = gui.addFolder('Material')
         materialFolder.add(material, 'wireframe')
         materialFolder.open()
         const plane = new THREE.Mesh(geometry, material)
         scene.add(plane)
         // experimenting plane properties
         const planeProps = {
            radius: 1,
            detail: 1
         }
         const props = gui.addFolder('Properties')
         props
            .add(planeProps, 'radius', 1, 30)
            .step(1)
            .onChange(redraw)
            .onFinishChange(() => console.dir(plane.geometry))
         props.add(planeProps, 'detail', 1, 30).step(1).onChange(redraw)
         props.open()
         function redraw() {
            let newGeometry = new THREE.PolyhedronGeometry(
               verticesOfCube,
               indicesOfFaces,
               planeProps.radius,
               planeProps.detail
            )
            plane.geometry.dispose()
            plane.geometry = newGeometry
         }
         // responsiveness
         window.addEventListener('resize', () => {
            width = window.innerWidth
               height = window.innerHlet
               camera.aspect = width / height
               camera.updateProjectionMatrix()
               renderer.setSize(window.innerWidth, window.innerHeight)
               renderer.render(scene, camera)
         })
         // renderer
         const renderer = new THREE.WebGL1Renderer()
         renderer.setSize(width, height)
         renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
         // animation
         function animate() {
            requestAnimationFrame(animate)
            plane.rotation.x += 0.005
            plane.rotation.y += 0.01
            renderer.render(scene, camera)
         }
         // rendering the scene
         const container = document.querySelector('#threejs-container')
         container.append(renderer.domElement)
         renderer.render(scene, camera)
         animate()
      </script>
   </body>
</html>

Output

Three.js also has geometries for some common polyderons.

Polyhedron	No. of faces	Code
Tetrahedron	4	THREE.TetrahedronGeometry
Octahedron	12	THREE.OctahedronGeometry
Dodecahedron	12	THREE.DodecahedronGeometry
Icosahedron	20	THREE.IcosahedronGeometry

Example

Check out the following example.

polyhedrons.html

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta http-equiv="X-UA-Compatible" content="ie=edge" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Three.js - Polyhedrons</title>
      <style>
         * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -applesystem, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
               Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
         }
         html,
         body {
            height: 100vh;
            width: 100vw;
         }
         #threejs-container {
            position: block;
            width: 100%;
            height: 100%;
         }
      </style>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.7/dat.gui.js"></script>
   </head>
   <body>
      <div id="threejs-container"></div>
      <script type="module">
         // Various built-in polyhedron geometries in Three.js
         // Tetrahedron, Octahedron, Dodecahedron, Icosahedron
         // GUI
         const gui = new dat.GUI()
         // sizes
         let width = window.innerWidth
         let height = window.innerHeight
         // scene
         const scene = new THREE.Scene()
         scene.background = new THREE.Color(0x262626)
         // camera
         const camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 100)
         camera.position.set(0, 0, 10)
         const camFolder = gui.addFolder('Camera')
         camFolder.add(camera.position, 'z').min(10).max(60).step(10)
         camFolder.open()
         // tetrahedron
         const geometry = new THREE.TetrahedronGeometry()
         const material = new THREE.MeshNormalMaterial()
         const materialFolder = gui.addFolder('Material')
         materialFolder.add(material, 'wireframe')
         materialFolder.open()
         const tetrahedron = new THREE.Mesh(geometry, material)
         tetrahedron.position.set(-5, 0, 0)
         scene.add(tetrahedron)
         const tetrahedronProps = {
            radius: 1,
            detail: 1
         }
         const tetraProps = gui.addFolder('Tetrahedron')
         tetraProps
            .add(tetrahedronProps, 'radius', 1, 50)
            .step(1)
            .onChange(redrawTetrahedron)
            .onFinishChange(() => console.dir(tetrahedron.geometry))
            tetraProps.add(tetrahedronProps, 'detail', 1, 50, 1).onChange(redrawTetrahedron)
         tetraProps.open()
         function redrawTetrahedron() {
            let newGeometry = new THREE.TetrahedronGeometry(
               tetrahedronProps.radius,
               tetrahedronProps.detail
            )
            tetrahedron.geometry.dispose()
            tetrahedron.geometry = newGeometry
         }
         // octahedron
         const geometry1 = new THREE.OctahedronGeometry()
         const octahedron = new THREE.Mesh(geometry1, material)
         octahedron.position.set(-2.5, 0, 0)
         scene.add(octahedron)
         const octahedronProps = {
            radius: 1,
            detail: 1
         }
         const octaProps = gui.addFolder('Octahedron')
         octaProps
            .add(octahedronProps, 'radius', 1, 50)
            .step(1)
            .onChange(redrawOctahedron)
            .onFinishChange(() => console.dir(octahedron.geometry))
         octaProps.add(octahedronProps, 'detail', 1, 50, 1).onChange(redrawOctahedron)
         octaProps.open()
         function redrawOctahedron() {
            let newGeometry = new THREE.OctahedronGeometry(
               octahedronProps.radius,
               octahedronProps.detail
            )
            octahedron.geometry.dispose()
            octahedron.geometry = newGeometry
         }
         // dodecahedron
         const geometry2 = new THREE.DodecahedronGeometry()
         const dodecahedron = new THREE.Mesh(geometry2, material)
         dodecahedron.position.set(0, 0, 0)
         scene.add(dodecahedron)
         const dodecahedronProps = {
            radius: 1,
            detail: 1
         }
         const dodecaProps = gui.addFolder('Dodecahedron')
         dodecaProps
            .add(dodecahedronProps, 'radius', 1, 50)
            .step(1)
            .onChange(redrawDodecahedron)
            .onFinishChange(() => console.dir(dodecahedron.geometry))
         dodecaProps.add(dodecahedronProps, 'detail', 1, 50, 1).onChange(redrawDodecahedron)
         dodecaProps.open()
         function redrawDodecahedron() {
            let newGeometry = new THREE.DodecahedronGeometry(
               dodecahedronProps.radius,
               dodecahedronProps.detail
            )
            dodecahedron.geometry.dispose()
            dodecahedron.geometry = newGeometry
         }
         // icosahedron
         const geometry3 = new THREE.IcosahedronGeometry()
         const icosahedron = new THREE.Mesh(geometry3, material)
         icosahedron.position.set(2.5, 0, 0)
         scene.add(icosahedron)
         const icosahedronProps = {
            radius: 1,
            detail: 1
         }
         const icosaProps = gui.addFolder('Icosahedron')
         icosaProps
            .add(icosahedronProps, 'radius', 1, 50)
            .step(1)
            .onChange(redrawIcosahedron)
            .onFinishChange(() => console.dir(icosahedron.geometry))
         icosaProps.add(icosahedronProps, 'detail', 1, 50, 1).onChange(redrawIcosahedron)
         icosaProps.open()
         function redrawIcosahedron() {
            let newGeometry = new THREE.IcosahedronGeometry(
               icosahedronProps.radius,
               icosahedronProps.detail
            )
            icosahedron.geometry.dispose()
            icosahedron.geometry = newGeometry
         }
         // responsiveness
         window.addEventListener('resize', () => {
            width = window.innerWidth
            height = window.innerHeight
            camera.aspect = width / height
            camera.updateProjectionMatrix()
            renderer.setSize(window.innerWidth, window.innerHeight)
            renderer.render(scene, camera)
         })
         // renderer
         const renderer = new THREE.WebGL1Renderer()
         renderer.setSize(width, height)
         renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
         // animation
         function animate() {
            requestAnimationFrame(animate)
            const polyhedrons = [tetrahedron, octahedron, dodecahedron, icosahedron]
            polyhedrons.forEach((hedron) => {
               hedron.rotation.x += 0.005
               hedron.rotation.y += 0.01
            })
            renderer.render(scene, camera)
         }
         // rendetetrahedron the scene
         const container = document.querySelector('#threejs-container')
         container.append(renderer.domElement)
         renderer.render(scene, camera)
         animate()
      </script>
   </body>
</html>

Output

threejs_geometries.htm

Print Page