5. 3D react elements created from THREE classes

The 3D elements supported by threefy are:

• Contains all 3D-related classes handled by three.js. (Section 5.1: Core)

• It also includes elements that are not included as core in three.js but are recognized as useful classes in various applications. (Section 5.2: Addons)

• Lastly, there are elements added in threefy as a useful function when doing fast 3D modeling or to improve the convenience of writing codes. (Section 5.3: Extensions)

Most of the important classes in three.js have been converted to react elements by threefy. More classes not covered here will continue to be added in the future. The following describes the general rules applied when converting classes in three.js to react elements.

Rules	Description
1st Rule	The first letter of the class name in three.js is converted to lowercase. (exception: LOD classes are converted to LOD elements.)
2nd Rule	The input data of the class constructor is converted to 1) args={ arguments } if there is an order, and 2) { … parameters } if there is no order, where arguments is a JavaScript array and parameters is a JavaScript object.
3rd Rule	Properties or methods not defined in each class in three.js are ignored when converted to react elements.

The following examples show cases converted by the above rules. The first example corresponds to Geometry classes, and the second to Material classes.

• Example 1: Conversion example of Geometry classes

  Class / Element	Object
  Class instance in three.js	BoxGeometry( width, height, depth )
  React element in threefy.js	<boxGeometry args={ [ width, height, depth ] } />

• Example 2: Conversion example of Material classes

  Class / Element	Object
  Class instance in three.js	MeshBasicMaterial( parameters )
  React element in threefy.js	<meshBasicMaterial { ...parameters } />

NOTE: There are elements that start with a capital letter. This indicates that the element is not from a class in three.js, but is developed by threefy. <Model />, <InstancedModel />, <Mesh />, <MergedMesh />, etc. fall into this category.

All elements introduced in Chapter 5 are only shown by their names, and descriptions of the properties of the elements are skipped. Properties can be entered according to the second rule described above, and for detailed descriptions of the properties, please refer to the three.js homepage.