SkyBoxMeshDesc

SkyBoxMeshDesc is a Descriptor that adds a simple skybox to the scene. It allows setting day and night sky colors as well as the sun color, providing a lightweight sky representation without using atmospheric scattering simulation (SkyMeshDesc).

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

Properties

skyBox

Type: object | undefined

Description: Configuration options for the skybox.

dayColor

Type: Color | undefined

Description: Specifies the daytime sky color.

Default: new Color().setHex(0x92c1ff) (light blue)

Example:

import { Color } from "@navaramap/three";

{
  skyBox: {
    dayColor: new Color().setHex(0x87ceeb), // Sky blue
  }
}

nightColor

Type: Color | undefined

Description: Specifies the nighttime sky color.

Default: new Color().setHex(0x000033) (dark blue)

Example:

import { Color } from "@navaramap/three";

{
  skyBox: {
    nightColor: new Color().setHex(0x000022), // Darker blue
  }
}

sunColor

Type: Color | undefined

Description: Specifies the color around the sun.

Default: new Color().setHex(0xffddae) (light orange)

Example:

import { Color } from "@navaramap/three";

{
  skyBox: {
    sunColor: new Color().setHex(0xffd700), // Gold
  }
}

Usage Examples

Basic Usage

import ThreeView, { Color } from "@navaramap/three";
import { SkyBoxMeshDesc } from "@navaramap/three_default_descs";

const view = new ThreeView();
view.registerMesh("skyBox", SkyBoxMeshDesc);
await view.init();

// Add a skybox with default settings
const skyBox = view.addMesh<SkyBoxMeshDesc>({
  skyBox: {},
});

Custom Color Settings

import ThreeView, { Color } from "@navaramap/three";
import { SkyBoxMeshDesc } from "@navaramap/three_default_descs";

const view = new ThreeView();
view.registerMesh("skyBox", SkyBoxMeshDesc);
await view.init();

// Add a skybox with custom colors
const skyBox = view.addMesh<SkyBoxMeshDesc>({
  skyBox: {
    dayColor: new Color().setHex(0x87ceeb),    // Sky blue
    nightColor: new Color().setHex(0x0a0a2e),   // Dark blue
    sunColor: new Color().setHex(0xffa500),     // Orange
  },
});

Dynamic Color Update

// Change colors based on time of day
skyBox.update({
  skyBox: {
    dayColor: new Color().setHex(0xff6b6b),
    sunColor: new Color().setHex(0xff4500),
  },
});

Differences from SkyMeshDesc

Feature	SkyBoxMeshDesc	SkyMeshDesc
Rendering method	Simple gradient	Physics-based atmospheric scattering
Performance	Lightweight	Slightly heavy
Realism	Basic	High
Sun/moon display	None	Yes
Atmosphere texture	Not required	Required

When to Use Each

• SkyBoxMeshDesc: Simple visualizations, performance-critical scenes, stylized representations
• SkyMeshDesc: Realistic atmospheric rendering, time-of-day variations, when sun/moon display is needed

Notes

• The skybox has frustum culling disabled and is always rendered.
• Colors are blended between day and night based on the atmosphere’s sunDirection.
• When used simultaneously with SkyMeshDesc, pay attention to rendering order.