Market

The lightControls object defines the schema for controlling lighting parameters. It supports fine-grained adjustments for intensity, presets, and environmental lighting.

Available Properties

• intensity: A numeric slider control.
  • value: The current intensity.
  • min: Minimum value (0).
  • max: Maximum value (2).
  • step: Increment size (0.1).
  • label: Display name ('light intensity').
• preset: A selection control for lighting styles.
  • value: The current preset (defaults to 'rembrandt').
  • options: ['rembrandt', 'portrait', 'upfront', 'soft']
• environment: A selection control for the environment map.
  • value: The current environment (defaults to 'city').
  • options: ['', 'sunset', 'dawn', 'night', 'warehouse', 'forest', 'apartment', 'studio', 'city', 'park', 'lobby']

export const lightControls = {
  intensity: {
    value: 0.1,
    min: 0,
    max: 2,
    step: 0.1,
    label: 'light intensity',
  },
  preset: {
    value: 'rembrandt',
    options: ['rembrandt', 'portrait', 'upfront', 'soft'],
  },
  environment: {
    value: 'city',
    options: [
      '',
      'sunset',
      'dawn',
      'night',
      'warehouse',
      'forest',
      'apartment',
      'studio',
      'city',
      'park',
      'lobby',
    ],
  },
}

The Preloader class provides a centralized way to load various Three.js assets (like textures or GLTF models) using a manifest-based approach. To use it, you must first initialize it with one or more resolvers. Each resolver must be an object containing a type string, a resolve(item) method that returns a Promise, and a get(item, ...args) method to retrieve the loaded asset.

Once initialized, you can call .load(manifest) with an array of asset objects. Each object in the manifest should have a type, id, and url. The load method returns a Promise that resolves when all assets are loaded. You can later retrieve specific assets using .get(id).

import { preloader } from './loader/index.js';

// 1. Initialize with resolvers
preloader.init(new TextureResolver(renderer), new GLTFResolver());

// 2. Define a manifest
const manifest = [
  { id: 'my-texture', type: 'texture', url: 'textures/diffuse.jpg', version: '1.0' },
  { id: 'my-model', type: 'gltf', url: 'models/scene.gltf', version: '1.0' }
];

// 3. Load assets
await preloader.load(manifest);

// 4. Retrieve assets by ID
const texture = preloader.get('my-texture');
const model = preloader.get('my-model');

The API endpoint /[type]/[name] allows you to retrieve specific assets, categories, creators, or teams from the market. The endpoint uses Supabase as the backend and returns cleaned data. All responses include a Cache-Control header set to s-maxage=86400, stale-while-revalidate for efficient caching.

Endpoint Patterns

1. Categories:

   • URL: /[assetType]/categories (where assetType is typically models or similar).
   • Behavior: Returns a grouped list of categories. Each category object contains the category name and an array of assets belonging to that category.
   • Example URL: /models/categories

2. Creators and Teams:

   • URL: /[type]/[name] (where type is creators or teams and name is the url slug).
   • Behavior: Returns the specific creator or team object, including a page boolean indicating if the URL was valid.
   • Example URL: /creators/my-awesome-creator

3. Individual Assets:

   • URL: /[assetType]/[name] (where name is the asset's unique identifier).
   • Behavior: Returns the asset details. If the asset has an approved predecessor or successor (based on ID sequence), they are included in the response under the keys prev and next respectively.
   • Example URL: /models/my-3d-model-id

The createCode utility generates a complete boilerplate for a Three.js scene configured to use an HDRI (High Dynamic Range Image) for environment lighting and background. It produces an array containing common Three.js setup code and a specific src/index.js file.

Key features of the generated code:

• Uses RGBELoader to load an equirectangular HDRI file.
• Uses PMREMGenerator to convert the HDRI into a Pre-filtered Mipmapped Radiance Environment Map (PMREM) for realistic lighting.
• Sets scene.background and scene.environment to the processed environment map.
• Configures renderer.toneMapping to THREE.ACESFilmicToneMapping for high-quality color rendering.
• Includes a sample reflective sphere to demonstrate the lighting effect.

import { createCode } from './path/to/this/module';

const hdriConfig = { file: 'path/to/your/environment.hdr' };
const generatedFiles = createCode(hdriConfig);

// generatedFiles contains an array of objects with { filename, code }
console.log(generatedFiles);

The Nav component is a layout element used to render the application's main navigation bar. It includes a logo, dropdown menus (via PopOverMenu), primary navigation links, a dark mode toggle, and a user menu. It automatically handles responsive behavior, switching between a desktop horizontal menu and a mobile disclosure-based menu.

Key features:

• Responsive Design: Uses @headlessui/react's Disclosure to manage mobile menu visibility.
• Dark Mode: Integrates with nightwind and a global useStore to toggle between light and dark themes.
• Dynamic Navigation: Retrieves menu structures (dropdownMenus, navigation, and mobileNav) from the useNav hook.
• User Context: Displays user-specific information via the UserMenu component.

import Nav from '@/components/layout/nav'

// Usage within a layout component
const Layout = ({ children }) => (
  <>
    <Nav />
    <main>{children}</main>
  </>
)