Installation

Run the Demo

After extracting the zip:

cd threejs-sky-pro
npm install
npm run dev

Add Sky Pro to a Project

Option 1 — ESM Module (Recommended)

The package includes a prebuilt ESM bundle and TypeScript declarations in build/.

Copy the build/ folder into your project:

your-project/
├── lib/
│   └── threejs-sky-pro/   ← contents of build/
└── ...

Then import:

import { SkySystem } from "/lib/threejs-sky-pro/index.js";

Option 2 — Source

Copy src/ into your project if you need to debug or customize the library source:

your-project/
├── lib/
│   └── threejs-sky-pro/   ← contents of src/
└── ...

import { SkySystem } from "/lib/threejs-sky-pro/index.ts";

The source form requires a bundler such as Vite to compile TypeScript.

Option 3 — Vite Alias

If you're using Vite, alias the source directly:

// vite.config.ts
export default defineConfig({
  resolve: {
    alias: {
      "threejs-sky-pro": resolve(__dirname, "../threejs-sky-pro/src/index.ts"),
    },
  },
});

import { SkySystem } from "threejs-sky-pro";

Requirements

Three.js

npm install three@^0.185.0

WebGPU build required

Import Three.js from three/webgpu and use WebGPURenderer:

import * as THREE from "three/webgpu";

const renderer = new THREE.WebGPURenderer();
await renderer.init();

WebGPURenderer uses the WebGPU backend where available and falls back to WebGL2 elsewhere. Sky Pro runs on both backends.

Browser Support

WebGPU (used automatically where available):

• Chrome 113+
• Edge 113+
• Firefox 141+
• Safari 26+

Other browsers run on the WebGL2 fallback.

Next Steps

• Basic Example
• Tuning Performance
• Water Pro Integration