Sprite Center moved

scale

by Lukasz Guminski

HTML

<script src="https://cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>

CSS

body {
  overflow: hidden;
  margin:0;
  padding: 0;
}

JavaScript

var camera, scene, renderer, controls;
var planets = [];
var timestamp = 0;
var scaleVector = new THREE.Vector3();

init();
animate();

function init() {

  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
  camera.position.set(0, 100, 175);

  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  controls = new THREE.OrbitControls(camera, renderer.domElement);

  var createPlanet = function(name, radius, orbit, speed) {
    var geom = new THREE.SphereGeometry(radius, 32, 16);
    var mat = new THREE.MeshBasicMaterial({
      color: Math.random() * 0xFFFFFF,
      //wireframe: true
    });
    var planet = new THREE.Mesh(geom, mat);
    planet.userData.orbit = orbit;
    planet.userData.speed = speed;
  
    var canvas = document.createElement('canvas');
    canvas.width = 256;
    canvas.height = 256;
    var ctx = canvas.getContext("2d");
    ctx.font = "44pt Arial";
    ctx.fillStyle = "white";
    ctx.textAlign = "center";
    ctx.fillText(name, 128, 44);
    console.log(ctx);
    var tex = new THREE.Texture(canvas);
    tex.needsUpdate = true;
    var spriteMat = new THREE.SpriteMaterial({
      map: tex
    });
    var sprite = new THREE.Sprite(spriteMat);
    sprite.center.set( 0.1,1);
    planet.add(sprite);
    planets.push(planet);
    scene.add(planet);
  
    //orbit
    var shape = new THREE.Shape();
    shape.moveTo(orbit, 0);
    shape.absarc(0, 0, orbit, 0, 2 * Math.PI, false);
    var spacedPoints = shape.createSpacedPointsGeometry(128);
    spacedPoints.rotateX(THREE.Math.degToRad(-90));
    var orbit = new THREE.Line(spacedPoints, new THREE.LineBasicMaterial({
      color: "yellow"
    }));
    scene.add(orbit);
  };

  createPlanet("Mercury", 1, 10, 5);
  createPlanet("Venus", 1.5, 20, 3);
  createPlanet("Earth", 2, 30, 4);
  createPlanet("Mars", 1.8,...