Global

Methods

App() → {HTMLCanvasElement}

Returns a JSX element with a R3F canvas.

In R3F, useRef() can be used to encapsulate a reference to an instance of an object, as its current value.
This reference can then be passed to a component as a prop.
Source:
See:
Returns:
R3F Canvas.
Type
HTMLCanvasElement

Engine(props) → {ThreeElements.group}

Selects the part of the object the mouse is on, when a DobleClick event is fired.

  • Selection is slow because each part is checked every frame by the raycaster.
  • The object selected is saved as a Engine state called "hovered" by using useState.
  • The corresponding check box in the GUI is also checked.
  • If "autoRotate" is checked in the GUI, a BoxHelper is drawn to delimit the Engine.
  • If "reset" is clicked in the GUI, the center of rotation (pivot point) is set to the center of the bounding box.
  • The Controls and Camera are accessed via the useThree hook.
Parameters:
Name Type Description
props Object information that you pass to a JSX tag.
Properties
Name Type Description
rotation Array.<Number> engine rotation.
Author:
License:
Source:
See:
Returns:
a group with ref and the engine in it.
Type
ThreeElements.group

Loading() → {HTMLElement}

Display a fallback until its children have finished loading.
Source:
Returns:
fall back message.
Type
HTMLElement

Mesh(props) → {ThreeElements.mesh}

Returns a mesh component given by its number in the props.

e.g., num = 30: 
  <mesh geometry={nodes.mesh_30.geometry} material={nodes.mesh_30.material} />
Parameters:
Name Type Description
props Object information that you pass to a JSX tag.
Properties
Name Type Description
num Number mesh number.
Source:
Returns:
JSX mesh.
Type
ThreeElements.mesh

Parts(props) → {React.JSX.Elements}

Select the set of meshes of a part, given as an array of numbers in the props.

Parts will be enabled if they have been hovered or checked in the GUI.

e.g., name = "shaft" and arr = {29, 30, 31, 32, 33}: 
 <Select name="shaft" enabled={hovered === "shaft" || config.shaft}>
     <mesh geometry={nodes.mesh_29.geometry} material={nodes.mesh_29.material} />
     <mesh geometry={nodes.mesh_30.geometry} material={nodes.mesh_30.material} />
     <mesh geometry={nodes.mesh_31.geometry} material={nodes.mesh_31.material} />
     <mesh geometry={nodes.mesh_32.geometry} material={nodes.mesh_32.material} />
     <mesh geometry={nodes.mesh_33.geometry} material={nodes.mesh_33.material} />
 </Select>
Parameters:
Name Type Description
props Object information that you pass to a JSX tag.
Properties
Name Type Description
name String part name.
config Boolean whether part has been checked in the GUI.
arr Array.<Number> array of mesh numbers.
Source:
Returns:
JSX with a selected set of meshes.
Type
React.JSX.Elements

ReflectiveSphere(props) → {ThreeElements}

Creates a reflective sphere.
Parameters:
Name Type Description
props Object information that you pass to a JSX tag.
Properties
Name Type Description
position Array.<Number> reflective sphere position.
Source:
Returns:
sphere with standard material.
Type
ThreeElements

Sphere(props) → {ThreeElements}

Creates a sphere.
Parameters:
Name Type Description
props Object information that you pass to a JSX tag.
Properties
Name Type Description
position Array.<Number> sphere position.
children Object e.g., material.
Source:
Returns:
mesh with a sphere geometry.
Type
ThreeElements

ThreeScene() → {ThreeElements}

Define the scene lighting and environment.
Source:
Returns:
light elements.
Type
ThreeElements

pton(part, stat)

Check/uncheck a given part in the GUI "from the outside".

The problem is that the setter from Leva's useControls does not accept a String, but only a property key Symbol.
Go figure...
Parameters:
Name Type Default Description
part String name.
stat Boolean true check if true, or uncheck if false.
Source: