position.set 如何使画布图像居中？答案

【问题标题】：How does position.set center a canvas image ?position.set 如何使画布图像居中？
【发布时间】：2016-11-24 12:18:27
【问题描述】：

大家好，我刚刚浏览了这个 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 ); 是如何使图像居中的，那就太好了。

【问题讨论】：

标签： javascript three.js html5-canvas

【解决方案1】：

这取决于相机的位置

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

任何在原点或沿着与 z 轴平行的线的东西（我们的精灵 (0,0,1)）都会出现在中心，负的x 坐标会将对象向左移动，正向向右移动并且相同y的事情

【讨论】：