SphereGeometry

SphereGeometry is a component for a sphere with a given radius.

Incomplete spheres can be created through the use of different values of phiStart, phiLength, thetaStart and thetaLength.

Any modifications to the properties will update the underlying THREE.BufferGeometry.

Example

Click me to view the example code

vue

<template>
  <div style="width: 100vh; height: 100vh;">
    <Renderer :antialias="true">
      <PerspectiveCamera :position="[5, 5, 5]" :up="[0, 0, 1]">
        <OrbitControls />
      </PerspectiveCamera>
      <Scene background="#f9f9f9">
        <Mesh>
          <MeshNormalMaterial />
          <SphereGeometry :radius="2" :width-segments="24" :height-segments="24" />
        </Mesh>
        <AmbientLight />
      </Scene>
    </Renderer>
  </div>
</template>

<script setup lang="ts">
import { Renderer, Scene } from "@janvorisek/drie";
import { PerspectiveCamera, OrbitControls } from "@janvorisek/drie";
import { Mesh, SphereGeometry, MeshNormalMaterial } from "@janvorisek/drie";
</script>

Props

Prop name	Description	Type	Default
`name`	Name of the geometry.	string	""
`radius`	Sphere radius.	number	1
`widthSegments`	Number of horizontal segments. Minimum value is `3`.	number	32
`heightSegments`	Number of vertical segments. Minimum value is `2`	number	16
`phiStart`	Specify horizontal starting angle.	number	0
`phiLength`	Specify horizontal sweep angle size.	number	2 * Math.PI
`thetaStart`	Specify vertical starting angle	number	0
`thetaLength`	Specify vertical sweep angle size	number	Math.PI

Expose

three

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

Example code

template

<SphereGeometry ref="geometry" />

const geometry = ref(null);

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

SphereGeometry #

Example #

Props #

Expose #

three #

Example code #