renames and reorg.++

demo-snippets/guides/camera_controllers/index.ts

@@ -0,0 +1,14 @@
+import { demo } from "../../demo";
+import { ViewDemoHost, ControllerDemoHost } from "../../hosts";
+/** Here goes code demo code that you can see in the playground */
+import cameraState from "./cameraState.ts?raw";
+import controllerParams from "./controllerParams.ts?raw";
+import controllerProperties from "./controllerProperties.ts?raw";
+
+const dirName = "getting_started";
+
+export const cameraControllers = {
+    ...demo(dirName, "cameraState", "Camera state", cameraState, ViewDemoHost, {}, "Camera state example."),
+    ...demo(dirName, "controllerParams", "Controller params", controllerParams, ControllerDemoHost, {}, "Camera controller parameters example."),
+    ...demo(dirName, "controllerProperties", "Controller properties", controllerProperties, ControllerDemoHost, {}, "Camera controller properties example."),
+};

demo-snippets/guides/index.ts

@@ -1,4 +1,6 @@
-export * from "./getting_started";
+export * from "./interactive_examples";
+export * from "./render_state";
+export * from "./camera_controllers";
 export * from "./loading_scenes";
 export * from "./clipping";
 export * from "./dynamic";

demo-snippets/guides/interactive_examples/index.ts

@@ -0,0 +1,12 @@
+import { demo } from "../../demo";
+import { StateDemoHost, BareboneDemoHost } from "../../hosts";
+/** Here goes code demo code that you can see in the playground */
+import basic from "./basic.ts?raw";
+import renderState from "./renderState.ts?raw";
+
+const dirName = "getting_started";
+
+export const interactiveExamples = {
+    ...demo(dirName, "basic", "Basic app", basic, BareboneDemoHost, { contentHeight: 150 }, "A minimal example."),
+    ...demo(dirName, "renderState", "Render state edit", renderState, StateDemoHost, {}, "Render state editing example."),
+};

demo-snippets/guides/object_selection/color.ts

@@ -2,7 +2,7 @@ import { createColorSetHighlight, type RenderStateChanges } from "@novorender/ap
 
 export function main(): RenderStateChanges {
     const highlight = createColorSetHighlight([0, 1, 0]);
-    const objectIds = [2221]; // list of objects that we want to highlight
+    const objectIds = [2, 2221]; // list of objects that we want to highlight
     return {
         highlights: {
             groups: [{ action: highlight, objectIds }],

demo-snippets/guides/render_state/index.ts

@@ -0,0 +1,10 @@
+import { demo } from "../../demo";
+import { StateDemoHost } from "../../hosts";
+/** Here goes code demo code that you can see in the playground */
+import validation from "./validation.ts?raw";
+
+const dirName = "render_state";
+
+export const renderState = {
+    ...demo(dirName, "validation", "Render state validation", validation, StateDemoHost, {}, "Render state validation example."),
+};

docs/guides/camera_controllers.mdx

@@ -26,7 +26,7 @@ To help with this, the <CodeLink type="class" name="View"/> class introduces cam
 These will overwrite the camera related render state on every frame, so setting it directly like in the example above usually won't work.
 For the sake of understanding, we select the inert <CodeLink type="class" name="NullController"/> so we can play around with the camera state ourselves.
 
-<PlaygroundComponent {...snippets.gettingStarted.cameraState} />
+<PlaygroundComponent {...snippets.cameraControllers.cameraState} />
 
 ## Active controller
 
@@ -105,7 +105,7 @@ OrbitController.assert(activeController);
 activeController.updateParams({ rotationalVelocity: 2 });
 ```
 
-<PlaygroundComponent {...snippets.gettingStarted.controllerParams} />
+<PlaygroundComponent {...snippets.cameraControllers.controllerParams} />
 
 ## Properties
 
@@ -130,7 +130,7 @@ activeController.pivot = [x, y, z];
 The same applies to rotation, which is expressed as two angles, `yaw` and `pitch`.
 One reason for this is to restrain the orientation to have zero roll angle, which is often confusing and rarely useful.
 
-<PlaygroundComponent {...snippets.gettingStarted.controllerProperties} />
+<PlaygroundComponent {...snippets.cameraControllers.controllerProperties} />
 
 ## Zoom to and fly to
 

docs/guides/getting_started.mdx → docs/guides/interactive_examples.mdx

@@ -1,8 +1,8 @@
 ---
-title: "Getting started"
+title: "Using interactive examples"
 sidebar_position: 1
-description: "Setting up instructions for the various Novorender packages."
-keywords: ["novorender api docs", "getting started"]
+description: "How to use the interacive code examples."
+keywords: ["novorender api docs", "examples"]
 ---
 
 import Link from "@docusaurus/Link";
@@ -28,7 +28,7 @@ This is why we include plenty of interactive examples.
 Click the "run demo" button below to activate the example!
 Once active, you should be able to navigate the 3D view by moving the cursor with the left mouse button pressed to rotate, or mouse wheel to zoom in/out.
 
-<PlaygroundComponent {...snippets.gettingStarted.basic} />
+<PlaygroundComponent {...snippets.interactiveExamples.basic} />
 <br />
 
 The above example shows a minimalistic implementation to get anything on screen.
@@ -48,7 +48,7 @@ The context in which is runs applies those changes to the view's render state be
 
 Click to activate and then try changing the the values in the code in the example below!
 
-<PlaygroundComponent {...snippets.gettingStarted.renderState} />
+<PlaygroundComponent {...snippets.interactiveExamples.renderState} />
 <br />
 
 We use Microsoft's [Monaco editor](https://microsoft.github.io/monaco-editor/), which is quite powerful and helpful for editing typescript code.

docs/guides/render_state.mdx

@@ -174,7 +174,7 @@ It will only perform basic range checks and values that could result in a run-ti
 
 Some examples will do validation and report back validation errors, like the one below:
 
-<PlaygroundComponent {...snippets.gettingStarted.validation} />
+<PlaygroundComponent {...snippets.renderState.validation} />
 
 Change the `grid.distance` to `100` instead of `-100` to rectify the problem.