Create 3D UI Scene

What is UI Scenes

UI Scenes serve as 2D canvases where users craft and implement 2D user interfaces, seamlessly integrating them with their 3D scenes. The interactive 2D UI elements created within these scenes can trigger actions on any 3D object. This cohesive framework simplifies the development of 2D user interfaces, ensuring smooth integration with 3D environments and enriching the overall user experience.

Creating a New UI Scene

To create a new UI scene, adhere to the steps below:

1. Locate the Scenes panel on the left sidebar.
2. Click on the + icon positioned at the top right corner.
3. Choose "New UI Scene" from the options provided.

Create a Window

To create a window within the UI scene, you define its properties such as size, position, color, and visual effects. This window serves as the primary container for your UI elements, providing structure and organization to your interface design.

• Size: 320 by 288
• Position: Center
• Color: Grey (808080) at 30% opacity
• Corner Radius: 32
• Background Blur: 100
• Stroke: Inside, 1.4, in white at 20% opacity
• Shadow: Blur at 50, color at 20%, X offset -60, Y offset 50

Import Icon

To bring your icon into the UI frame, Spline supports drag-and-drop functionality, allowing you to easily import assets from external sources, such as your finder, directly into the workspace. Positioning it within the frame is straightforward, allowing you to jump straight into designing within UI Scenes.

Here’s how to get started:

• Create a UI Frame: First, head to the toolbar and select the option to create a UI frame.
• Frame Size: Adjust your frame to the desired size, ideally 52x52 for icons.
• Import the Icon: Drag your icon file directly into the Spline App and drop it into your workspace. You will notice that this will create a frame for your icon.
• Adjust Position: Fine-tune your icon's placement by setting its position to X: 134, Y: 40.

📒 Please note, currently, the settings window for importing doesn't operate as expected. This is a known issue, and they’re working on a fix to improve your design workflow.

Add Text

Let's incorporate a text field into our design. Navigate to the toolbar and click on the text icon to get started.

• Navigate to Toolbar: Accessing the text tool from the toolbar enables you to add textual content to your UI scene.
• Position and Text Field Size: Positioning the text at Y 96 and setting its field size to 320x100 pixels provide ample space for legibility and impact within the UI.
• Font Specifications: Choosing the Inter font, setting the size to 19, the weight to Bold, and aligning the text centrally, ensures that your message is delivered with clarity and emphasis.

Create a Button

Create an interactive button with these specifications:

• avigate to Toolbar and Button Dimension: By selecting the UI icon and setting the dimensions (X 280, Y 44), you define the size and shape of the interactive button, making it easily clickable.
• Corner Radius and Color: A 50-pixel corner radius and a color setting of white with 30% opacity make the button visually appealing and easy to identify against the background.
• Position: Positioning the button at X 19, Y 204 ensures that it is placed in a conventional location, making it intuitive for user interaction.

Add Text to Button

Adding text directly onto the button frame reinforces its functionality and guides the user on what action will be taken upon interaction, aligning with the overall UI theme..

• Copy the text and drag it onto the button frame.
• Set the text field dimensions to 320 by 44.
• Position the text at X 19, Y 204.

Creating a New UI Frame in 3D

Integrating UI frames into 3D scenes expands the possibilities for user interaction and immersion. By adding a new UI frame in a 3D environment, you can overlay 2D UI elements onto 3D objects, creating dynamic interfaces that respond to user actions and environmental changes. Within any 3D scene, follow these steps:

• Locate a new object labeled "UI” in the toolbar
• Utilize this object to render any 2D frame from your UI scenes.
• Set the same size as the original(X 320, Y 288)
• Set the position to your liking

Auto Sync between 3D & UI

And the best part? Any changes you make to the UI are automatically synced back to your 3D scene in real-time, ensuring seamless integration between the two.

Interactivity for UI Elements

But here's where it gets exciting - UI Scenes allows you to integrate these UI elements with 3D objects using Spline's event system. They can trigger actions on both UI elements and 3D objects, ensuring smooth integration.

Setting Up an Interactive Button

• Select Your Button: Click on the Button layer to begin.

• Create a New State:

  • Find the State panel.
  • Click the Plus Icon to introduce a new state.

• Configure the New State:

  • Open the Fill panel.
  • Set the opacity to 50% to indicate interaction.

Configuring an Event

• Navigate to the Events Panel:

  • Click the Plus Icon to add a new event.
  • Change the trigger from Start to Mouse Down to activate on click.
  • Keep the default event settings.

• Add an Action:

  • In the Action section, hit the Plus Icon.
  • Choose Transition to define the button's behavior.

Applying the Action

• Target Selection: Choose the Button from the options provided.

• Transitions Setup:

  • Transition 1 should be your Base State.
  • Transition 2 should be the new State you created.

• Animation Details:

  • Choose Ease In Out for a smooth transition.
  • Set Duration to 0:50 for a swift yet noticeable effect.
• Mode Selection: Pick Toggle to allow the button to switch between states on each click.

Switching Between Frames

Upon creating a 3D UI Frame and selecting it, a new UI panel will emerge in the inspector. From this panel, you can choose which 2D UI Frame will be rendered within that particular 3D UI Frame.

Spatial Mode vs Screen Mode

In Spline, when you're working with 3D UI Frames, you have two primary ways to display them within your 3D scenes:

Spatial Mode:

• Default Setting: 3D UI Frames are naturally integrated into your 3D scene.
• Usage: Ideal for seamlessly blending UI elements within your 3D environment.

Screen Mode:

• Custom Setting: Allows you to designate a specific UI Frame to overlay on top of your scene in a screen-like manner.
• Usage: Particularly handy for designing user interfaces such as menus or Heads-Up Displays (HUDs), ensuring they stand out distinctly.

Conclusion

UI Scenes in Spline revolutionize 3D content creation by seamlessly blending 2D and 3D elements in one space. With this feature, you can create interactive UIs that blend seamlessly with your 3D scenes, offering endless design possibilities. Dive into UI Scenes now and unlock your creativity in the world of multi-dimensional design!