Revision history [back]

The process for creating finger joints on edges using three.js / react-three-fiber can be achieved using the following steps:

1. Model your object with appropriate geometry that requires the finger-jointed edges.

2. Define the "finger-joint" geometry using the BoxBufferGeometry method.

3. Position and scale the box to fit the edge of the object you wish to apply the joint to.

4. Create a BufferGeometry class that represents the final object.

5. Merge the original object's geometry with the finger-joint geometry using BufferGeometryUtils.mergeBufferGeometries().

6. Apply the merged geometry to the THREE.Mesh object.

7. Add appropriate materials, textures, and lighting as needed.

Example code for creating finger-joints on a cube using THREE.JS and React-Three-Fiber may look like:

import React, { useRef } from "react"
import { useFrame } from "react-three-fiber"
import { BufferGeometryUtils } from "three/examples/jsm/utils/BufferGeometryUtils"
import * as THREE from "three"

const Cube = () => {
  const cubeRef = useRef()

  // Creating the finger-joint geometry using BoxBufferGeometry.
  const boxGeometry = new THREE.BoxBufferGeometry(0.05, 0.1, 0.05)
  boxGeometry.translate(-0.025, -0.05, 0)

  // Creating the main geometry for the cube.
  const geometry = new THREE.BoxBufferGeometry()

  // Merging the main geometry with the finger-joint geometry.
  const mergedGeometry = BufferGeometryUtils.mergeBufferGeometries(
    [ geometry, boxGeometry ]
  )

  return (
    <mesh geometry={mergedGeometry} ref={cubeRef}>
      <meshStandardMaterial color="hotpink" />
    </mesh>
  )
}

export default Cube

In the example above, we create the finger-joint geometry using the BoxBufferGeometry method by passing in the desired dimensions of the box, translating its position to line up with the edge of the cube, and merging the two geometries using the BufferGeometryUtils.mergeBufferGeometries() method.

We then render the merged geometry as a mesh component, which we wrap in materials such as the standard meshStandardMaterial and add optional lighting.