react-three-fiber react-three-fiber react-three-fiber

Text

Displaying text with Drei’s Text component wrapper around Troika text. Fork on Codesandbox

Live example


Coming Soon

Code

import React from "react";
import ReactDOM from "react-dom";
import { Canvas } from "react-three-fiber";
import { OrbitControls, Stats, Text } from "@react-three/drei";
import "./styles.css";

const App = () => {
  return (
    <Canvas style=>
      <pointLight position={[5, 5, 5]} />
      <Text
        scale={[10, 10, 10]}
        color="black" // default
        anchorX="center" // default
        anchorY="middle" // default
      >
        HELLO WORLD
      </Text>
      <OrbitControls />
      <Stats />
    </Canvas>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

Running this example

Clone this repo, and then NPM install and NPM start from the relevant directory.

$ cd examples/other/text
$ npm install && npm run start