Kubefont

A simple React component (written in Typescript) using Three.js to show a text and a number of random-positioned cubes. It exploits the normal hover event to move the camera while on desktop, and the gyroscope on mobile devices.

This is an experiment I made to test the integration between React and Three.js. It is not remotely tested enough or fit for a production environment.

Live example here!

Usage

Install the component using your favourite package manager:

# npm
npm install kubefont

# yarn
yarn add kubefont

Then use it as simple as:

import React from 'react';
import Kubefont from 'kubefont';

const App = () => (
  <div style={{ width: '100vw', height: '100vh' }}>
    <Kubefont text="Hello World" textFontUrl="/font.json" />
  </div>
);

The textFontUrl prop takes the path to your JSON font. This font must be served as a static file from your app. To create a JSON font you can use Facetype.js.

This component takes the same size of its parent container.

API

These are the props accepted by the Kubefont component:

| Prop name | Type | Description | Required | Default | | ----------------------------- | -------- | ----------------------------------------------------------------------- | -------- | ----------- | | text | String | The string to display | Yes | - | | textFontUrl | String | The path to the JSON font file (served statically from the webserver) | Yes | - | | textColor | String | The text color in HEX | No | "#dddddd" | | cameraDistance | Number | The text distance from the camera | No | 400 | | cubesColor | String | The cubes color in HEX | No | "#dddddd" | | particlesNumber | Number | The number of cubes to display | No | 50 | | scattering | Number | The cubes' scattering level | No | 1.5 | | backgroundColor | String | The environment background color in HEX | No | "#000000" | | useGyroscope | Boolean | Whether to use the gyroscope or the hover event | No | false | | GyroscopeRequestComponent | Function | Takes a function as a parameter and return a new React node (see below) | No | - |

Gyroscope

To use the gyroscope you HAVE to set this prop!

This component supports the DeviceOrientationEvent (W3C Documentation). In iOS13 you have to ask for permission to use the gyroscope and this permission must be granted "manually" (E.g. from a onClick event) from the user. To handle this particular case this component supports the GyroscopeRequestComponent prop, which takes a function as the only parameter and return a new React node. This new React node will be added over the Three.js canvas (you can even position it absolute) and triggering the passed function from there will try to obtain the permission.

import React from 'react';
import Kubefont from 'kubefont';

const App = () => (
  <div style={{ width: '100vw', height: '100vh' }}>
    <Kubefont
      text="Hello World"
      textFontUrl="/font.json"
      useGyroscope={true}
      GyroscopeRequestComponent={request => (
        <a onClick={request} style={{ color: '#ffffff' }}>
          Enable Gyroscope
        </a>
      )}
    />
  </div>
);