camera position, target and background color moved to common settings

Author: matas-bitbybit-dev

docs/learn/3d-bits/tutorials/bitbybit-runner/settings.md

@@ -54,22 +54,22 @@ All editors are accessible through the **3D Bits admin dashboard** in your Shopi
 - [Enable Key Event Listeners](#enable-key-event-listeners)
 - [Fonts to Include](#fonts-to-include)
 
-### Visual Configuration
-- [Runner CDN Link](#runner-cdn-link)
-- [Camera Position](#camera-position)
-- [Camera Target](#camera-target)
-- [Background Color](#background-color)
-
-### Global Settings
-- [Show Spinner](#show-spinner)
-- [Receive Input Names As Variants](#receive-input-names-as-variants)
-- [Input Collection Mode](#input-collection-mode)
-- [Enable Debug Mode](#enable-debug-mode)
-- [Disable Inputs When Computing](#disable-inputs-when-computing)
-- [Try to Prepend](#try-to-prepend)
-- [Prepend With Query Selector](#prepend-with-query-selector)
-- [Remove Children Before Prepend](#remove-children-before-prepend)
-- [Show Fullscreen Button](#show-fullscreen-button)
+### Common Settings (Viewer & Runner)
+- [Camera Position](#camera-position) - [See full documentation](../getting-started/common-settings#camera-position)
+- [Camera Target](#camera-target) - [See full documentation](../getting-started/common-settings#camera-target)
+- [Background Color](#background-color) - [See full documentation](../getting-started/common-settings#background-color)
+- [Runner CDN Link](../getting-started/common-settings#runner-cdn-link)
+
+### Common Settings (All Blocks)
+- [Show Spinner](../getting-started/common-settings#show-spinner)
+- [Receive Input Names As Variants](../getting-started/common-settings#receive-input-names-as-variants)
+- [Input Collection Mode](../getting-started/common-settings#input-collection-mode)
+- [Enable Debug Mode](../getting-started/common-settings#enable-debug-mode)
+- [Disable Inputs When Computing](../getting-started/common-settings#disable-inputs-when-computing)
+- [Try to Prepend](../getting-started/common-settings#try-to-prepend)
+- [Prepend With Query Selector](../getting-started/common-settings#prepend-with-query-selector)
+- [Remove Children Before Prepend](../getting-started/common-settings#remove-children-before-prepend)
+- [Show Fullscreen Button](../getting-started/common-settings#show-fullscreen-button)
 
 ## Script Configuration Settings
 
@@ -572,96 +572,29 @@ This is a common setting shared across multiple blocks. See the [Common Settings
 
 ### Camera Position
 
-**Default:** `[30, 10, 30]`
-
-Camera Position defines where the 3D camera is located in the scene's coordinate system.
-
-#### Format
-
-Provide a vector3 array in the format `[x, y, z]`:
-- **x** - Left/Right position (negative = left, positive = right)
-- **y** - Up/Down position (negative = down, positive = up)
-- **z** - Forward/Backward position (negative = backward, positive = forward)
-
-#### Default for Runner
-
-The default `[30, 10, 30]` is further back than the VIEWER default `[3, 1, 3]` because parametric geometry often spans a larger area.
-
-#### Examples
-
-```json
-[30, 10, 30]   // Default: Far view for large generated geometry
-[10, 5, 10]    // Closer view for smaller objects
-[0, 20, 0]     // Top-down view directly above
-[-15, 10, 15]  // View from the left side
-```
-
-#### Dynamic Camera Control
+This is a common setting shared with the VIEWER block. See the [Common Settings: Camera Position](../getting-started/common-settings#camera-position) documentation for detailed information.
 
-Your parametric scripts can also control the camera programmatically through both **Low-Code** (Blockly/Rete) and **Pro-Code** (TypeScript in Monaco editor). This allows you to:
-- Adjust camera position based on generated geometry size
-- Create animated camera movements
-- Define custom camera behaviors per variant
+:::tip RUNNER-Specific Default
+For the RUNNER block, the default camera position is `[30, 10, 30]` - further back than the VIEWER default because parametric geometry often spans a larger area.
+:::
 
 ---
 
 ### Camera Target
 
-**Default:** `[0, 15, 0]`
-
-Camera Target defines the point in 3D space that the camera looks at.
-
-#### Format
-
-Provide a vector3 array in the format `[x, y, z]`:
-```json
-[0, 15, 0]     // Looking 15 units up from origin (default)
-[0, 0, 0]      // Looking at the origin
-[10, 5, 10]    // Looking at a custom point
-```
-
-#### Default for Runner
-
-The default `[0, 15, 0]` targets a point elevated from the origin, suitable for typical parametric objects that extend vertically.
-
-#### How It Works
-
-Combined with [Camera Position](#camera-position), this defines the viewing angle:
-- **Camera Position** = Where the camera is located
-- **Camera Target** = What the camera looks at
+This is a common setting shared with the VIEWER block. See the [Common Settings: Camera Target](../getting-started/common-settings#camera-target) documentation for detailed information.
 
-#### Dynamic Control
-
-Like camera position, your scripts can control the camera target programmatically to automatically frame generated geometry.
+:::tip RUNNER-Specific Default
+For the RUNNER block, the default camera target is `[0, 15, 0]` - targeting a point elevated from the origin, suitable for typical parametric objects that extend vertically.
+:::
 
 ---
 
 ### Background Color
 
-**Default:** `#ffffff` (white)
-
-Canvas background color for the 3D viewer.
-
-#### Format
-
-Provide a hex color code:
-```
-#ffffff  // White (default)
-#f0f0f0  // Light gray
-#2c3e50  // Dark blue-gray
-#000000  // Black
-```
-
-#### When to Change
+This is a common setting shared with the VIEWER block. See the [Common Settings: Background Color](../getting-started/common-settings#background-color) documentation for detailed information.
 
-Match your theme's color scheme:
-- **Light themes** - Use white or light gray backgrounds
-- **Dark themes** - Use dark gray or black backgrounds
-- **Brand colors** - Use subtle brand-aligned colors
-
-:::tip
-Neutral backgrounds (white, light gray) work best for showcasing parametric geometry, as they don't distract from the 3D content.
-:::
+---
 
 ## Global Settings
 

docs/learn/3d-bits/tutorials/bitbybit-viewer/settings.md

@@ -19,20 +19,22 @@ You'll find the BITBYBIT VIEWER settings in your theme editor after adding the b
 ### Product-Specific Settings
 - [Model URL](#model-url)
 - [Scene JSON Configuration](#scene-json-configuration)
-- [Camera Position](#camera-position)
-- [Camera Target](#camera-target)
-- [Background Color](#background-color)
 
-### Global Settings
-- [Runner CDN Link](#runner-cdn-link)
-- [Show Spinner](#show-spinner)
-- [Receive Input Names As Variants](#receive-input-names-as-variants)
-- [Input Collection Mode](#input-collection-mode)
-- [Enable Debug Mode](#enable-debug-mode)
-- [Try to Prepend](#try-to-prepend)
-- [Prepend With Query Selector](#prepend-with-query-selector)
-- [Remove Children Before Prepend](#remove-children-before-prepend)
-- [Show Fullscreen Button](#show-fullscreen-button)
+### Common Settings (Viewer & Runner)
+- [Camera Position](#camera-position) - [See full documentation](../getting-started/common-settings#camera-position)
+- [Camera Target](#camera-target) - [See full documentation](../getting-started/common-settings#camera-target)
+- [Background Color](#background-color) - [See full documentation](../getting-started/common-settings#background-color)
+- [Runner CDN Link](../getting-started/common-settings#runner-cdn-link)
+
+### Common Settings (All Blocks)
+- [Show Spinner](../getting-started/common-settings#show-spinner)
+- [Receive Input Names As Variants](../getting-started/common-settings#receive-input-names-as-variants)
+- [Input Collection Mode](../getting-started/common-settings#input-collection-mode)
+- [Enable Debug Mode](../getting-started/common-settings#enable-debug-mode)
+- [Try to Prepend](../getting-started/common-settings#try-to-prepend)
+- [Prepend With Query Selector](../getting-started/common-settings#prepend-with-query-selector)
+- [Remove Children Before Prepend](../getting-started/common-settings#remove-children-before-prepend)
+- [Show Fullscreen Button](../getting-started/common-settings#show-fullscreen-button)
 
 ## Dynamic vs. Global Settings
 
@@ -208,128 +210,27 @@ The system automatically detects if you're providing a URL (starting with `http:
 
 ## Camera Position
 
-**Default:** `[3, 1, 3]`
-
-Camera Position defines where the 3D camera is located in the scene's coordinate system. This determines the initial viewing angle of your model.
-
-:::warning Scene Configuration Override
-If you're using [Scene JSON Configuration](#scene-json-configuration), spinner settings defined in the scene config will take precedence over this setting. You can create and manage scene configurations using the [Viewer Editor](/learn/getting-started/viewer-editor/intro).
-:::
-
-### Format
-
-Provide a vector3 array in the format `[x, y, z]`:
-- **x** - Left/Right position (negative = left, positive = right)
-- **y** - Up/Down position (negative = down, positive = up)
-- **z** - Forward/Backward position (negative = backward, positive = forward)
-
-### Examples
+This is a common setting shared with the RUNNER block. See the [Common Settings: Camera Position](../getting-started/common-settings#camera-position) documentation for detailed information.
 
-```json
-[3, 1, 3]     // Default: Viewing from front-right, slightly elevated
-[0, 2, 5]     // Directly in front, higher up
-[-2, 1, -2]   // Behind and to the left
-[10, 0, 0]    // Far to the right, at ground level
-```
-
-### Finding the Right Position
-
-1. Start with the default values
-2. Adjust based on your model's size and orientation
-3. Combine with [Camera Target](#camera-target) to frame your model perfectly
-
-:::tip
-Larger values move the camera further from the origin (0, 0, 0). If your model appears too small or too large, adjust the distance by scaling all three values proportionally.
+:::tip VIEWER-Specific Default
+For the VIEWER block, the default camera position is `[3, 1, 3]` - a closer view suitable for pre-made 3D models.
 :::
 
 ---
 
 ## Camera Target
 
-**Default:** `[0, 0, 0]`
-
-Camera Target defines the point in 3D space that the camera looks at. This is sometimes called the "look at" point.
-
-:::warning Scene Configuration Override
-If you're using [Scene JSON Configuration](#scene-json-configuration), camera settings defined in the scene config will take precedence over this setting. You can create and manage scene configurations using the [Viewer Editor](/learn/getting-started/viewer-editor/intro).
-:::
-
-### Format
-
-Provide a vector3 array in the format `[x, y, z]`:
-```json
-[0, 0, 0]     // Looking at the origin (default)
-[0, 1, 0]     // Looking 1 unit up from the origin
-[2, 0.5, 1]   // Looking at a custom point
-```
-
-### How It Works
-
-The camera will always point toward this target position. Combined with [Camera Position](#camera-position), this defines the viewing angle:
-- **Camera Position** = Where the camera is
-- **Camera Target** = What the camera looks at
-
-### Example Setup
-
-For a product sitting on a table:
-```json
-// Camera Position
-[3, 2, 3]     // Camera positioned above and to the side
+This is a common setting shared with the RUNNER block. See the [Common Settings: Camera Target](../getting-started/common-settings#camera-target) documentation for detailed information.
 
-// Camera Target
-[0, 0.5, 0]   // Looking at the center of the product
-```
-
-:::info
-If your model isn't centered at the origin, adjust the camera target to point at your model's center. You can find the model's center coordinates by loading it in a 3D software like Blender.
+:::tip VIEWER-Specific Default
+For the VIEWER block, the default camera target is `[0, 0, 0]` - looking at the origin where models are typically centered.
 :::
 
 ---
 
 ## Background Color
 
-**Default:** `#ffffff` (white)
-
-Sets the background color of the 3D canvas. This creates the environment color behind your 3D model.
-
-:::warning Scene Configuration Override
-This setting is disabled if you're using [Scene JSON Configuration](#scene-json-configuration). Scene configurations support advanced backgrounds including:
-- Solid colors
-- Linear gradients
-- Radial gradients
-- Background images
-- Skyboxes (HDR environments)
-
-You can configure these advanced backgrounds using the [Viewer Editor](/learn/getting-started/viewer-editor/intro).
-:::
-
-### Usage
-
-Provide any valid CSS color by using a color picker.
-
-### Best Practices
-
-Choose a background color that:
-- Matches your theme's design
-- Provides good contrast with your 3D model
-- Complements your product photography style
-
-:::warning Priority Order
-Background settings are applied in this priority order (highest to lowest):
-1. Scene JSON Configuration (skybox or advancedBackground)
-2. Scene JSON Configuration (backgroundColor)
-3. This block setting
-
-If you're using Scene JSON Configuration with skybox or advanced backgrounds, this setting will be ignored.
-:::
-
-### Examples
-
-```
-#ffffff   // Clean white background
-#f5f5f5   // Subtle gray
-#000000   // Dramatic black background
-```
+This is a common setting shared with the RUNNER block. See the [Common Settings: Background Color](../getting-started/common-settings#background-color) documentation for detailed information.
 
 ---