How to set coordination origin to top left instead of center center in ThreeJS?

Question

When you add any object to the scene in ThreeJS it is located in the center by default. so that its position is (0,0,0) although it is drawn in the center. I need to make the default position at top left when coordinates are (0,0,0). Here is a very simple example shows that the default coordinates are center center: 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();

user_5250847 · Answer

Since you are working with sprites, just change 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;
}

How to set coordination origin to top left instead of center center in ThreeJS?

1 Answers