Face3D

Own

shader

Description

Shading of faces. For this, the HSL color scheme is used. Two types are possible: either by 'angle' or by 'zIndex'. By default (i.e. type:'angle'), the angle between the camera axis and the normal of the face determines the lightness value of the HSL color. Otherwise, the zIndex of the face determines the lightness value of the HSL color.

Note that shading needs a lot of computing resources, in particular for SVG rendering. Setting renderer:'canvas' will allow to rotate the viewport much faster.

Type

Object

Default Value

shader: {
  enabled: false,
  fixed: true,    // If false, update shading during rotation of viewport
  type: 'angle',  // 'angle', otherwise zIndex
  hue: 60,        // yellow
  saturation: 90,
  minLightness: 30,
  maxLightness: 90,

  light: {
      type: 1,// 1: lighting==camera,
              // 2: Fixed: angle(light, object),
              // 3: Fixed: angle(light, camera) (default)
      az: -45, // TODO use radians, ignored for type==1
      el: 20,  // TODO use radians, ignored for type==1
      bank: 0, // TODO use radians, ignored for type==1, type==3
      dir: -1  // -1 (reverse), 0 (use abs), 1. Default: -1
  }
}

See

• View3D#depthOrder

Example

var view = board.create(
      'view3d',
      [[-5, -3], [8, 8],
      [[-3, 3], [-3, 3], [-3, 3]]],
      {
          projection: 'central',
          trackball: { enabled: true },
          depthOrder: {
              enabled: true
          },
          xPlaneRear: { visible: false },
          yPlaneRear: { visible: false },
          zPlaneRear: { fillOpacity: 0.2, visible: true }
      }
  );

  let rho = 1.6180339887;
  let vertexList = [
      [0, -1, -rho], [0, +1, -rho], [0, -1, rho], [0, +1, rho],
      [1, rho, 0], [-1, rho, 0], [1, -rho, 0], [-1, -rho, 0],
      [-rho, 0, 1], [-rho, 0, -1], [rho, 0, 1], [rho, 0, -1]
  ];
  let faceArray = [
      [4, 1, 11],
      [11, 1, 0],
      [6, 11, 0],
      [0, 1, 9],
      [11, 10, 4],
      [9, 1, 5],
      [8, 9, 5],
      [5, 3, 8],
      [6, 10, 11],
      [2, 3, 10],
      [2, 10, 6],
      [8, 3, 2],
      [3, 4, 10],
      [7, 8, 2],
      [9, 8, 7],
      [0, 9, 7],
      [4, 3, 5],
      [5, 1, 4],
      [0, 7, 6],
      [7, 2, 6]
  ];
  var ico = view.create('polyhedron3d', [vertexList, faceArray], {
      fillColorArray: [],
      fillOpacity: 1,
      strokeWidth: 0.1,
      layer: 12,
      shader: {
          enabled: true,
          type: 'angle',
          hue: 0,
          saturation: 90,
          minlightness: 60,
          maxLightness: 80
      }
  });

Source

options3d.js, line 651

Inherited

Own

d : Number

Description

Hesse right hand side of the plane that contains the face.

Type

Number

Source

3d/face3d.js, line 78

faceNumber : Number

Description

Index of the face in the list of faces of the polyhedron

Type

Number

Source

3d/face3d.js, line 64

normal : array

Description

Normal vector for the face. Array of length 4.

Type

array

Source

3d/face3d.js, line 71

polyhedron : Object

Description

Link to the defining data of the parent polyhedron3d.

Type

Object

See

• Polyhedron3D#def

Source

3d/face3d.js, line 56

vec1 : Array

Description

First basis vector of the face. Vector of length 4.

Type

Array

Source

3d/face3d.js, line 85

vec2 : Array

Description

Second basis vector of the face. Vector of length 4.

Type

Array

Source

3d/face3d.js, line 92

Inherited

Own

Inherited

Own

Inherited