Skip to content
On this page


PlaneGeometry is a component for a rectangular plane with a given width and height. The plane is centred on the origin, with each edge parallel to the X and Y axes.

Any modifications to the width, height, widthSegments and heightSegments properties will update the underlying THREE.BufferGeometry.


Click me to view the example code
  <div style="width: 100vh; height: 100vh;">
    <Renderer :antialias="true">
      <PerspectiveCamera :position="[5, 5, 5]" :up="[0, 0, 1]">
        <OrbitControls />
      <Scene background="#f9f9f9">
        <Mesh :rotation="rot">
          <MeshNormalMaterial :side="DoubleSide" />
          <PlaneGeometry :width="8" :height="6" />

<script setup lang="ts">
import { ref } from "vue";
import { DoubleSide } from "three";

import { Renderer, Scene } from "@janvorisek/drie";
import { PerspectiveCamera, OrbitControls } from "@janvorisek/drie";
import { Mesh, PlaneGeometry, MeshNormalMaterial } from "@janvorisek/drie";

const rot = ref<[number, number, number]>([0, 0, 0]);

window.setInterval(() => {
  const angle = / 1000;
  rot.value = [Math.cos(angle), 0, 0];
}, 10);


Prop nameDescriptionTypeDefault
name Name of the geometrystring""
width Width along the X axis.number1
height Height along the Y axis.number1
widthSegments Number of segmented rectangular faces along the width of the sides.number1
heightSegmentsNumber of segmented rectangular faces along the height of the sidesnumber1



You can access the managed THREE.BufferGeometry instance using the exposed three property.

Example code

<PlaneGeometry ref="geometry" />
const geometry = ref(null);

onMounted(() => {
  // Do something with the THREE.BufferGeometry instance
  const threeGeometry = geometry.value.three;

Released under the MIT License.