Global

Members

(constant) colors :Object.<Number, String>

Color table.

RGB primary colors and their complementary colors, CYM, used for printing.
Type:
  • Object.<Number, String>
Source:

(constant) meshRef :React.MutableRefObjec

This reference will give us direct access to a Box mesh.
Type:
  • React.MutableRefObjec
Source:

(constant) ncolors :Number

Number of colors used for shading cubes.
Type:
  • Number
Source:

(constant) output :Element

Element identified by "#output".
Type:
  • Element
Source:

Methods

App() → {HTMLCanvasElement}

Returns a JSX element with a R3F canvas.

When you want to aggregate data from multiple children or to have two child components communicate with each other, move the state upwards so that it lives in the parent component. The parent can then pass the state back down to the children via props, so that the child components are always in sync with each other and with the parent. All of this is possible because of closures.
Source:
Returns:
R3F Canvas.
Type
HTMLCanvasElement

Box(props) → {ThreeElements}

Box component.
Parameters:
Name Type Description
props Object information that you pass to a JSX tag.
Properties
Name Type Description
color.State React.MutableRefObject color state.
position Array.<Number> box position.
name String box name.
Source:
Returns:
view as regular three.js elements expressed in JSX.
Type
ThreeElements

DisplayText(props) → {ThreeElements}

Display a text.
Parameters:
Name Type Description
props Object information that you pass to a JSX tag.
Properties
Name Type Description
position Array.<Number> text position.
txt String text.
color String text color.
Source:
Returns:
view as regular three.js elements expressed in JSX.
Type
ThreeElements

DisplayText3D(props) → {ThreeElements}

Display a 3D text.
Parameters:
Name Type Description
props Object information that you pass to a JSX tag.
Properties
Name Type Description
position Array.<Number> text position.
txt String text.
color String text color.
Source:
See:
Returns:
view as regular three.js elements expressed in JSX.
Type
ThreeElements

createText(txt, color) → {String}

Creates a text with the Box identifier and color used. 
   Box 1 (Text)
 color: 5 → yellow
Parameters:
Name Type Description
txt String text.
color Number text color index.
Source:
Returns:
composed text.
Type
String

nextColor(c) → {Number}

Returns the next color index (key) in the range [0, ncolors] from the color Object.
Parameters:
Name Type Description
c Number color index.
Source:
Returns:
next color index.
Type
Number

setOutput(txt, cor)

Sets the innerHTML and style.color properties of the Element output.
Parameters:
Name Type Description
txt String output setter id.
cor Number color index.
Source:

Events

click

Gets the picked (clicked) object (Box) and sets its color.

Fires after both the mousedown and mouseup events have fired in that order.

The innerHTML property of the Element output is also updated.
Parameters:
Name Type Description
event PointerEvent pointer ThreeEvent.
Source:
See:

pointout

Gets the unhovered object (Box) and sets its color.

Fired when a pointing device is moved out of the hit test boundaries of an element.

The innerHTML property of the Element output is also updated.
Parameters:
Name Type Description
event PointerEvent pointer ThreeEvent.
Source:
See:

pointover

Gets the hovered object (Box) and sets its color.

Fired when a pointing device is moved into an element's hit test boundaries.

The innerHTML property of the Element output is also updated.
Parameters:
Name Type Description
event PointerEvent pointer ThreeEvent.
Source:
See: