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

Question

当您将任何 object 添加到 ThreeJS 中的场景时，默认情况下它位于中心。 所以它的 position 是 (0,0,0) 尽管它被绘制在中心。 当坐标为（0,0,0）时，我需要在左上角设置默认的 position。 这是一个非常简单的示例，显示默认坐标为中心中心： 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();

Answer 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; }

 <script src="https://cdn.jsdelivr.net/npm/three@0.126.1/build/three.js"></script>