5.3 Extensions
The threefy supports the following 3D elements for easy and fast 3D modeling work and increased convenience for difficult coding work.
<background />: Integrates various types of resources used for 3D backgrounds into a single interface to improve user coding convenience.
<threePointLighting />: Supports lighting strategies commonly used in movies, games, etc. to improve user convenience.
<shadowDirectionalLight />, <shadowSpotLight />, <shadowPointLight />: Simplifies complex settings of light sources that cast shadows to improve user coding convenience.
<controls />: Integrates various controls supported by three.js into a single interface to improve user coding convenience.
<primitive />: Converts 3D objects already coded in JavaScript into react elements, allowing existing codes to be used without changes. : Integrates various types of geometry into a single interface to improve user coding convenience.
<curve />: Integrates various types of curves into a single interface to improve user coding convenience.
<curvePath />: Easily creates curve paths composed of multiple curves to improve user convenience.
<material />: Integrates all material shaders supported by three.js into a single interface to improve user convenience.
<batchedMaterial />: Different material properties can be set for each geometry that composes , overcoming limitations regarding the use of the same material required by three.js' BatchedMesh (except for textures).
<customMaterial />: Easily modify specific parts of the material shader supported by three.js to improve user rendering quality.
5.3.1 Background & Lighting
Background
<background
url={url}
onLoad={onLoad} />
where url = each of the following is available: - one image URL (cf: PNG/JPG/HDR/etc. formats available), - six image URLs for cube texture, - THREE.Texture(), - color (eg: 0x000000, 'black', [0,0,0], THREE.Color(‘black’)), and onLoad = callback function called when load completes
(eg: const onLoad = (tex) => { console.log(tex) }) In additions, the following are also available: <background texture={texture} /> <background color={color} />
Three-Point Lighting
<threePointLighting
color={color}
intensity={intensity}
keyLightPos={keyLightPos}
fillLightPos={fillLightPos}
backLightPos={backLightPos},
hemisphereLightOn={hemisphereLightOn} /> where color = light color (default: 0xffffff), intensity = light intensity (default: 1), keyLightPos = key light position (default: [-2,-1, 3]), fillLightPos = fill light position (default: [2, 4, 4]), backLightPos = backlight position (default: [1, 4, -2]), hemisphereLightOn = whether THREE.HemisphereLight() is added or not (default: true)
5.3.2 Shadow Lights
Shadow Directional Light
<shadowDirectionalLight
position={position}
color={color}
intensity={intensity}
/> where position = light position (default: [0,100,0]) color = light color (default: 0xffffff) intensity = light intensity (default: 1)
Shadow Spot Light
<shadowSpotLight
position={position}
color={color}
intensity={intensity}
distance={distance}
angle={angle}
penumbra={penumbra}
decay={decay} /> where position = light position (default: [0,100,0]) color = light color (default: 0xffffff) intensity = light intensity (default: 200) distance = maximum range of the light (default: 0) angle = maximum angle of light dispersion (default: Math.PI/6) penumbra = the percent of the spotlight cone that is attenuated due to penumbra (default: 1) decay = the amount the light dims along the distance of the light (default: 1.2)
Shadow Point Light
<shadowPointLight
position={position}
color={color}
intensity={intensity}
distance={distance}
decay={decay} /> where position = light position (default: [0,100,0]) color = light color (default: 0xffffff) intensity = light intensity (default: 200) distance = maximum range of the light (default: 0) decay = the amount the light dims along the distance of the light (default: 1.2)
Shadow Plane Receiver
<shadowPlaneReceiver
width={width}
depth={depth}
color={color}
opacity={opacity} /> where width = x-size of shadow plane (default: 100) depth = z-size of shadow plane (default: width) color = shadow color (default: 0x000000) opacity = shadow opacity (default: 0.5)
5.3.3 Controls & Primitive
Controls
<controls type={type} /> where
type = 'arcball', 'drag', 'firstPerson', 'fly', 'map', 'orbit', 'pointerLock', 'trackball', 'transform'
Primitive
<primitive
object={object}
onLoad={onLoad} /> where
object = new THREE.Object3D(), new THREE.Mesh(), etc.,
onLoad = function called when object loading is completed by object = useLoader( url )
5.3.4 Geometries
Geometry
<geometry type={type} /> where
type = 'buffer', 'instancedBuffer', 'box', 'capsule', 'circle', 'cone', 'cylinder', 'dodecahedron', 'extrude', 'icosahedron', 'lathe', 'octahedron', 'plane', 'polyhedron', 'ring', 'shape', 'sphere', 'tetrahedron', 'torus', 'torusKnot', 'tube', 'edges', 'wireframe', 'rounded', 'convex', 'decal', 'parametric', or 'text'
Curve
<curve
type={type}
linetype={linetype}
dim={dim} /> where
type = 'line', 'arc', 'ellipse', 'catmullRom3', 'spline', 'bezier', or 'nurbs'
linetype = 'solid' or 'dashed'
dim = 2 or 3 (default: 2)
CurvePath
<curvePath>
{ children }
</curvePath> where
it contains <curve/> elements as children, as in the following example:
<curvePath>
<curve type={'line'}>
<lineCurve/>
.....
</curvePath>Parametric Surface
<nurbsSurface
args={args}
slices={slices}
stacks={stacks} /> where
slices, stacks = parameters to be used in parametric functions (default: 8)
args = parameters defining a NURBS surface, which are: [ degree1, degree2, knot1, knot2, controlPoints ]
5.3.5 Materials
Material
<material type={type} /> where
type = 'line', 'dashed', 'basic', 'depth', 'distance', 'lambert', 'matcap', 'normal', 'phong', 'physical', 'standard', 'toon', 'points', 'rawShader', 'shader', 'shadow', 'sprite'
Batched Material
<batchedMaterial
args={[geomCount]}
{ ...parameters } /> where
geomCount = number of geometries used in <batchedMesh/>
parameters = object with properties defining the THREE.MeshPhysicalMaterial()
*NOTE:
it is used as a material property of <batchedMesh/>, and it allows you to set different colors, roughness, metalness, etc. for each geometry in the batchedMesh.
Custom Material
<customMaterial
type={type}
{ ...parameters } /> where
type = 'line', 'dashed', 'basic', 'depth', 'distance', 'lambert', 'matcap', 'normal', 'phong', 'physical', 'standard', 'toon', 'points', 'rawShader', 'shader', 'shadow', 'sprite'
parameters = { extensions, defines, uniforms, vdeclare, vvertex, vmain, fdeclare, fdiffuse, fmain, fcolor }
The following code shows the typical examples of the parameters described in CustomMaterial above.
// uniforms (injected to custom-material)
const uniforms = {
height: { value: 70 },
tHeight: { value: heightUrl },
tDiffuse: { value: diffuseUrl },
}
// vertex declaration (injected to custom-material)
const vdeclare = `
uniform float height;
uniform sampler2D tHeight;
uniform sampler2D tDiffuse;
varying vec2 vUv;
`;
// vertex transform (injected to custom-material)
const vvertex = `
float h = texture( tHeight, uv ).x;
position = position + normal * h * height;
vUv = uv;
`;
// fragment declaration (injected to custom-material)
const fdeclare = `
uniform sampler2D tHeight;
uniform sampler2D tDiffuse;
varying vec2 vUv;
`;
// fragment diffuse transform (injected to custom-material)
const fdiffuse = `
diffuse *= texture2D( tDiffuse, vUv ).rgb;
`;
// fragment color transform (injected to custom-material)
const fcolor = `
gl_FragColor.rgb *= texture2D( tDiffuse, vUv ).rgb;
`;Last updated