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.

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

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.

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.

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.

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 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.

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.

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.