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.