3d-solar-3system
Reactive icon

3D Solar 3System

Stable version 1.0.0 (Compatible with OutSystems 11)
Uploaded
 on 11 Apr (13 hours ago)
 by 
EONE TECHNOLOGIES PRIVATE LIMITED
0.0
 (0 ratings)
3d-solar-3system

3D Solar 3System

Documentation
1.0.0

Configuration Properties

The component's behavior and appearance are controlled via the following input parameters:

Property

Data Type

Default Value

Description

sunColor

Text (Hex)

'#FFAA33'

The hex code for the light emitted by the central star. Affects the glow and reflection on planets.

backgroundColor

Text (Hex)

'#0A0A14'

Sets the canvas background color. Best used with dark "space" tones for contrast.

enableRotation

Boolean

true

Toggles the automatic orbital animation of planets and the central star.

cameraDistance

Integer

160

Controls the initial zoom level. Higher values move the camera further away, showing more orbits.

showOrbitPaths

Boolean

true

Toggles the visibility of the circular line paths indicating planetary orbits.


Implementation Guide

  1. Placement: Drag the ThreeDSolarSystem block onto your Screen or within a Container.
  2. Sizing: The component will expand to fill 100% of its parent container's width and height. For a full-screen experience, ensure the parent container has a height of 100vh.

Best Practices & Limitations

  • Performance: While optimized, rendering 3D graphics is GPU-intensive. Avoid placing multiple instances of this component on a single screen.
  • Responsiveness: Use the cameraDistance property to adjust the view for mobile vs. desktop. A distance of 160 is ideal for desktop; consider a larger distance for narrow mobile viewports to ensure all planets remain in view.
  • Z-Index: The component renders on a <canvas> element. Ensure other UI elements (like menus or buttons) have a higher z-index if they need to overlap the visualization.