Three.js: Three.js logo usage, guidelines

There is no official logo :/

Well I think that's a good opportunity to do that, you should twit about that mrdoob, I think lots of people would be interested in doing something, so we can get a nice logo for Three.js

Well I think that's a good opportunity to do that, you should twit about that mrdoob, I think lots of people would be interested in doing something, so we can get a nice logo for Three.js

That already happened, we couldn't agree on one ;S No logo is better than divisive one.

I tried that already. Didn't work. That's when I learnt that open source methods don't apply to design. Everyone have their own opinion and it comes down to experience and taste.

Open source it's easier with code because it's easy to see what works and what doesn't. In design it's hard to see what works and what doesn't. Even harder to explain why it works and why it doesn't.

Eventually I'll have to be decisive about it and introduce a logo. Some people will like it and some people will hate it.

yeah, everyone has an opinion, I agree that you should just decide on a logo an see what happens.

@mrdoob I would also love to have an official logo so I can use it in the Cinema 4D exporter. (It should have an icon)

I'm a graphic designer by profession so thought I can try to sketch some ideas for you, see if you like something. With design there are both aesthetic and functional aspects, you just need to decide what it should convey. In the end I think you'll recognize the right thing, if it's good enough.

I'd love to hear your thoughts about it so I can tailor make it to your expectations. Please let me know at spohr.david at gmail, if your willing to have a conversation about it. I'd also like to keep the sketches private.

@mrdoob @EskelCz
Hello, we would like to add ThreeJS in our "technology and tools" list, so we created a logo for it (we didn't like the "text as logo" for consistency). MIT license.

https://github.com/Polymole/threejs-logo

This is the three.js logo.

https://docs.google.com/drawings/d/1kVcyy3Ibe_Q98zH0auXK-L8vahBWLBuo1aN7fk5M_FM/edit?usp=sharing

I designed it 2 years ago, but I haven't been able to put it on the official site yet 😅

@mrdoob That's great, I like it. Here are some of my ideas. I agree that triangles are most fitting. :)

There's a little more depth to each of these than it seems but I'll leave it at that.

@mrdoob one thing that might be an issue with your logo is a small version. the triangles get really thin when you scale it down. I'd try a thicker version.
also the angle might not work as well with different compositions, when you have to place the symbol above the text for example. (to make it more compact for example)

@mrdoob As a designer, I love three.js! I think we should build a small team as there are many people want to contribute to designing logo or other stuffs for free. They may have the same passion with me on three.js, and it's more and more necessary to have an official logo.

The logo above you designed is awesome, and I hold the same view as @EskelCz .

1、Triangles is great.
2、Really thin when you scale it down.

So, I can refine it based on your idea, make it more stable, fancy, and popular.
I can help.

I don't personally see the issue with small sizes- it doesn't work as an icon, but looks fine down to quite small sizes.

Here it is scaled to 80px width, it's a little fuzzy but that could be fixed by scaling from the vector file.

Would we need a logo that looks good smaller than this?

@looeee As an icon, it can down to 16px*16px on internet. Such as:

And this favicon doesn't support SVG format.
We know that there are many ways to use it down to different sizes.

There are several issues also confuses me:

1、The rotation.

I test the angle that the logo is rotated about 43.643 degree. Is there have some convincible reason?

2、The division.

Why it's divided by 4? Not simper or more complicated?

3、Stroke width.

Can it be divided fewer and stroked stronger?

As an icon, it can down to 16px*16px on internet.

Yes, I'm aware of that - what I meant was that the logo as is, with the 'three.js' lettering, is not intended as an icon. But I agree it would be useful to have a logo that can adapted for use as an icon. I've done a bit of testing here:

64x64px:

32x32px:

16x16px:

Unfortunately these seem to be having some kind of scaling applied to them here so you can't see clearly here - but it looks to me that down to 32x32 is fine, but 16x16 needs more work.

The original files are here: https://drive.google.com/open?id=0B6LojVT90-hsd3hlWHNSUFJUVmc

1、The rotation.
I test the angle that the logo rotated is about 43.643 degree. Is there have some convincible reason?

It somehow felt right and unique.

2、The division.

Why it's divided by 4? Not simper or more complicated?
Felt sort of unique.

First one is Zelda, and second one is Nuclear 😁

As per icon... I was actually planning on a version with "three" omitted.

I love the rotation, it gives it a lot of personality and uniqueness. But I'd use 2 divisions (3 tris each side), feels more coherent and simpler.

I don't see a problem with the nuclear idea, once it's rotated. In fact, it's cool the idea of threejs as the unified and universal core/nucleus of the 3d web.

I agree with @feiss, I prefer the 2nd one as when I look at it my mind just see the 3 triangles on the sides and then I tends to group them by group of three

:)

I think a 2D logo does not make sense for three.js. You could turn it into a tetrahedron.

@WestLangley not sure if this is the authors intention, but you could interpret mrdoob's version and other variations of the logo as a 3D mesh and cubes. It is better visible with edges removed, fernardojsg version :

@WestLangley the idea of the 2d triangle logo was in part a joke of how... at the end of the day, it's just triangles.

@wrr

https://get.google.com/tango/

I think that the original logo was great, however, it simply needs some adjustments for the positioning, scaling, text placement, and width!

Does feel like it needs text art though...

http://patorjk.com/software/taag/#p=display&f=Dr%20Pepper&t=Three.js

Ever looked at the console when in https://threejs.org/docs/? I did some ascii art some years ago 😅

Yes, that was why I suggested it! I hope we can somehow incorporate that in the logo.

P.S. By the way, I was looking into how you made the global factory, and how you implemented the Object.assignProperty.and things. Could you make a tutorial (or link one)? Because I want to learn how to make a game engine the way you did!

There's already an official logo!

At least according to wikimedia 🤣

https://commons.wikimedia.org/wiki/File:Three.js_logo.png