3D Web

3D Moon and Clouds

It's an example 3D Landing Page with moon and clouds scene. It is developed using Nuxt.js, and Spline Design

Nuxt.jsSpline

Project Overview

A dreamy 3D landing page featuring an interactive moon and clouds scene created with Spline Design. The page combines atmospheric 3D visuals with smooth scroll interactions, creating an ethereal browsing experience. Visitors can interact with the 3D scene by moving their mouse, which subtly shifts the perspective of the moonlit cloudscape.

Key Features

Interactive 3D moon and clouds scene
Mouse-driven parallax perspective shifts
Spline Design runtime for web-optimized 3D
Atmospheric lighting and fog effects
Smooth scroll-triggered scene transitions
Lightweight deployment on Netlify

Technical Highlights

Spline Design provides the 3D scene with built-in interaction events, eliminating the need for manual Three.js setup. The Spline runtime is loaded asynchronously in Nuxt.js via onMounted to prevent SSR issues. The 3D scene is optimized for web with compressed textures and simplified geometry.