Create 3D Site with Spline and React - Full Course

Turning UI into a 3D Render

In this section, the speaker introduces the course and explains how to turn a UI into a beautiful 3D render that is interactive and animated.

Introduction to Spline

• Spline is sponsoring this video and it's free.

• Spline is easy to use with real-time collaboration.

• No experience with 3D needed.

Creating a 3D Asset in Spline

• Export layers from design software.

• Layers are now interactive and can be previewed in Spline.

• Plan website design using Figma file provided.

Benefits of Using Spline

• Familiar UI with glass layers like Cinema 4D and Blender.

• Material, 3D sculpting, and an amazing library of files that are free to open, inspect, and edit.

• Designers can create amazing 3D illustrations with few steps. Motion designers and 3D artists can create something impactful for free.

Importing Assets into Spline

In this section, the speaker explains how to import assets from your UI into Spline.

Setting Up Perspectives and Materials

• Import your 2D assets from your UI.

• Set up different perspectives and materials such as lighting, image, depth, and glass layer.

Creating Blobs from Scratch

• Create fully animated blobs from scratch.

Exporting Your Work

• Learn how to export your work using a public URL or by using code.

• Use ThreeJS or React and edit the code in CodeSandbox.

Getting Started with Spline

In this section, the speaker explains how to get started with Spline.

Downloading the App

• Download the app for Windows and Mac.

• Create an account which is entirely free for individuals.

Downloading Assets

• Download assets including Figma file and images.

Turning UI into 3D

• Export everything in PNG from Figma.

• Hide layers that you want to create in 3D.

Creating a UI Layer in a 3D Space

In this section, we will learn how to create a UI layer in a 3D space using Spline.

Creating the UI Layer

• Click on the plus sign at the far top left to create a new file.

• Set the shape width to 1280 and height to 844.

• Use the material property to add color, lighting, and other effects specific to 3D.

• Upload an image for the material by clicking on the square next to color and selecting an image from your assets folder.

Adding Volume and Depth

• Increase extrusion value to add volume.

• Add depth material for more realistic 3D effects.

Creating a 3D Avatar and Other Shapes in Figma

In this section, the speaker demonstrates how to create a 3D avatar and other shapes in Figma.

Creating a 3D Avatar

• Change the first color to a neutral blue color.

• Select linear for type of gradient.

• Use Z instead of 3D space to change direction of gradient. Set Z to one and X to zero.

• Set black at top of layer and gradient from bottom of Z index of layer. Set opacity of black color to zero.

• Set near value to 9.9 and far value to 10 for full color on sides and transparent color at top of avatar.

• Adjust size by setting it to X 108and Y 117.

Copying Material

• Right-click on material and copy material.

• Create rectangle by pressing R, set dimensions, then right-click on it and paste material.

Duplicating Layers

• Duplicate layers with same properties as original layer by using command D.

Changing Properties for Multiple Layers at Once

• Select multiple layers such as new members and change properties at once.

Setting Corner Radius for Cards

• For cards, set corner radius to five.

Reordering Layers and Creating 3D Layout

In this section, the instructor demonstrates how to reorder layers and create a 3D layout.

Reordering Layers

• You can reorder the layers.

• The avatar is at the top, followed by banner featured card Poplar cards and new member.

• Moving Z index for some of these layers, such as the second cards and the new member cards.

Creating 3D Layout

• The layers created so far use extrusion making it fully 3D.

• Switching to isometric view allows you to move around.

• Recreating your 2D design into a full 3D layout is great for presentation and animation.

Creating a Blob in the Back of UI

In this section, the instructor demonstrates how to create a blob in the back of UI using Spline.

Creating Sphere

• Moving 3D layers to front while creating sphere at back named "blob1".

• Setting size of sphere as 1000x1000 with Z-axis also set at 1000.

Adding Displace Material

-Creating new material using Displace effect on sphere

-[]( t =14m30 s )Playing with numbers by dragging it around makes it look cool

-[]( t =14m37 s )Opening properties and changing different types for that from simplex to Ashima

-[]( t =14m42 s )Setting scale down a little bit

Increasing Subdivision Surface

• Clicking on smooth and edit to increase subdivision surface to 3 or 4.

• The more polygons, the more curved it will be but at the cost of performance.

Conclusion

Spline is a powerful tool for creating 3D layouts and effects. By following the steps outlined in this tutorial, you can create stunning designs with ease.

Creating 3D Blobs with Spline

In this section, the speaker demonstrates how to create 3D blobs using Spline. They explain how to use depth and gradient instead of color to create a more visually appealing effect.

Using Depth and Gradient for 3D Blobs

• Use depth instead of color for a more visually appealing effect.

• Open the depth options.

• Set the first color to blue and add a second color (80 52 F F).

• Add a third color (E 0 4 4 D E).

• Adjust far and near values for the gradient.

Lighting Options

• Change lighting options to none for a more pure gradient.

• Other lighting options include Lambert, Phong, Physical, and Toon.

Creating Glass Effects

• Create glass effects by adding a new material.

• Adjust priority of materials so that image is above glass.

• Adjust blur, thickness, and refraction settings as desired.

Animating UI and Background Blobs in Spline

In this section, the speaker explains how to animate UI elements and background blobs in Spline using states instead of timeline animation.

Using States for Animation

• Use states instead of timeline animation in Spline.

• Select layer such as avatar to animate.

• Use states to create different versions of the layer.

Lighting and Shadow Options

• Adjust lighting and shadow options as desired for animation.

• Use ambient occlusion, shadows, and other settings to create desired effect.

Conclusion

In this section, the speaker concludes the tutorial on creating 3D blobs and animating UI elements in Spline.

Final Thoughts

• Creating 3D blobs is simple with Spline.

• Use depth and gradient instead of color for a more visually appealing effect.

• States are a powerful tool for animation in Spline.

Animating with States and Events

In this section, the speaker demonstrates how to animate using states and events in Framer X.

Setting Up States

• Click on the plus sign to create two states: base state and new state.

• Set Z index to 10 for the base state and 80 for the new state.

• Create an event by selecting a mouse interaction from multiple types of events available.

• Set end state as State 1 or State 2 depending on which one you want to use.

• Play animation.

Creating Mouse Hover Interaction

• Create a new state by clicking on the plus sign when you want to change something in your design.

• Change color material by adding a color value of five F F 3 F A and setting opacity to 50%.

• Create a new event by selecting mouse hover interaction from multiple types of events available.

• Set transition type as spring, which will bounce back after being triggered.

• Preview animation.

Applying Animations on Other Layers

• Compose start animation and use delay for avatar layer set at 0.6 seconds.

• For each additional layer:

• Create a new member with its own starting point (e.g., New Member starts at 20).

• Create a new state with its own ending point (e.g., New Member ends at 60).

• Preview animations.

Creating a Start Animation

In this section, the speaker demonstrates how to create a start animation using Framer.

Creating the Start Animation

• Create a new state.

• Set state to 30.

• Featured card one.

• Set featured car 2 to 10 first.

• State 90.

• Popular card one.

• Set popular car two to 10 first.

• Set state to 30 for popular car two.

Adding Mouse Over Interaction

• Add mouse over interaction for each element individually by creating another state and repeating the same steps as before.

• Finish with the event on those layers which is mouse over.

Previewing and Testing

• Preview the animation and reset it if necessary using the reset button.

• Test your work and fix any mistakes you may have made.

Changing Viewing States

In this section, the speaker shows how to change viewing states in Framer.

Grouping Layers

• Group all layers except blobs and light by selecting them and pressing command G. Name this group UI.

Setting Default State

• For base state, set rotation to minus 40 then Y 40 then Z 40.

Creating Second State

• Create second state with rotation minus 20,20,and then 7.

Creating Interactive Elements and Lighting

In this section, the speaker demonstrates how to create interactive elements and lighting in a design.

Creating Interactive Elements

• Start animation from base to state.

• Create an event for start animation duration 10, and it's going to switch to state.

• Create another event which is mouse hover and it's going to switch to state 2.

• The result is an interactive element with beautiful rotation plus card start animations.

Adding Lighting

• Change the lighting setting inside the UI group by going to the main daccord layer.

• Move the yellow circle above the glass so that shadows are visible.

• Change shadow settings by selecting soft shadows and setting blur to five.

• Set light color as white with intensity of 0.7.

• Go through each card and change material for lighting effect on each layer.

Blob Animation

In this section, the speaker demonstrates how to create a blob animation in a design.

Creating Blob Animation

• Set displace value at minus 360 and movement value at 8.4 for first blob.

• Create an event for start animation duration of 20 seconds with repeat option set as yes and cycle it.

Creating a Fully Animated UI with Spline

In this section, the speaker demonstrates how to create a fully animated UI using Spline. They show how to create a blob animation that loops and how to fix any positioning issues that may arise.

Creating the Blob Animation

• The blob animation will keep looping.

• The speaker creates the beautiful blob animation that will keep looping.

• A state is created with displacement set to minus 500 and movement set to 25.

• An event is created and set to 20 seconds with cycle and repeat options selected.

• The fully animated and interactive UI is shown.

Fixing Positioning Issues

• Sometimes changes can affect positioning, so the speaker fixes any issues as a last step.

• The Z position for each layer in stage two is changed to minus 65.

• After fixing all layers for state two, the speaker switches back to state.

Creating a React Site Using the 3D Asset

In this section, the speaker shows how to create a responsive React site using the 3D asset created in Spline. They explain how exporting works and demonstrate how it can be shipped to an engineer.

Exporting Options

• Anything created in Spline can be exported into a URL.

• Clicking on an export provides a public URL that can be copied and pasted into a browser.

• The exported asset is fully interactive with drag and other interactions.

• The speaker explains the different options available in Spline, including orbit, pan, zoom, and page scroll.

Implementing the 3D Asset

• The orbit option allows for dragging around the asset.

• The pan option moves objects around but is not useful for website implementation.

• Zoom can be turned off using command scroll.

• Page scroll is turned off because it's not optimal for a website.

• The ability to have the orbit using on hover creates a beautiful parallax 3D effect that is fun for showcasing a 3D model on a website.

• Sensitivity can be adjusted but is turned off in this case.

• Limiting the orbit is important for optimal website implementation.

Using Spline to Create 3D Animations

In this section, the speaker explains how to use Spline to create 3D animations and how to preview and export them.

Creating and Previewing Animations

• Set a limit of five degrees on all directions when orbiting and releasing.

• When you release an orbit, it will go back with a little offset of five degrees.

• Remember to update changes made in the preview or they won't show up on the website.

• The zoom level set in the canvas directly affects how it's shown in the public URL.

• Updating everything reflects changes made in the public URL.

Exporting Animations

• Click on "Export" to access different options for exporting animations, including JPEG at any resolution, showing/hiding background, exporting splined file itself, or recording a video of animation.

• Multiple options are available for using Spline with other libraries such as Three.js or React Three Fiber.

• Code Sandbox is used to edit code for implementation on websites.

Implementing Animations on Websites

• Saving projects requires signing into Code Sandbox; once saved, it can be accessed from any device via URL.

• Use "Edit Frame" option to change background color and size of asset; changes made here will be reflected in public URL or Code Sandbox object.

• Refreshing the website shows that the asset is now using a fixed size of 1200 by 1000.

Setting up the Website

In this section, the speaker discusses how to set up the website using CSS and Style Components. They also explain how to add custom fonts.

Installing Style Components

• To install Style Components, go to dependencies and search for it.

• Click on it to add the library.

Adding Custom Fonts

• The speaker recommends using Spline Sans Mono for the title and Spline Sans for the body text.

• Go to each of these fonts and copy their URL link.

• Paste each URL into external resources in Code Sandbox.

• Select external URL and then add resource if you cannot find a font in Google fonts.

Changing Background Color

• Open style.css file and change background color by adding a color value of 0 E 1129 for site page container.

Creating Container with Styled Components

• Import styled from styled components at top of file.

• Create a wrapper component with const wrapper = styled.div;

Setting up the Spline Object

In this section, the speaker sets up the Spline object and targets it using Sass.

Setting Up the Spline Object

• The font family used is Spline Sans.

• The default font size is set to 16 pixels.

• The color white is used because of a dark background margin, which is set to zero auto so that it centers.

• To move the spline object around in the canvas (wrapper), a class name called "spline" is created.

• The wrapper is set to position relative so that it's against the wrapper. If I do that, then I need to set my wrapper to position relative so that it's against the wrapper.

• The spline object has margin zero and align from top zero, right zero instead of sticking to the left now it's sticking to the right.

Adding Content on Top of Spline Object

In this section, we add content on top of our spline object.

Adding Content on Top of Spline Object

• A new component called "content" is created after spline.

• Const content equals style dot div and structure using h1 tag are added.

• H1 tag uses spline song motto with font weight bold and font size 70 pixels; max width two 500 so that it can fit nicely in a container; margin set to zero; comma P curly braces for text with font weight normal; line height for good readability set at 150%; max width 380.

• Margin for H1 and P curly braces is set to zero 30, zero 100.

Exporting Assets to be Used for Code Sandbox

In this section, the speaker shows how to export assets to be used for code sandbox.

Exporting Assets to be Used for Code Sandbox

• Elements are exported into an SVG format, including social icons, button icon, and logo. They are already prepared inside the images folder.

• The speaker shows how to import those images into code sandbox.