How to create a scene like this?

I’ve been searching for inspiration on the internet, came across this game. https://www.crazygames.com/game/hippy-skate
I wonder if it’s possible to build a scene like this in threejs.



2 Likes

The short answer is: Yes :slight_smile:

Do you have a more specific question about how to achieve a certain effect in this scene? The main thing I see here is that they’re using low poly models with flat shading, and maybe a toon lighting shader kind of effect.

Here’s a thread on flat shading in ThreeJS How to set flatShading or smooth to material (load object with GLTFLoader)? - #8 by sts_1994

There’s also a built-in toon material which you can use or create a custom one based off of it three.js docs

yes it’s possible, if you required help to make it for you, pls let me know,

Sample Threejs Porject

It is absolutely possible.

This official three.js example demonstrates that style of 3D layout. And there are many official examples showing how to animate a character.

You can create the models in a program like Blender and import them into your three.js program.

You will probably want to use something like cannon.js to create a hardened surface and handle the physics. Jan Bláha created an interesting 3D playground using three.js and cannon.js which you can find here.

Of course, you will have to create the controls, etc. to make all this work on a circular track.

1 Like

Thanks for your reply.

Yes, I have a few specific questions, for starters. Let’s forget about the character and physics, Is it possible to achive this scene purely programatically. For example, the undulating ground. How to do this in code? And the track the skateboard is on, it looked so smoonth, what kind of material is this in threejs?

Thanks for your answer, I got the character and physics covered, and I’m a programmer only have very basic knowledge about Blender, so is it possible to do the rest of this scene by code only, or I’d better to use another software like Blender.

Nice project!. I see you are also using Avatar from Ready Player Me. Did you design this scene in Blender?

Just turn on i m a g i n a t i o n :smiley: sure possible

I use Blender is to create models which are imported into three.js. In this case, you could use Blender to create (1) the terrain with 3d flowers and rocks, (2) the track; and (3) the skateboarder.

You can even create animations in Blender, which you can import and use in three.js.

If you plan to create these kinds of games, I would highly recommend taking the time to learn Blender. You don’t need to learn all of Blender - just enough to create basic models.

In theory, you could make these objects using three.js - but that seems like a painful alternative.

All from Ready Player Me,

To help you get started, here is a circular ramp created entirely in Three.js:

https://codepen.io/boytchev/full/vYVPXxX

image

5 Likes

Maybe you can use something from the beginner example?
See from the Collection of examples from discourse.threejs.org

BeginnerExample

Great example!

Yeah, it makes sense to use Blender for this task, I just want to see how far I can push things with code and maybe deep learning models. Cause I’m a coder not an artist. :grin:

Danke für das Beispiel

I understand completely. I often have to use an existing model or texture that is similar to what I want and then modify. I am generally terrible at creating something from scratch. And when I am done, the model will look too clean, with none of the grit and grime and little imperfections that a true artist would add. .