Wie zentriert position.set ein Canvas-Bild?

Question

Hey Jungs, ich war gerade gehen durch diese Three.js Beispiel HERE und für einige Zeit um mit dem Beispiel nach dem Spielen, sah ich die unten Funktion:

// NOTE :: the below function, helps in positioning the 5 static red dots 
      function updateHUDSprites() { 

       var width = window.innerWidth/2; 
       var height = window.innerHeight/2; 

       var material = spriteTL.material; 

       var imageWidth = material.map.image.width/2; 
       var imageHeight = material.map.image.height/2; 

       // NOTE :: the below lines, helps in positioning the 5 static red dots 
       spriteTL.position.set(- width + imageWidth, height - imageHeight, 1); // top left 
       spriteTR.position.set( width - imageWidth, height - imageHeight, 1); // top right 
       spriteBL.position.set(- width + imageWidth, - height + imageHeight, 1); // bottom left 
       spriteBR.position.set( width - imageWidth, - height + imageHeight, 1); // bottom right 
       spriteC.position.set(0, 0, 1); // center 

      } 

dieser Funktion werden alle helfen Position ist im Grunde die 5 pngs , ich habe mit dem obigen Code ein bisschen rumgespielt, aber ich verstehe immer noch nicht, wie die Zentrierung funktioniert, zum Beispiel der folgende Zeile:

spriteC.position.set(0, 0, 1); // center 

Durch die Zusammenarbeit mit dem Beispiel ein wenig herumspielen, ich erkennen, dass Die obige Codezeile war tatsächlich das zentrale Bild positionierend, verstehe ich einfach nicht die Werte, die an die Funktion position.set() übergeben werden. wenn jemand nur erklären könnte, wie spriteC.position.set(0, 0, 1); das Bild wirklich zentriert, wäre es großartig.

Answer 1

es hängt davon ab, wie die Kamera positioniert ist

Sprites werden unter Verwendung des orthographischen Kamera renderer.render(sceneOrtho, cameraOrtho); gemacht, und es hat Position (0,0,10), am Ursprung (0,0,0)

nichts am Ursprung oder entlang einer Linie parallel zu der Z-Achse schaut (unser Sprite mit (0,0,1)) scheint in der Mitte zu sein, negative x Koordinate bewegt das Objekt nach links, positiv nach rechts und die gleiche Sache mit y