Skip to content

SphereMeshDesc

The SphereMeshDesc class is a mesh descriptor for drawing sphere geometry. You can create a sphere by specifying radius, segment counts, and other parameters.

In addition to the properties below, all common properties from the base class (position, rotation, scale, matrix, matrixWorld, pickable, visible) are available. See MeshDesc for details.

Type: number

Description: Specifies the radius of the sphere.

Default: 1

Example:

{
sphere: {
radius: 100,
}
}

Type: number

Description: Specifies the number of horizontal segments.

Default: 32

Example:

{
sphere: {
widthSegments: 64,
}
}

Type: number

Description: Specifies the number of vertical segments.

Default: 16

Example:

{
sphere: {
heightSegments: 32,
}
}

Type: number

Description: Specifies the horizontal starting angle in radians.

Default: 0

Example:

{
sphere: {
phiStart: Math.PI / 4,
}
}

Type: number

Description: Specifies the horizontal central angle in radians.

Default: Math.PI * 2

Example:

{
sphere: {
phiLength: Math.PI,
}
}

Type: number

Description: Specifies the vertical starting angle in radians.

Default: 0

Example:

{
sphere: {
thetaStart: Math.PI / 6,
}
}

Type: number

Description: Specifies the vertical central angle in radians.

Default: Math.PI

Example:

{
sphere: {
thetaLength: Math.PI / 2,
}
}

Type: Color

Description: Specifies the color of the sphere using a Color instance. The Color class supports hexadecimal color codes and CSS-style color specifications.

Default: new Color().setStyle("#ffffff")

Example:

import { Color } from "@navaramap/three";
{
sphere: {
color: new Color().setHex(0xff0000),
}
}

Type: boolean

Description: Specifies whether the sphere casts shadows.

Default: false

Example:

{
sphere: {
castShadow: true,
}
}

Type: boolean

Description: Specifies whether the sphere receives shadows.

Default: false

Example:

{
sphere: {
receiveShadow: true,
}
}

Type: Color

Description: Specifies the emissive color of the sphere using a Color instance.

Default: new Color().setHex(0x000000)

Example:

import { Color } from "@navaramap/three";
{
sphere: {
emissiveColor: new Color().setHex(0xff0000),
}
}

Type: number

Description: Specifies the emissive intensity.

Default: 0

Example:

{
sphere: {
emissiveIntensity: 1.0,
}
}

Type: number

Description: Specifies the opacity of the sphere in the range of 0.0 to 1.0. transparent must be set to true.

Default: 1

Example:

{
sphere: {
opacity: 0.5,
transparent: true,
}
}

Type: boolean

Description: Specifies whether to make the sphere semi-transparent.

Default: false

Example:

{
sphere: {
transparent: true,
opacity: 0.5,
}
}

Type: string[] (optional)

Description: Specifies an array of selective effect descriptor IDs to apply to this mesh.

Example:

{
sphere: {
effectIds: ["bloom-effect", "outline-effect"],
}
}
import ThreeView, { Color } from "@navaramap/three";
import { SphereMeshDesc } from "@navaramap/three_default_descs";
const view = new ThreeView();
view.registerMesh("sphere", SphereMeshDesc);
await view.init();
// Add a SphereMeshDesc
const sphereDesc = view.addMesh<SphereMeshDesc>({
sphere: {
radius: 100,
widthSegments: 32,
heightSegments: 16,
color: new Color().setHex(0xff0000),
castShadow: true,
},
position: { x: 0, y: 0, z: 1000 },
});