Playing with three.js
-
Part of our roadmap is to have this ability: http://nfcring.com/threejs/
So far so good! Will do a blog post about how quick it was to get this up and the challenges we faced/are facing. Happy to see pull requests with additional polish :)
-
Looks really great! It did run laggy, but it very well have been my PC, it's not up to date. Would the final script allow for customizing the ring view for inlays, ring size, and color?
-
Awesome, works very well on my GTX 470 graphics card. Are you going to make an alpha sized one as well? (I am really hoping that the alpha size goes up for sale soon because I would love to buy one!)
-
@LoganFive yea, that's exactly the plan buddy :)
@lostboardmayhem Yea, should be a walk in the park once the classic size one is made :)
-
Managed to get UV Mapping working and posted a tutorial up on my youtube.
You can now see the inlay: http://nfcring.com/threejs/
-
hmm... lighting is weird. are the light sources fix or are they rotated as the ring is? because the transparent inlay is currently a bit bright and the black one is very dark.
-
Looks very nice, the black inlay comes out looking slightly more 'satin' finished than you expect from seeing the transparent inlay but it's otherwise awesome.
-
@Lafunamor said:
hmm... lighting is weird. are the light sources fix or are they rotated as the ring is? because the transparent inlay is currently a bit bright and the black one is very dark.
Yeah it looks like the lights rotate with the ring, because looking at the transparent inlay front-on you see three light spots and they move when you rotate the ring. Also means looking at the sides of the ring one side appears dark when it's on the right and other side looks bright when it's on the right. The environment map also moves around with the rotation.
It's a bit weird! A more neutral environment map would help to show the ring better, currently the titanium looks either orange or dark/black depending on which bit of env map is showing. People probably aren't interested in some building. -
@shama Any chance of some help on how to sort it please? I'm a noob to three.js so really guessing as I go along!
https://github.com/mclear/nfcring-web/blob/gh-pages/threejs/index.html#L88 is the specific inlay I'm working on and
https://github.com/mclear/nfcring-web/blob/gh-pages/threejs/index.html#L105 is the lighting
Cheers
-
@johnyma22 Aaaargggh, you're making me look at javascript ... I told you what I thought about that!
-
Try reducing the shininess and reflectivity of the top inlay a bit (line 91 and 93). that should make the inlay better visible.
the specular color of the bottom inlay should be white (line 62). I didn't found it in the code but try to gibe the black material a greater diffuse coefficient so it's better visible.
this should improve the image a bit.I could also be wrong, my computer graphics course was a last year so I don't remember everything.
-
So looking at the code (you bad man you), it seems that yes - what is being rotated is the camera. Which means the lights/envmap will remain pointing at the same place on the model. Kind of like here ... http://threejs.org/examples/webgl_loader_stl.html ... note how the shadows move with the objects, and the dark part of the meshes is always the dark part.
It isn't so obvious on your ring version though because there isn't a background/floor and so no shadows cast to get reference.
I know nothing about three.js though but assume this is the culprit:
controls = new THREE.OrbitControls(camera);Ideally the controls would rotate the ring model rather than the camera. In that way the fixed light positions would hit different parts of the ring as you moved the ring.
As for the envmap, something really neutral or maybe even just removed would show off the ring better IMHO.
-
Hey guys, I did some more bumping and tweaking. Finally got something I'm happy with :)
What do you guys think?
-
cool. the image of the inlay looks a bit dark though. but it really cool now, great job!
