1.4 Three ways to create a mesh

Three example codes below are code samples that generate a mesh defined by three.js using threefy. These sample codes generate the same mesh, only the expression is different.

// code #1
<mesh>
  <boxGeometry args={[w,h,d]}/>
  <meshBasicMaterial color={'skyblue'} map={'images/map.jpg'}/>
</mesh>

Within the mesh, <boxGeometry/> defines the geometry of the mesh, and <meshBasicMaterial/> defines the material of the mesh. The args of <boxGeometry/> is a property that receives input values ​​required for creation, and the color, map, etc. of <meshBasicMaterial/> are properties that receive input values ​​necessary for material definition. That is, w, h, and d in args are values ​​representing the width, height, and depth of the box, the skyblue represents the color of the material, and the images/map.jpg indicates the URL of the resource file to be used as the material's diffuse texture.

What should be noted here is the input data format required and the allowed formats supported by threefy.

Data format required by THREE	Data format allowed by threefy
THREE.Vector3( x, y, z )	[ x, y, z ]
THREE.Color( r, g, b )	hexadecimal color (eg: 0xffffff) or string color (eg: 'red')
THREE.Texture( image, … )	resource URL (eg: 'images/image.jpg')

The following table shows the geometry class and material class used in three.js, and the corresponding threefy elements. Additionally, a string indicating the type of each element is also shown.

THREE Geometry Classes	Elements made by threefy	Geometry type in threefy
THREE.BoxGeometry	<boxGeometry />	'box'
THREE.CapsuleGeometry	<capsuleGeometry />	'capsule'
THREE.CircleGeometry	<circleGeometry />	'circle'
THREE.ConeGeometry	<coneGeometry />	'cone'
THREE.CylinderGeometry	<cylinderGeometry />	'cylinder'
THREE.DodecahedronGeometry	<dodecahedronGeometry/>	'dodecahedron'
THREE.ExtrudeGeometry	<extrudeGeometry />	'extrude'
THREE.IcosahedronGeometry	<icosahedronGeometry />	'icosahedron'
THREE.LatheGeometry	<latheGeometry />	'lathe'
THREE.OctahedronGeometry	<octahedronGeometry />	'octahedron'
THREE.PlaneGeometry	<planeGeometry />	'plane'
THREE.PolyhedronGeometry	<polyhedronGeometry />	'polyhedron'
THREE.RingGeometry	<ringGeometry />	'ring'
THREE.ShapeGeometry	<shapeGeometry />	'shape'
THREE.SphereGeometry	<sphereGeometry />	'sphere'
THREE.TetrahedronGeometry	<tetrahedronGeometry />	'tetrahedron'
THREE.TorusGeometry	<torusGeometry />	'torus'
THREE.TorusKnotGeometry	<torusKnotGeometry />	'torusKnot'
THREE.TubeGeometry	<tubeGeometry />	'tube'
THREE.EdgesGeometry	<edgesGeometry />	'edges'
THREE.WireframeGeometry	<wireframeGeometry />	'wireframe'
RoundedGeometry	<roundedGeometry />	'rounded'
ConvexGeometry	<convexGeometry />	'convex'
DecalGeometry	<decalGeometry />	'decal'
ParametricGeometry	<parametricGeometry />	'parametric'
TextGeometry	<textGeometry />	'text'

THREE Material Classes	Elements made by threefy	Material type in threefy
THREE.LineBasicMaterial	<lineBasicMaterial />	'line'
THREE.LineDashedMaterial	<lineDashedMaterial />	'dashed'
THREE.MeshBasicMaterial	<meshBasicMaterial />	'basic'
THREE.MeshDepthMaterial	<meshDepthMaterial />	'depth'
THREE.MeshDistanceMaterial	<meshDistanceMaterial />	'distance'
THREE.MeshLambertMaterial	<meshLambertMaterial />	'lambert'
THREE.MeshMatcapMaterial	<meshMatcapMaterial />	'matcap'
THREE.MeshNormalMaterial	<meshNormalMaterial />	'normal'
THREE.MeshPhongMaterial	<meshPhongMaterial />	'phong'
THREE.MeshPhysicalMaterial	<meshPhysicalMaterial />	'physical'
THREE.MeshStandardMaterial	<meshStandardMaterial />	'standard'
THREE.MeshToonMaterial	<meshToonMaterial />	'toon'
THREE.PointsMaterial	<pointsMaterial />	'points'
THREE.RawShaderMaterial	<rawShaderMaterial />	'rawShader'
THREE.ShaderMaterial	<shaderMaterial />	'shader'
THREE.ShadowMaterial	<shadowMaterial />	'shadow'
THREE.SpriteMaterial	<spriteMaterial />	'sprite'

The second code below creates geometry and material elements using the type strings mentioned in the table above. In other words, <boxGeometry /> can be expressed as <geometry type={‘box’} />, and <meshBasicMaterial /> can be expressed as <material type={‘basic’} />.

// code #2
<mesh>
  <geometry type='box' args={[w,h,d]}/>
  <material type='basic' color={'skyblue'} map={'images/map.jpg'}/>
</mesh>

The third code below is a shorter version of the second code. An element named <box/> is used, and the type of material is used as the type name of the box. In the end, the first code, second code, and third code all have the same results, and users can choose according to their convenience.

// code #3
<box
    args={[w,h,d]}
    type={'basic'}
    color={'skyblue'}
    map={'images/map.jpg'}
/>

threefy prefers the use of the third code. This code seems easy for beginners to understand because there is no relationship between parents and children.