⚡ 1. Interface & Modules Overview

The editor layout is split into five main functional regions, providing a seamless and intuitive 3D modeling experience:

🧱 2. Grid Alignment & Baseboard placement

Every cat tree requires a stable foundation. You must place at least one baseboard on the ground before stackable components can be placed.

Multiple baseboard templates are available (rectangular, circular, L-shaped). Using the right inspector panel, you can adjust dimensions dynamically to fit specific apartment layouts.

⚙️ 3. Column Stacking & Surface Materials

Columns act as the skeletal pillars of the cat tree structure. Stacking is made simple through smart-snapping triggers:

• Connection Snapping: Hovering over existing columns or baseboards displays a blue snap indicator. Clicking links them together immediately.
• Height Selection: Choose from preset industrial lengths (20cm to 100cm) or fine-tune height slide meters in the Inspector.

❓ 4. Resting Platforms & Snapping Nests

Platforms and nesting structures are the functional activity areas where cats relax, observe, and sleep.

Plywood surfaces can be customized with soft warm cotton cushions to maximize comfort and friction when scaling platforms.

✨ 5. Dangling Play Accessories & Ladders

Toys and connectable accessories enrich the cat tree layout with play options and additional pathways:

• Dangling Plush Balls: Can be hung from any platform bottom ceiling. Springy elastic lines with soft balls trigger play impulses.
• Heavy Sisal Play Rope: Stout scratching ropes attached to columns let cats grasp and wrestle suspended in mid-air.
• Climbing Ramps & Ladders: Bridges wood steps or scratching inclined boards between platform tiers for kittens or senior cats.

⚠️ 6. Real-Time Physics & Safety Analysis

Deskat integrates complex dynamic mechanics checking to prevent real-world tilting and tipping hazards:

⌨️ 7. Shortcuts & Keyboard Snapping

To achieve pixel-perfect symmetrical designs, utilize standard keyboard shortcuts. A floating nudge helper appears at the bottom-right:

💾 8. Saving Schemes, Import & 3D GLB Export

Deskat acts as a gateway from design to real production, offering seamless file exchanges:

• IndexedDB Browser Storage: Save your work directly in the local browser cache. Access them via the load dashboard instantly.
• Export encrypted .deskat configurations: A lightweight string format (<20KB) containing coordinates and materials definitions, perfect for sharing and web embeds.
• Export industry-standard GLB 3D meshes: Compiles meshes, coordinates, and custom HSL textures into standard GLB formats, ready to load in Blender, 3ds Max, or AR tools.

⚡ 1. Introduction

The Deskat 3D Viewer is a lightweight rendering utility. It parses modular .deskat blueprints, builds three-dimensional meshes on-the-fly, calculates stability indices, and exports ready-to-use GLB files directly on clientside.

💻 2. Global Auto-Init (Quick Start)

The simplest integration. Declare an HTML element container with the ID deskat_display, configure your options in global window scope, and load the script. Auto-initialization triggers out of the box:

<!-- 1. Declare container element (声明 3D 视口挂载容器) -->
<div id="deskat_display"></div>

<!-- 2. Configure variables (配置小部件变量) -->
<script>
  var dk_location = 'classic-62.deskat';      // Path to .deskat file (.deskat 方案文件路径)
  var dk_width = '100%';                // Container width (容器宽度样式)
  var dk_height = '550px';              // Container height (容器高度样式)
  var dk_theme = 'light';               // Theme: 'light' | 'dark' (初始化配色: 'light' | 'dark')
  var dk_lang = 'zh';                   // Language: 'en' | 'zh' (默认语种: 'en' | 'zh')
  var dk_enable_open = true;            // Show local file picker (是否显示本地浏览/拖拽解析面板)
</script>

<!-- 3. Reference the viewer script (引入公共 CDN 脚本) -->
<script src="//deskat.globlazer.com/deskat-viewer.js"></script>

⚙️ 3. Programmatic JavaScript API

For Single Page Applications (React, Vue, Angular) or views managing multiple visualizer canvas instances simultaneously, instantiate programmatically via DeskatViewer.init():

<!-- 1. Define custom container (自定义 ID 视口容器) -->
<div id="custom-model-container"></div>

<!-- 2. Include viewer script (引入 CDN 文件) -->
<script src="//deskat.globlazer.com/deskat-viewer.js"></script>

<!-- 3. Programmatic initialization (JS 动态渲染) -->
<script>
  // Note: Avoid declaring window variables starting with dk_ to prevent auto-init interference (注意：不要在 window 下声明以 dk_ 开头的变量，避免干扰自动初始化)
  DeskatViewer.init({
    location: 'classic-62.deskat',                // Path to file (相对或绝对路径)
    containerId: 'custom-model-container',   // Target container DOM ID (目标挂载 DOM ID)
    width: '100%',
    height: '600px',
    theme: 'dark',
    lang: 'en',
    enableOpen: true,
    enableExportDeskat: true,
    enableExportGlb: true,
    enableDesignEdit: true
  }).then(function(visualizer) {
    if (visualizer) {
      console.log('Deskat 3D Viewer initialized successfully! (Deskat 3D Viewer 初始化成功！)');
    }
  });
</script>

🌐 4. Overcoming CORS limits & Offline Sandboxing

Due to browser security enforcement when performing XMLHttpRequests/fetch on files, two common blocks arise:

Access-Control-Allow-Origin: *

To bypass both CORS and file:/// restrictions (enabling immediate offline double-click operation), pass the obfuscated content of the .deskat file directly as a raw data string:

<!-- Works offline without cross-origin blocks (完全离线可运行，无视任何跨域拦截！) -->
<div id="deskat_display"></div>

<script>
  // Paste the encrypted string content of the .deskat file here (复制 .deskat 中的文本串贴在此处)
  var dk_data = "M3t9QH5cT013W3p6d...[直接贴入这长串混淆文本]";
  var dk_width = "100%";
  var dk_height = "600px";
</script>
<script src="//deskat.globlazer.com/deskat-viewer.js"></script>

⚙️ 5. Configuration Parameters

A complete list of setup attributes for both global settings (dk_) and programmatic initialization parameters:

💻 6. API Methods Reference

Once initialized successfully, call these instance methods programmatically from your hosting page controls:

🔄 7. Interactive Live Playground

Modify parameters in the control board below, and the embedded widget on the right will dynamically re-compile. Loads classic-62.deskat.