2. Syntax Rules

2.1 args

The following code is a JavaScript code that creates a box geometry using three.js.

const boxGeometry = new THREE.BoxGeometry( width, height, depth, widthSegments, heightSegments, depthSegments )

The following code is a short version of the three.js code using threefy.

<boxGeometry args={[ width, height, depth, widthSegments, heightSegments, depthSegments ]} />

As in the example above, all input arguments to the geometry creation function in three.js are expressed as the args property in threefy.

2.2 attach

The following code shows how to use attach. The word, attach is a built-in keyword that does not indicate a child relationship of a parent element, but indicates that it is a property of the parent element.

<mesh scale={5}>
    <boxGeometry args={[10,10,10]} attach='geometry' />
    <meshBasicMaterial color={color} attach='material' />
</mesh>

In the above code, we have that mesh.geometry = boxGeometry and mesh.material = meshBasicMaterial.

2.3 position, rotation, scale

The following code defines the position, scale, and rotation of the mesh in three.js.

const mesh = new THREE.Mesh(...)
mesh.position.set( px, py, pz )
mesh.scale.set( sx, sy, sz )
mesh.rotation.set( rx, ry, rz )

The above code can be rewritten as shown below.

<mesh position={[px,py,pz]} scale={[sx,sy,sz]} rotation={[rx,ry,rz]} />

In the above code, px, py, and pz represent the x, y, and z coordinates, respectively; sx, sy, and sz represent scaling factors in the x, y, and z directions, respectively; and rx, ry, and rz represent the rotation angles (in radians) in the x, y, and z directions, respectively.

2.4 dash(-)

The position.x in three.js is expressed as the position-x in threefy. Similarly, scale.y and rotation.z are expressed as scale-y and rotation-z, respectively.

mesh.position.x = 10
mesh.scale.y = 2
mesh.rotation.z = Math.PI/2

<mesh position-x={10} scale-y={2} rotation-z={Math.PI/2} />

2.5 color

Colors in three.js can be expressed in various ways as follows.

<material type={'basic'} color={'red'} />
<material type={'basic'} color={0xff0000} />
<material type={'basic'} color={[1,0,0]} />
<material type={'basic'} color={new THREE.Color(1,0,0)} />

2.6 texture url

The texture of three.js can be created using the texture loader function of three.js as follows, but it can also be created by simply entering the url.

<meshBasicMaterial map={new THREE.TextureLoader().load(url)} />
<meshBasicMaterial map={url} />

2.7 method as a property

The methods of any object can be treated as properties. Just like entering a value into a property of an object, you can enter a function as a value into a method. In the following example code, onBeforeCompile is a method of the MeshBasicMaterial class object and the method function is entered as a value.

<meshBasicMaterial onBeforeCompile={(shader) => { ... }} />

The same goes for the following example code. The rotateY is a method of the Object3D object, and Math.PI/4 is an input argument to the rotateY function. Similarly, the translateX is a method of the Object3D object, and the value 10 is an input argument to the translateX.

<mesh rotateY={Math.PI/4} translateX={10} />