Confirm?

Are you sure you want to proceed?
M
Michael Kaufman

3D Object Manipulation Page

Clone & Customize via AI

Blazor 3D Manipulator provides a demo viewport and a Bootstrap-based control panel with EditForm binding and form-range sliders to modify CSS 3D transforms.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Interactive 3D viewport simulated with CSS 3D transforms (cube with six faces). - Control panel built with Bootstrap cards and grid (col-lg layout). - Editable transform controls using EditForm and native range inputs (form-range) for rotation and scale. - Object selection via InputSelect bound to a simple list of ObjectViewModel. - Reset action to restore default transforms. ## Key components - EditForm - DataAnnotationsValidator - InputSelect - native <input type="range"> controls with @bind and @bind:event="oninput" - C# view models: ObjectViewModel, ObjectTransformModel - CSS selectors: .cube, .face, .front/.back/.top/.bottom/.left/.right ## How it works - A list of ObjectViewModel instances initializes in OnInitialized and sets currentObject. - InputSelect binds selectedObjectId; setter updates currentObject from objectList. - Range inputs use @bind to update ObjectTransformModel properties (RotationX/Y/Z and Scale) and fire oninput for smooth feedback. - GetTransformStyle() composes a CSS transform string (rotateX/rotateY/rotateZ and scale) applied inline to the .cube element. - ResetTransform() replaces currentObject.Transform with a new ObjectTransformModel to restore defaults. ## Styling - Uses Bootstrap layout and utility classes (container-fluid, row, col-lg-*, card, form-select, form-range, btn). - Component-scoped CSS defines the 3D cube and face positioning (.cube, .face, .front, .back, .left, .right, .top, .bottom) and a short transition for transforms. - Responsive behavior relies on Bootstrap grid (viewport area expands on large screens via col-lg-8 and col-lg-4). ## Reuse steps 1. Add the Razor and model files to a Blazor (Server or WebAssembly) project; Bootstrap is required for the layout classes. 2. Include the component-scoped CSS (ThreeDManipulator.razor.css) or import equivalent styles into site CSS. 3. Ensure _Imports.razor includes Microsoft.AspNetCore.Components.Forms for EditForm components (usually implicit). 4. Wire component into routing (the file declares @page "/3d-manipulator"). 5. Optionally replace the CSS renderer with a JS 3D library: add interop code to initialize Three.js/Babylon.js and pass transform values from the model. ## Limitations & next steps - The page simulates 3D with CSS; a production scene requires a JavaScript 3D engine and JS interop for real meshes, lighting, and camera control. - No persistent storage, services, or authentication are wired; integrate application services or state management to save object transforms. - Add validation rules or constraints if rotation/scale limits must be enforced using DataAnnotations. - Consider accessibility improvements for range inputs and alternative controls for keyboard users.