# How to create a scene like this?

**URL:** <https://discourse.threejs.org/t/how-to-create-a-scene-like-this/51835>\
**Category:** Questions\
**Tags:** materials, textures, geometry\
**Created:** [May 21, 2023, 1:30pm UTC](https://discourse.threejs.org/t/how-to-create-a-scene-like-this/51835 "2023-05-21T13:30:09Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![YugoAmaryl46](https://avatars.discourse-cdn.com/v4/letter/y/c37758/32.png) [@YugoAmaryl46](https://discourse.threejs.org/u/YugoAmaryl46)\
**Post date:** [May 21, 2023, 1:30pm UTC](https://discourse.threejs.org/t/how-to-create-a-scene-like-this/51835/1 "2023-05-21T13:30:10Z")

</div>

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

 ![Screenshot from 2023-05-21 21-20-59](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/7/b/7b22028426308e760e45089abfc99da297d08b9d.jpeg)  
 ![Screenshot from 2023-05-21 21-21-02](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/c/b/cbe520c89eef7ae2a48247f04ab6ea7234c9db85.jpeg)  
 ![Screenshot from 2023-05-21 21-21-04](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/0/0/00db72f042783dc6ae5ea4486a543911cca95be5.jpeg)

---

<div class="post-metadata">

**Author:** ![Omar\_Shehata](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/omar_shehata/32/43576_2.png) [@Omar\_Shehata](https://discourse.threejs.org/u/Omar_Shehata)\
**Post date:** [May 21, 2023, 3:00pm UTC](https://discourse.threejs.org/t/how-to-create-a-scene-like-this/51835/2 "2023-05-21T15:00:53Z")

</div>

The short answer is: Yes 🙂

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](https://discourse.threejs.org/t/how-to-set-flatshading-or-smooth-to-material-load-object-with-gltfloader/5207/8)

There’s also a built-in toon material which you can use or create a custom one based off of it [three.js docs](https://threejs.org/docs/#api/en/materials/MeshToonMaterial)

---

<div class="post-metadata">

**Author:** ![Umbawa\_Sarosong](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/umbawa_sarosong/32/30107_2.png) [@Umbawa\_Sarosong](https://discourse.threejs.org/u/Umbawa_Sarosong)\
**Post date:** [May 21, 2023, 5:03pm UTC](https://discourse.threejs.org/t/how-to-create-a-scene-like-this/51835/3 "2023-05-21T17:03:07Z")

</div>

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

[Sample Threejs Porject](https://theneoverse.web.app/#serini&&serini)

---

<div class="post-metadata">

**Author:** ![phil\_crowther](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/phil_crowther/32/64202_2.png) [@phil\_crowther](https://discourse.threejs.org/u/phil_crowther)\
**Post date:** [May 21, 2023, 7:39pm UTC](https://discourse.threejs.org/t/how-to-create-a-scene-like-this/51835/4 "2023-05-21T19:39:07Z")

</div>

It is absolutely possible.

This [official three.js example](https://threejs.org/examples/#webgl_animation_keyframes) 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](https://github.com/swift502/Sketchbook).

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

---

<div class="post-metadata">

**Author:** ![YugoAmaryl46](https://avatars.discourse-cdn.com/v4/letter/y/c37758/32.png) [@YugoAmaryl46](https://discourse.threejs.org/u/YugoAmaryl46)\
**Post date:** [May 25, 2023, 6:07am UTC](https://discourse.threejs.org/t/how-to-create-a-scene-like-this/51835/5 "2023-05-25T06:07:24Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![YugoAmaryl46](https://avatars.discourse-cdn.com/v4/letter/y/c37758/32.png) [@YugoAmaryl46](https://discourse.threejs.org/u/YugoAmaryl46)\
**Post date:** [May 25, 2023, 6:11am UTC](https://discourse.threejs.org/t/how-to-create-a-scene-like-this/51835/6 "2023-05-25T06:11:14Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![YugoAmaryl46](https://avatars.discourse-cdn.com/v4/letter/y/c37758/32.png) [@YugoAmaryl46](https://discourse.threejs.org/u/YugoAmaryl46)\
**Post date:** [May 25, 2023, 6:14am UTC](https://discourse.threejs.org/t/how-to-create-a-scene-like-this/51835/7 "2023-05-25T06:14:22Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![bazylevnik0](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/bazylevnik0/32/52631_2.png) [@bazylevnik0](https://discourse.threejs.org/u/bazylevnik0)\
**Post date:** [May 25, 2023, 6:34am UTC](https://discourse.threejs.org/t/how-to-create-a-scene-like-this/51835/8 "2023-05-25T06:34:12Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![phil\_crowther](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/phil_crowther/32/64202_2.png) [@phil\_crowther](https://discourse.threejs.org/u/phil_crowther)\
**Post date:** [May 25, 2023, 7:06am UTC](https://discourse.threejs.org/t/how-to-create-a-scene-like-this/51835/9 "2023-05-25T07:06:42Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Umbawa\_Sarosong](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/umbawa_sarosong/32/30107_2.png) [@Umbawa\_Sarosong](https://discourse.threejs.org/u/Umbawa_Sarosong)\
**Post date:** [May 25, 2023, 7:50am UTC](https://discourse.threejs.org/t/how-to-create-a-scene-like-this/51835/10 "2023-05-25T07:50:28Z")

</div>

All from Ready Player Me,

---

<div class="post-metadata">

**Author:** ![PavelBoytchev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pavelboytchev/32/38639_2.png) [@PavelBoytchev](https://discourse.threejs.org/u/PavelBoytchev)\
**Post date:** [May 25, 2023, 8:10am UTC](https://discourse.threejs.org/t/how-to-create-a-scene-like-this/51835/11 "2023-05-25T08:10:38Z")

</div>

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

[https://codepen.io/boytchev/full/vYVPXxX](https://codepen.io/boytchev/full/vYVPXxX)

[![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/6/e/6e8eada8ef4b6dc45af8e0c2cf26f8a9c0001068.jpeg)](https://codepen.io/boytchev/full/vYVPXxX)

---

<div class="post-metadata">

**Author:** ![hofk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hofk/32/44944_2.png) [@hofk](https://discourse.threejs.org/u/hofk)\
**Post date:** [May 25, 2023, 6:57pm UTC](https://discourse.threejs.org/t/how-to-create-a-scene-like-this/51835/12 "2023-05-25T18:57:18Z")

</div>

> [@YugoAmaryl46](#):
>
> … a scene like this …

Maybe you can use something from the beginner example?  
See from the [Collection of examples from discourse.threejs.org](https://discourse.threejs.org/t/collection-of-examples-from-discourse-threejs-org/4315)

[BeginnerExample](https://hofk.de/main/discourse.threejs/BeginnerExample/BeginnerExample.html)

---

<div class="post-metadata">

**Author:** ![YugoAmaryl46](https://avatars.discourse-cdn.com/v4/letter/y/c37758/32.png) [@YugoAmaryl46](https://discourse.threejs.org/u/YugoAmaryl46)\
**Post date:** [May 29, 2023, 6:28am UTC](https://discourse.threejs.org/t/how-to-create-a-scene-like-this/51835/13 "2023-05-29T06:28:18Z")

</div>

Great example!

---

<div class="post-metadata">

**Author:** ![YugoAmaryl46](https://avatars.discourse-cdn.com/v4/letter/y/c37758/32.png) [@YugoAmaryl46](https://discourse.threejs.org/u/YugoAmaryl46)\
**Post date:** [May 29, 2023, 6:31am UTC](https://discourse.threejs.org/t/how-to-create-a-scene-like-this/51835/14 "2023-05-29T06:31:03Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![YugoAmaryl46](https://avatars.discourse-cdn.com/v4/letter/y/c37758/32.png) [@YugoAmaryl46](https://discourse.threejs.org/u/YugoAmaryl46)\
**Post date:** [May 29, 2023, 6:34am UTC](https://discourse.threejs.org/t/how-to-create-a-scene-like-this/51835/15 "2023-05-29T06:34:58Z")

</div>

Danke für das Beispiel

---

<div class="post-metadata">

**Author:** ![phil\_crowther](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/phil_crowther/32/64202_2.png) [@phil\_crowther](https://discourse.threejs.org/u/phil_crowther)\
**Post date:** [May 29, 2023, 7:59am UTC](https://discourse.threejs.org/t/how-to-create-a-scene-like-this/51835/16 "2023-05-29T07:59:28Z")

</div>

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