javascript - position.set 如何使 Canvas 图像居中？

Question

嘿伙计们，我刚刚浏览了这个 Three.js 示例 HERE 在研究了这个例子一段时间后，我看到了下面的函数:

// 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

            }

这个函数基本上是帮助定位所有 5 个 png，我已经玩了很多上面的代码，但我仍然不明白居中是如何工作的，例如下面的行:

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

通过稍微研究一下这个例子，我意识到上面的代码行实际上是定位中心图像，我只是不明白传递给position.set()函数的值。如果有人可以解释一下 spriteC.position.set( 0, 0, 1 ); 是如何做到的实际上将图像居中，那就太好了。

Answer 1

这取决于相机的放置方式

Sprite 使用正交相机渲染renderer.render( sceneOrtho,cameraOrtho );并且它的位置(0,0,10)，看着原点(0,0,0)

原点处或沿与 z 轴平行的线(我们的 Sprite (0,0,1))的任何物体都将显示在中心，负 x 坐标会将对象向左移动，向右移动正值，与 y

相同