Interface OBJ_Surface

Surface shape options object that extends OBJ_Generic3All and OBJ_FigurePrimitive.

A surface is defined with a 2D matrix of points. Triangles that fill the surface are created between neighboring points in the matrix.

If a surface is defined with 9 points (an array or arrays in JavaScript):

Then triangles will be created between adb, deb, bec, efc, dge, ghe, ehf, and hif.

The normal for triangle 'adb' is in the direction of the cross product of vector 'ad' with vector 'ab' (use the right hand rule where the fingers of the right hand curl from vector 'ad' to 'ab', and the thumb will then be the direction of the normal). Similarly, the normal of hif will be the direction of the cross product of hi with hf.

Use the property invertNormals to make all the normals go in the reverse direction.

A surface can be open or closed at the end rows or columns of the matrix. For example, a surface has closed columns if the first and last column of the matrix have identical points. A surface is has open rows if the first and last row of the matrix have different points.

If using curved normals ('curve', 'curveRows' or 'curveColumns') with closed surfaces, use closeRows or closeColumns to ensure normal curvature is maintained at the end rows and columns.

See

To test examples, append them to the boilerplate

Example

const points = Fig.surfaceGrid({
  x: [-0.8, 0.7, 0.03],
  y: [-0.8, 0.7, 0.03],
  z: x => 0.2 * Math.cos(x * 2 * Math.PI),
});
figure.scene.setCamera({ up: [0, 0, 1] });
figure.add({
  make: 'surface',
  points,
  color: [1, 0, 0, 1],
});

Example

// Surface wire mesh
const points = Fig.surfaceGrid({
  x: [-0.8, 0.8, 0.03],
  y: [-0.8, 0.8, 0.03],
  z: (x, y) => y * 0.2 * Math.cos(x * 2 * Math.PI),
});
figure.scene.setCamera({ position: [-1, -1, 0.7], up: [0, 0, 1] });
figure.add({
  make: 'surface',
  points,
  lines: true,
  color: [1, 0, 0, 1],
});

Example

// Surface with wire mesh and fill
const points = Fig.surfaceGrid({
  x: [-0.8, 0.8, 0.03],
  y: [-0.8, 0.8, 0.03],
  z: (x, y) => {
    const r = Math.sqrt(x * x + y * y) * Math.PI * 2 * 2;
    return Math.sin(r) / r;
  },
});
// Orient the camera so z is up
figure.scene.setCamera({ up: [0, 0, 1] });
figure.add({
  make: 'surface',
  points,
  color: [1, 0, 0, 1],
});
figure.add({
  make: 'surface',
  points,
  lines: true,
  color: [0, 0, 0, 1],
});

Example

// Simple Closed surface around the x axis
figure.add({
  make: 'surface',
  normals: 'curveColumns',
  closeRows: true,
  points: [
    [[0, 0, 0.5], [1, 0, 0.5]],
    [[0, -0.5, 0], [1, -0.5, 0]],
    [[0, 0, -0.5], [1, 0, -0.5]],
    [[0, 0.5, 0], [1, 0.5, 0]],
    [[0, 0, 0.5], [1, 0, 0.5]],
  ],
  color: [1, 0, 0, 1],
});

Example

// Simple Closed surface around the x axis with curved normals
figure.add({
  make: 'surface',
  normals: 'curveColumns',
  closeRows: true,
  points: [
    [[0, 0, 0.5], [1, 0, 0.5]],
    [[0, -0.5, 0], [1, -0.5, 0]],
    [[0, 0, -0.5], [1, 0, -0.5]],
    [[0, 0.5, 0], [1, 0.5, 0]],
    [[0, 0, 0.5], [1, 0, 0.5]],
  ],
  color: [1, 0, 0, 1],
});

Example

// Create a matrix of points by taking a profile in XY and rotating
// it around the x axis
const { Point, Transform } = Fig;
const points = [];

// Rotation step
const dr = Math.PI * 2 / 50;
for (let r = 0; r < Math.PI * 2 + dr / 2; r += dr) {
  // Rotation matrix of rotation step around x axis
  const m = new Transform().rotate(r, 1, 0, 0).matrix();

  // A row of points is a profile rotated by some amount r
  points.push([]);
  // Make a profile for x values from 0 to 1
  for (let x = 0; x < 1; x += 0.05) {
    // The y coordinate of the profile changes with both x value, and
    // rotation value
    const y = 0.1 * Math.sin(6 * x) + 0.25 + 0.1 * Math.cos(3 * r);
    const p = new Point(x, y).transformBy(m);
    points[points.length - 1].push(p);
  }
}
figure.add({
  make: 'surface',
  points,
  color: [1, 0, 0, 1],
});
@interface

Interface OBJ_Surface

See

Example

Example

Example

Example

Example

Example

Settings