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

[@cherdak_turista]

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

[@DesignCodeTeam]

We’ll keep making awesome designs! Thanks!

[@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 :(

[@vladislavnovoselov3699]

Thanks a lot, really appreciated Edit: looks like that if you open also a final version of project, that was in assets, it will show the correct way of setup for new version, so you can check a hint how to make it in a new version of Spline

[@daFoggovien]

thank you so much man

[@apagan]

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

[@DesignCodeTeam]

Glad to have you here!

[@MattGoodwin-c3x]

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

[@MightyKingKala]

banger video, thank you guys

[@DesignCodeTeam]

Thrilled to hear that!

[@kirahiro1252]

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

[@martinstolz5971]

final result is not working on my chrome 🤷‍♂

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

[@TheOnlySirC]

This is a great question.

[@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)

[@BlazeLove]

Hey I have a query what if for any reason we stop getting subscription of spline then it will start showing logos and basic free package stuff in already complete projects too?

[@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!!

[@danielomuto]

The link to all the files isn't working

[@백종훈-s8p]

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

[@rodrigomachado3402]

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?

[@sturanovicms]

Thank you so much!

[@DesignCodeTeam]

You’re welcome!

[@ErickOliverArt]

amaizing. im sad the dropbox link dont work

[@_dinesh]

Is it possible to use it with Angular?

[@canra245]

whoaaa thank u so much!

[@DesignCodeTeam]

Happy to help!

[@inv1ctu_545]

How do you scroll down in the edit event and the design option box(the long black rectangle on the right side of the screen)?

[@alexandersebastian3360]

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?

[@DesignCodeTeam]

As explained in the last portion of the video, you can check the performance tests in Spline. Make sure to simplify your 3D renders, materials and avoid looping animations, etc. Hope this helps!

[@vishalalkari3233]

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

[@cv3787]

Cool stuff!

[@Rafiramdhani12]

noo i cant download the templates

[@alessio750]

we want a tutorial on how to make those beautiful backgrounds

[@DesignCodeTeam]

The last course did show quite a significant part of that. I’ll try to make more!

[@gaudiyamission1598]

@@DesignCodeTeam hey i want to design website from you fot my business

[@gaudiyamission1598]

@@DesignCodeTeam please share me your email or what's app number

[@richardpines4258]

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

[@znedj]

Amazing.

[@DesignCodeTeam]

Thank you! Cheers!

[@ValerieV-e6y]

Is it possible to make this 3D art into a game of sorts on a website? If it has game controls is there a way to allow site visitors to switch the sheets pattern on the bed, move the bed to a different area, add a piece of furniture delete it or move it somewhere else? Is there a way to make this a game?

[@kirahiro1252]

did u figure it out? i wanna do same as u

[@tomislavnikolic5778]

I don't understand; can you actually bind data to the controls in Spline? Like, open a website, show a dialog, and so on?

[@metoz]

Have you found an answer to this? wondering the same

[@tomislavnikolic5778]

@@metoz No, but looking at this tutorial and one other from the same creator, I think it's exported as a static resource and is just eye candy --- which is fine, but having a website be actually a layered 3D space just tickles my fancy and opens up the possibilities. Ofc, I could do something like that without spline, just using transitions and some fancy transitions and advanced code logic. Still, would be cool to see something as convenient as spline used in this manner.

[@ShampooAki]

Awesomeness ❤

[@matejmatej6285]

windows defender did not allow to install

[@carlosrofts5230]

i check the final site and looks outperformance and broken :( , thanks for sharing

[@codebank1645]

thanks

[@SoundblasterYT]

Names two examples "high price tag" blender is FREE AS IN GRATIS, LIBRE, ETC.

[@qtube9892]

Hello!) Thank you for such a useful tutorial, I'm so grateful that someone made such tremendouse job! I tried to download assets but link doesn't work ( Could you check that problem? thanks in advace!🤗

[@DesignCodeTeam]

Let me check, will fix shortly!

[@DesignCodeTeam]

The dropbox link have been updated.

[@kewk]

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

[@Rust_Rust_Rust]

Is this website performant ?

[@danisob3633]

1:33:00

[@NOPE96]

Blender is literally free and the learning curve is more or less the same as with spline, if you only go "that far".

[@DesignCodeTeam]

Not the same ease of use or features, like team collab or interactions, export, etc.

[@jeps7688]

I somehow manage to create my room in blender until to the part of mapping the texture. Every time i tried to import it to my website. It looks horrible. That made me quit that was 2 years ago, I now totally forgot how to use blender. Spline looks promising

[@kamichikora6035]

Damn

[@greggomes3D]

I thought blender was free

[@DesignCodeTeam]

Both blender and Spline are free (individuals without extra features)

[@tanweerchiktay]

Hi. Hi

[@wormholeinteractive]

MAJOR BS. Blender is free and the only feature it doesn’t provide is export to web. Cinema 4D light is included with AE. Blender has a huge following and support and the right tools to get you started as well as supporting you as you grow in your 3D modeling career.