First Layout

Build your first layout with uikit.

The first step for building a layout is to install the dependencies.

npm i three @react-three/fiber @react-three/uikit @react-three/drei

Tip

The @react-three/drei dependency is not necessary but allows us to add OrbitControls.

Next, we create the index.jsx file and import the necessary dependencies.

import { Canvas } from '@react-three/fiber'
import { OrbitControls } from '@react-three/drei'
import { Container } from '@react-three/uikit'

Now, we can start defining the actual layout. In this example, the Container is of size 8 by 4 (three.js units). The Container has a horizontal (row) flex-direction, with 2 Container children, filling its width equally with a margin around them.

More in-depth information on the Flexbox properties can be found here.

export default function App() {
  return (
    <Canvas style={{ position: "absolute", inset: "0", touchAction: "none" }} gl={{ localClippingEnabled: true }}>
      <OrbitControls />
      <Container backgroundColor="red" sizeX={8} sizeY={4} flexDirection="row">
        <Container flexGrow={1} margin={32} backgroundColor="green" />
        <Container flexGrow={1} margin={32} backgroundColor="blue" />
      </Container>
    </Canvas>
  )
}

The final result will look like this:

import { Canvas } from "@react-three/fiber";
import { OrbitControls } from "@react-three/drei";
import { Container } from "@react-three/uikit";

export default function App() {
return (
  <Canvas style={{ position: "absolute", inset: "0", touchAction: "none" }} gl={{ localClippingEnabled: true }}>
    <OrbitControls />
    <Container backgroundColor="red" sizeX={8} sizeY={4} flexDirection="row">
      <Container flexGrow={1} margin={32} backgroundColor="green" />
      <Container flexGrow={1} margin={32} backgroundColor="blue" />
    </Container>
  </Canvas>
)
}

Open Sandbox

Edit this page