@coconut-xr/xmaterials

npm i @coconut-xr/xmaterials

A collection of materials for interactive immersive experiences.

Usage

with Three.js

const MeshFadeBasicMaterial = makeFadeMaterial(MeshBasicMaterial);
const mesh = new Mesh(
  new BoxGeometry(),
  new MeshFadeBasicMaterial({ transparent: true, color: "blue" }),
);
mesh.scale(0.1, 0.1, 1);

with R3F

const MeshFadeBasicMaterial = makeFadeMaterial(MeshBasicMaterial);
extend({ MeshFadeBasicMaterial });

<mesh scale={[0.1, 0.1, 1]}>
  <boxGeometry />
  <meshFadeBasicMaterial transparent color="blue" />
</mesh>;

Materials

• makeCursorMaterial - creates a radial opacity effect on a plane

• makeBorderMaterial - displays a border with various effects on a plane

  • borderRadius - radius of the corners (top-left, top-right, bottom-right, bottom-left) - default is (0, 0, 0, 0)
  • borderColor - color of the border - default is (0, 0, 0)
  • borderSize - size of the border on all edges (top, right, bottom, left) - default is (0, 0, 0, 0)
  • borderOpacity - opacity of the border (requires transparent=true) - default is 1
  • ratio - aspect ratio of the target plane - default is 1
  • borderBend - bends the normals of the border in the direction of the border - default is 0.5

• makeFadeMaterial - fades the opacity by mapping the z-position of the geometry from -0.5 to 0.5 on the z-axis

• makeHighlightMaterial - displays a highlight effect based on the distance of up to 2 world positions

  • position1 - Vector3 - position of the first highlighting element - default is (Infinity, Infinity, Infinity)
  • position2 - Vector3 - position of the second highlighting element - default is (Infinity, Infinity, Infinity)
  • highlightOpacity - number - opacity of the highlight - default is 1
  • highlightDistance - number - distance at which the highlight should start to appear - default is 1
  • highlightColor - Vector3 - color of the highlight - default is (1, 1, 1)