Installation

Prerequisites

Hello Terrain requires three.js as a peer dependency. Make sure you have it installed in your project.

Packages

Hello Terrain provides two packages depending on your setup:

Package	Description
`@hello-terrain/three`	Core terrain system for vanilla three.js projects
`@hello-terrain/react`	React bindings for react-three/fiber projects

Installing for Three.js

If you're using vanilla three.js, install the core package:

# npm
npm install @hello-terrain/three three

# pnpm
pnpm add @hello-terrain/three three

# yarn
yarn add @hello-terrain/three three

Basic Usage

import * as THREE from "three";
import { TerrainGeometry } from "@hello-terrain/three";

const geometry = new TerrainGeometry(16, true);
const material = new THREE.MeshStandardMaterial();
const mesh = new THREE.Mesh(geometry, material);

scene.add(mesh);

Installing for React Three Fiber

If you're using react-three/fiber, install the React package along with its peer dependencies:

# npm
npm install @hello-terrain/react @react-three/fiber three react react-dom

# pnpm
pnpm add @hello-terrain/react @react-three/fiber three react react-dom

# yarn
yarn add @hello-terrain/react @react-three/fiber three react react-dom

The @hello-terrain/react package includes @hello-terrain/three as a dependency, so you can use both packages in your React project.

Basic Usage

import { Terrain } from "@hello-terrain/react";
import { Canvas } from "@react-three/fiber";
import type { WebGPURendererParameters } from "three/src/renderers/webgpu/WebGPURenderer.js";
import { float } from "three/tsl";
import * as THREE from "three/webgpu";

const elevation = () => float(0);

function App() {
  return (
    <Canvas
      gl={async (props) => {
        const renderer = new THREE.WebGPURenderer(
          props as WebGPURendererParameters,
        );
        await renderer.init();
        return renderer;
      }}
    >
      <Terrain rootSize={128} maxLevel={10} elevation={elevation}>
        {({ positionNode }) => (
          <meshStandardNodeMaterial positionNode={positionNode} />
        )}
      </Terrain>
    </Canvas>
  );
}

@hello-terrain/react expects a WebGPU renderer and a node material that accepts the positionNode provided by the terrain render prop.

TypeScript Support

Both packages ship with TypeScript definitions out of the box. No additional @types packages are required.

Next Steps

Once installed, start with the React overview for the React bindings, or jump to the Terrain Geometry docs if you're using the lower-level Three.js API directly.

Installation

On this page