Spline Design: Create Objects, Scenes and Animations in 3D

Select the extruded model and adjust material properties—opacity, color, layers, and textures—then test lighting models (Lambert, Phong, Physical, Toon) and textures (video, AI texture, noise), save materials, apply across instances.

Explore lighting in 3d design by using environment light, directional light, and point light; adjust color, intensity, shadows, shadow blur, penumbra, and spotlight distance and angle.

Animate a torus by creating base and state scales, applying an easy ease in/out transition, and exploring mouse press, hover, and key toggle events with spring and bezier options.

Apply gradients as textures to a torus knot, adjusting colors for a seamless transition. Choose linear, radial, or polar types, and tweak angle, offset, and morph across two axes.

Create a centered 3D pentagon scene with depth gradient, add a sphere and a pyramid with glass material, and animate a 360-degree rotation using states and transitions.

Discover how to use the cloner component to create multiple clones, explore linear, radial, and grid layouts, adjust count, radius, axis, scale, and rotation.

Explore boolean operators in spline by merging a sphere and a cube, using subtraction, intersection, and union, then animate with a state-based ping-pong loop.

Design a 3D Keychron keyboard in Spline by modeling a case and keys, applying subdivision, textures, and colors, then add interactive key-press animations and share via a live link.

Create a 3d ghost in spline in under 15 minutes in a browser, modeling with subdivisions, eyes, and eyebrows, plus a look-at animation for a mass-follower effect on your site.

Learn how Spline's game controls gamify your scene with walk and fly modes, keyboard and mouse navigation, camera follow, collisions, and configurable touch and desktop controls.

Explore physics in spline by applying gravity and collisions to individual objects, adjusting mass, gravity scale, friction, damping, and bounce to control motion.

Apply video textures in Spline to map videos onto objects, adjust projection and UV mapping, and control wrapping. Upload custom videos and manage playback, looping, and audio via actions.

Explore 3d paths in spline by extruding a custom letter S, adjusting corners, subdivisions, and twists, then apply gradient materials and animate with states to create dynamic 3d paths.

Explore how to build 3D interactive websites with spline, using a ball-producing machine, a glass tube, and orbit-limited navigation to animate text, buttons, and rotating objects.

Learn to build a simple machine in saline by importing library icons, duplicating and shaping spheres and cylinders, adjusting the camera, coloring, and grouping the machine in the top-left corner.

Add a background rectangle as a template to reveal shadows, then set its Phong lighting, adjust the light position, and tweak the color for visibility.

Create the pipe by adding a helix, adjust the path radius for thickness, trim unwanted parts to a single tube, align with the background, and finalize its color.

Learn to create text objects in spline, customize fonts, sizes, and colors, duplicate to add page numbers, and put description text using lorem ipsum.

Create a helix by duplicating and positioning helix objects, adjusting thickness, path radius, and resolution for three layers, then align, duplicate, and apply materials for a flying ball animation.

Create a transparent glass tube by deleting the gap, duplicating the helix, and applying a glass material with blur and thickness. Watch the next video for animated buttons.

Design animated hover buttons linked to YouTube and Instagram, importing PNGs from resources, adjusting rotation, extrusion, and shadows for a 3D look while balancing performance and layout on the left.

Animate the buttons with hover effects that enlarge on mouse hover using base and second state and a hover event; use spring transitions and note that extrusion cannot be animated.

Create and animate balls in a 3D spline scene by spawning orange spheres from a left cylinder into a right tube, using start, repeat, and delay for continuous motion.

Duplicate a second ball inside the glass tube, adjust its size and placement for a sequential animation. Set the camera and timing to reveal the orange silhouette through the glass.

Complete first page by resetting camera, playing scene with looping balls; speed up to 0.5 seconds and add button links with hover and mouse down events to Yeti Learn channel.

Create a new spline project for the second page, assemble pipes and balls, adjust colors and text, and prepare the seesaw layout for the animation in the next video.

Create a seesaw animation by grouping ball, books, and pipe, configuring two states with rotation and size changes, and applying start, repeat, and cycle events for a smooth loop.

Duplicate the second page to build the third, reuse spheres, adjust lighting and background, and implement hover-triggered text with rotating figures for a dynamic 3D page.

Export spline designs to CodeSandbox and import them into a React project to build a live website, then adjust orbit limits, background color, and camera settings on landing page.

Learn how rendering multiple high-poly 3D animations on one page causes performance issues, and improve efficiency by splitting projects and using React state to manage pagination and camera settings.

Learn to use the useState hook of React to render one project at a time for CPU efficiency, using a page state and conditional rendering with the and operator.

Continue building the third page by adding a new camera, disabling pan and zoom, setting orbit limits to five; copy the url, update page three, and preview hover-animated floating figures.

Create a React pagination component with three right-side buttons, import CSS, and wire up active and passive states via props to update the page through a parent app state.

Learn to switch pages by wheel events using useEffect and useRef to manage a single, boundary-respecting event listener, preventing infinite loops and ensuring smooth page navigation.

Implement wheel-based navigation by using delta y to detect scroll direction, updating current and previous pages while enforcing bounds to prevent scrolling beyond the first or last page.

Complete the project by adding a smooth fade transition and consistent backgrounds in a 3D web site built with React and Spline, refining animations, navigation, and responsiveness.