• Login
    • Search
    • [[global:header.recent]]
    • [[global:header.tags]]
    • [[global:header.popular]]
    • [[global:header.groups]]
    • [[global:header.search]]

    Playing with three.js

    Other NFC Ring Related stuff
    6
    14
    11860
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • johnyma22
      johnyma22 NFC Ring Team last edited by

      Managed to get UV Mapping working and posted a tutorial up on my youtube.

      You can now see the inlay: http://nfcring.com/threejs/

      1 Reply Last reply Reply Quote 1
      • Lafunamor
        Lafunamor Community Helper last edited by

        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.

        S 1 Reply Last reply Reply Quote 0
        • Lokki
          Lokki Community Helper last edited by

          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.

          1 Reply Last reply Reply Quote 0
          • S
            shama @Lafunamor last edited by

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

            1 Reply Last reply Reply Quote 0
            • johnyma22
              johnyma22 NFC Ring Team last edited by

              @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

              S 1 Reply Last reply Reply Quote 0
              • S
                shama @johnyma22 last edited by

                @johnyma22 Aaaargggh, you're making me look at javascript ... I told you what I thought about that!

                1 Reply Last reply Reply Quote 1
                • Lafunamor
                  Lafunamor Community Helper last edited by

                  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.

                  1 Reply Last reply Reply Quote 0
                  • S
                    shama last edited by

                    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.

                    1 Reply Last reply Reply Quote 1
                    • johnyma22
                      johnyma22 NFC Ring Team last edited by

                      Hey guys, I did some more bumping and tweaking. Finally got something I'm happy with :)

                      http://nfcring.com/threejs

                      What do you guys think?

                      1 Reply Last reply Reply Quote 0
                      • Lafunamor
                        Lafunamor Community Helper last edited by

                        cool. the image of the inlay looks a bit dark though. but it really cool now, great job!

                        1 Reply Last reply Reply Quote 0
                        • First post
                          Last post