Cosmic Portal
A breathtaking, animated 3D portal built with Three.js that features glowing rings, floating crystals, space distortion, and interdimensional streams.
API
| Prop Name | Type | Default | Description |
|---|---|---|---|
portalComplexity | number | 4 | Controls the complexity of the portal effects and geometry. |
crystalCount | number | 12 | Number of floating crystals in the scene. |
primaryColor | string | #9b59b6 | Main color for portal and background glow. |
secondaryColor | string | #3498db | Secondary color for blending and glow. |
accentColor | string | #e74c3c | Color used for portal energy and highlight. |
vortexColor | string | #2ecc71 | Color used for swirling vortex and dimensional streams. |
rotationSpeed | number | 0.3 | Speed at which objects rotate. |
bloomStrength | number | 1.2 | Intensity of bloom postprocessing. |
bloomRadius | number | 0.7 | Radius of the bloom effect. |
bloomThreshold | number | 0.2 | Threshold for bloom visibility. |
dimensionShift | number | 4 | Level of dimension distortion for shader animation. |
Features
- Stunning Visuals: Animated cosmic background, glowing vortex rings, and interdimensional streams.
- Shader Driven Effects: Unique portal burst, distortion, and pulsing animations.
- User Controls: Zoom, rotate, and orbit around the scene using OrbitControls.
- Postprocessing: Includes bloom and FXAA for cinematic quality.
- Dynamic Colors: Easily shift dimensions and regenerate colors using exposed methods.
- Exposed Actions: Call
activatePortal()to trigger portal effects orshiftDimensions()to regenerate the visual style.
Installation
Ensure the following libraries are installed in your project:
Install using CLI
Install Manually
Copy and paste the following code
CosmicPortal.vue
Credits
- Inspired and ported from Dimensional Portal by Techartist.