Skip to content
On this page


ParametricGeometry represents a parametric surface using a function that takes in a u and v value each between 0 and 1.

Any modifications to the 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="[10, 10, 10]" :up="[0, 0, 1]">
        <OrbitControls />
      <Scene background="#f9f9f9">
          <MeshNormalMaterial :side="DoubleSide" />
          <ParametricGeometry name="geo" :function="func" :slices="16" :stacks="16" />

<script setup lang="ts">
import { DoubleSide, Vector3 } from "three";

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

// Parametric equation may be implemented in a following way
const func = (u: number, v: number, target: Vector3) => {
  u = u - 0.5;
  v = v - 0.5;
  const x = u * u + v * v;
  const y = u;
  const z = v;
  target.set(10 * x, 10 * y, 10 * z);


Prop nameDescriptionTypeDefault
name Name of the geometry.string""
function A function that takes in a u and v value each between 0 and 1 and modifies a third Vector3 argument.
Default is a function that generates a klein bottle
slices The count of slices to use for the parametric function.number8
stacks The count of stacks to use for the parametric function.number8



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

Example code

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

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

Released under the MIT License.