Something Pink (company website)

Demos and projects
1

Hi folks,

My wife and I made a website for our company with Babylon JS. We wanted to say thank you for all the amazing work and a special thanks for the dedication towards the documentation.

Something Pink
Something Pink1960Ă—1960 603 KB

How we did it: we built the models in Blender, baked the procedural textures into smaller sized tileable ones and baked a separate, combined light map. The navigation is custom-coded in Typescript and uses the history API. The content is layered on top by getting the bounding box of the meshes representing the content area. The HTML files are built using a custom Webpack plugin and include the “fallback” HTML for search engines and devices without WebGL support.

Tutorial topic: Make a 3D content website

Tutorials we found helpful:

(Sorry for the broken links, can a mod please fix them? This is a new account and we can only paste 2 links.)

13 Likes
2

cc @PirateJC @thomlucc

3

Looks FANTASTIC! I love the way you built the navigation, feels like we are in your home indeed :rofl:

2 Likes
4

Thank you, this is our virtual home. :smiley:

5

Holly Sh… I want your skills !!!

1 Like
6

This level of details :slight_smile:
image

1 Like
7

Thanks @sebavan ! My wife told me several times when making these: “Someone’s going to notice.”

1 Like
8

very nice , I like the art style and colors also it loads up nice and quick :wink:

A small nitty bit of feedback , When using the 3d view, you should consider using some camera rotation restrictions so users can’t go under the floor ( viewing the model from below the ground (xz) plane.

1 Like
9

Thanks @shaderbytes! We did consider adding those restrictions, but then again, we wanted people to be able to explore the model freely. In fact, it’d be cool to hear some more opinions on this. I wanted to add the restrictions and my wife was on the side of free movement. :stuck_out_tongue_winking_eye:

10

How about Cookie banner on the toilet paper and consent by flushing the toilet :face_with_peeking_eye:

1 Like
11

Thankfully, we managed to avoid that, but if we ever need a cookie banner this is probably the best way to do it. :smiley:

12

yes but that should not mean exploring views that are not presentable. No offence to the opinions of those close to you that you love very very much but Having 360 degrees around the y axis and then 0-90 on the x axis is a very very common practice due to the nature of such 3d models.

eg , this view is not presentable , there is no point in having this viewing angle :

image
image1920Ă—1032 71 KB

13

There are lots of parts that aren’t exactly presentable. Most lightmap parts don’t hold up to close inspection due to the size optimizations we had to make. That button is mainly meant for people who want to see how the sausage is made.

Nevertheless, the next time we update the website, we’ll see if restricting the camera is easily doable without causing problems while panning.

14

i understand :wink: since you say its not a front feature then really its a case of picking a lesser poison , which are now :

• some or other panning concerns
• wierd camera angles

I personally think a end user will run into the weird view angles way before panning and maybe even exclusively! panning is for higher grade 3d viewer users … the rest just rotate the scene , ive seen it in action

panning then becomes an obvious lesser poison.

Anyway , just an opinion, cheers :wink:

1 Like