Create a 3D site with Game Controls in Spline and React

Build an interactive 3D scene implemented on a ReactJS site using Figma and Spline

[00:00] Intro
[02:03] Intro to Game Controls
[04:26] States, Events & Animations
[17:20] Movement & Controls
[22:31] Collision Detection
[32:35] Physics
[36:59] 3D Camera & Lighting
[54:55] Audio & Sounds
[59:10] URL & Embed
[01:03:16] Export in React Site
[01:32:31] Performance & 3D Vitals

🚀 Follow these courses on Design+Code's website
Create 3D Site with Spline and React

🎵 Music from Uppbeat (free for Creators!):
License code: X2GOL6B2VPX9H5IS

#3d #figma #reactjs

[cherdak_turista]

Thank you so much! Please, do not stop making tutorials.

[jtatsumaru]

There are a few things worth noticing:
The cat was walking backward to me. To fix it, I zeroed the rotation of the body:
Rotation of the body: x: 0; y: 0; z: 0
Rotation of the cat: x: -180; y: -225; z: -180

The reset Y-offset value that worked for me on the cat was 500. In the video, they set -200, but it's not possible to set something with a negative value anymore.

The tail animation was completely wrong in the new version of Spline. I use these ones on the state:
Position: x: -7, 77; y: -23, 8; z: -23, 4
Rotation: x: 180; y: 0; z: -190
Doesn't need to be removed from the body of the cat :D
To be able to have a smooth animation, I had to set the transition. On the Sequence part of the transition, set:
Loop: Infinite
Cycle: Ping Pong
Btw, this setting is used in every infinite animation, like the whiskers, arms, etc.

For the cat eyes animation, I had to change things a little bit:
For attributes like position, scale, and rotation, I followed the video. But instead of having the regular transition Current -> State, I did State -> Current, and set the Delay Replay: End. I couldn't find another way to make the cat with the eyes open. Following the video, it had the eyes closed most of the time.

For the cat feet animation, I had to create also the key up event for each of the keys: w, a, s, d. There, I set the transition from Current to Base State. That was the best I could do. If someone has a better idea, let me know. It's my first time trying Spline.

Physics is located on the Scene. Click on the scene on the left, and you will find "Simulation" on the right panel.

The amount of actions on the light switch is actually 17. For some reason, the tutorial has a mouse-down event on the light switch as well.

The sound of the drawer on all drawers will be added to the mouse-down event. This is kinda obvious at this point, but just in case :D

I think that was all on this one. Unfortunately, the react component of Spline is creating an infinite loop when I add my personal URL :(

[apagan]

Awesome Content I'm happy YT recommended it. Good stuff

[xhehedq]

Latest spline - Use mouse down for event trigger and add a transition to enable to toggle between base state and state.

[martinstolz]

final result is not working on my chrome 🤷‍♂

[alessio]

we want a tutorial on how to make those beautiful backgrounds

[kirahiro]

hi I am planning to create an interior design project using reactjs, do you think its possible to use Spline and reactjs to create a website where user inputs thier bedroom size, then a room gets created same size he inputs, where he can then drag and drops furniture? please I really need help

[DanaTYang]

very cool, , the 3d scene worked perfectly, but when i went to the final site, it wouldn't work right (laggy and wouldn't really load)

[alexandersebastian]

I am loving spline and really like your tutorials. Main issue I am having is how to optimise spline for web. If I run it through web page vitals my site drops from 97 performance to 55. I really can't justify that much of a drop for my clients. Have you found any ways to improve this? Currently I am just using an Iframe so maybe I should experiment with importing another way? Any tips?

[vishalalkari]

Can't we Ctrl select those multiple drawers and add the event to all ?

[danielomuto]

The link to all the files isn't working

[SoundblasterYT]

Names two examples

"high price tag"

blender is FREE AS IN GRATIS, LIBRE, ETC.

[richardpines]

How did they do the scrolling trigger with the whole page?

[_dinesh]

Is it possible to use it with Angular?

[dfvpgdw]

1) is it possible with vanilaJS?
2) is it possible to make to app?

[matejmatej]

windows defender did not allow to install

[DKYtut]

Hello, is it possible to export the Spline model into a React app first and afterwards add interaction to it with the React code? I only see animation examples from inside Spline.

[circolumpio]

hello, how can you set uo the cameras states with the game control? when I try to work withe games control and camera with state it does not work :(
HEEEELP!!

[kewk]

Yeah, Blender being free is pretty dang high price lol.

[rodrigomachado]

Tem como eu criar um projeto que de para digitar depois? Tipo criar um input text( área) um bloco branco que da pra digitar nele. Um bloco grande. Tipo criar um bloco de notas no figma, isso é possível?