Text Field

The Text Field is a 3D component that can be used to capture text from users.

The

Text Field

wrapper component comes with two themes: light (default) and dark.

<TextField theme="light" />;
<TextField theme="dark"/>;

The

Theme

prop enables the ability to change the style of the Text Field to dark or light. By default this is set to light.

The

OnChange

prop takes a callback function.
This callback function is invoked each time a change is registered on the Text Field. By default an

event

object is provided as an argument to the callback function which provides access to various properties on regarding the Text Field. To access this event object properties, you can use

event.currentTarget

.

The

color

prop enables the ability to change the color of the display text within the Text Field when typed.

The default

width

is set to

15

and the default height is set to

3

. Unlike the

pixels(px)

on a screen, these number represents the size and dimensions of the rendered 3D component on the canvas.

The

Position

prop allows the ability to change the X, Y, and Z properties of the Text Field. This prop accepts an Array of 3 values,

[X, Y, Z]

. By default the position is set to

[0,0,0]

.

The default

backgroundColor

prop enables the ability to change the background color of the text field. This effect is currently only supported when a color code is provided for the

backgroundColor

prop (e.g.

backgroundColor=”#F4FAFF”

). This will be updated soon to support all color declarations (e.g.

backgroundColor=”red”

).

Alternative fonts can be provided to Text Field through the

font

prop. The default font is set to

Roboto

. Unlike your typical text field, this 3D Text Field requires access to the font

.ttf

file. To properly change the font, it is recommended that you upload the .

.ttf

font file into a

font

directory on your project’s root and pass the path to the

font

prop. (e.g.

font=”fonts/Inter-Bold.ttf”

).

The

fontSize

prop allows you to change the size of the 3D font on the Text Field. Similarly to the

height

and

width

props, the

fontSize

represents the size and dimensions of the rendered 3D text on the canvas. The default fontSize is set to

1

.

import { Canvas } from "@react-three/fiber";
import { TextField } from "r3dy";

export default function App() {
  return (
      <Canvas>
        <TextField />
      </Canvas>
  );
}