如何在 ThreeJS 中将坐标原点设置为左上角而不是中心？答案

【问题标题】：How to set coordination origin to top left instead of center center in ThreeJS?如何在 ThreeJS 中将坐标原点设置为左上角而不是中心？
【发布时间】：2021-06-05 10:44:53
【问题描述】：

当您在 ThreeJS 中将任何对象添加到场景中时，默认情况下它位于中心。所以它的位置是（0,0,0），尽管它是在中心绘制的。当坐标为（0,0,0）时，我需要在左上角设置默认位置。这是一个非常简单的示例，显示默认坐标为中心中心： https://jsfiddle.net/qy3572dt/

    
    var scene = new THREE.Scene();
    let camera = new THREE.PerspectiveCamera( 80, window.innerWidth / window.innerHeight, 1, 1000 );
    camera.position.set( 0, 0, 50 );
    
    
    
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    
    document.body.appendChild( renderer.domElement );
    
    
    
    const sprite  = new THREE.Sprite( new THREE.SpriteMaterial( { color: 'red' } ) );
    sprite.position.set(0,0,1);
    scene.add( sprite );
    
    camera.position.z = 5;
    
    var animate = function () {
        requestAnimationFrame( animate );
        renderer.render( scene, camera );
    };
    
    animate();

【问题讨论】：

好吧，如果你只需要设置左上角的位置，sprite.position.set 接受它的位置向量到本地。例如。 This fiddle。除非您想设置边界并将其放在现有 FOV 的最左上角，否则需要进一步调整。
你看你在这个语句中使用了-25：sprite.position.set(-25, 10, 0);这意味着坐标原点不是左上角而是中心。我正在寻找的是 (0,0,0) 在最左上角而不是在中心。谢谢

标签： three.js

【解决方案1】：

由于您正在使用精灵，只需更改 Sprite.center。

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(80, window.innerWidth / window.innerHeight, 0.1, 10);
camera.position.z = 5;

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const sprite = new THREE.Sprite(new THREE.SpriteMaterial({
  color: 'red'
}));
sprite.position.set(0, 0, 1);
sprite.center.set(0, 1);
scene.add(sprite);

scene.add(new THREE.AxesHelper());

renderer.render(scene, camera);

body {
      margin: 0;
}

&lt;script src="https://cdn.jsdelivr.net/npm/three@0.126.1/build/three.js"&gt;&lt;/script&gt;

【讨论】：

谢谢@Mugen87。但它仍然绘制在中心。我需要把它画在左上角
抱歉，这不是真的。如果您运行代码 sn-p，则 (0,0) 坐标现在位于左上角。您介意更详细地解释您的预期结果吗？