Personal website - Snowing City

Showcase
1

Hi guys!

There is my personal project built with ThreeJS, I want to add him to the initial screen of https://threejs.org/

The repository: https://github.com/danielbarion/portfolio

I make it public because of: Interest for collaborative coding "jams"?

Thanks to @EliasHasle

6 Likes
2

FYI, you can’t do this by yourself. @mrdoob scans the topics in the showcase category from time to time and then updates the homepage.

1 Like
3

:robot:
‌‌ ‌‌ ‌‌ ‌‌ ‌‌ ‌‌ ‌‌ ‌‌

8 Likes
4

hmm, okays thanks!

This topic in the correctly section ? (showcase category)

Thank you @Mugen87

5

Yes :wink:

1 Like
6

Thank you @Fyrestar :smile:

1 Like
7

Good :slight_smile: I found another sample same your project

3 Likes
8

Yeah!

My project are inspired and based in this codepen. I did a lot of performance improvements and calc correction, I’ve used this code pen as study project (like others) and my personal website is the result; do you want see my source code ? I’ve learned a lot of with this codepen.

Edit: My personal website are build with ReactJS and I have 4 versions of him (focused on GPU, focused on CPU, main thread and web worker).

Edit²: I can select GPU → main thread | GPU → web worker | CPU → main thread | CPU → worker

The currently version are running focused on GPU rendering and in main thread :smile:

2 Likes
9

Did you even take a look at the examples on the three.js homepage? Don’t you see the huge difference in complexity / originality? :thinking: If you’re serious about being a frontend-developer, you must be able to recognize this.

If you want to promote yourself / your service, it was already a very good idea to do a post here. You got the attention! :+1:t2:

10

I think the demo looks quite good. I like that the snow moves naturally in world space, and persists while moving the camera. I would like to propose a few improvements to it, though:

  1. It looks like all the particles move down in a straight line. I think you can make them look more natural by adding a few sine components with random parameters based on x,z position (if your world is y up) (EDIT: actually just based on initial x,y,z position from the attribute, the point being to have independent paths per particle. If regenerating the same random parameters every frame becomes a problem, they can instead be supplied as an extra attribute or two.). Also, you can add a uniform position offset to all the snow particles, that can move with a variable virtual “wind” in JS space.
  2. It looks like the particles repeat the same “animation” every second or so, with particles disappearing and respawning within the view. I think it would be better to start each particle with a vertical offset (+the shared offset) and then position them individually in the vertex shader, according to a time-dependent function, but wrapping the position with the % operator, so that when each particle reaches the bottom it always respawns on the top.
2 Likes
11

Thank you for the suggestions @EliasHasle, in the code pen, if you take a look for a few seconds you can see the snow moving 360Âş and the city (all buildings) are changing his positions, not the camera.

When I started developing my site with codepen I had no video card so it crashed a lot … my phone is from last year and it was also a bit heavy on it. I recalculated the snow particles and put them in a group to maintain visual fidelity (when they hit the ground, I restart their position - well, your suggestions say exactly this, thank you for the improvement suggestion!).

The most point I’ve worked in this study project is the performance in low-end devices. I’m happy with the result lol.

Yeah, my world is y up.

Again, thank you for the suggestions, I liked so much and will try to apply him to this project.

1 Like