Sprite

Text face to camera

by liyuanqiu

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r73/three.min.js"></script>
<script src="//139.196.28.110/OrbitControls.js"></script>

JavaScript

init();

function init() {

    var scene = new THREE.Scene();

    var camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.z = 500;
    scene.add(camera);

    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    
    new THREE.OrbitControls(camera, renderer.domElement);
    
    var axis = new THREE.AxisHelper(1000);
    scene.add(axis);
    
    animate(renderer);

    document.body.appendChild(renderer.domElement);
    
    function animate() {
    		requestAnimationFrame(animate);
    		render(renderer);
		}
    function render() {
        renderer.render(scene, camera);
    }
    
    var loader = new THREE.TextureLoader();
    loader.crossOrigin = 'anonymous';
    loader.load( "http://www.gravatar.com/avatar/7559c015259186d40f7cc3b4a4674bd2/?default=&s=80", function (map) {
      var material = new THREE.SpriteMaterial( { map: map, color: 0xffffff, fog: true } );
      var sprite = new THREE.Sprite( material );
      sprite.applyMatrix(new THREE.Matrix4().set(100, 0, 0, 0, 0, 100, 0, 0, 0, 0, 100, 0, 0, 0, 0, 1));
      sprite.position.set(100, 100, 100);
      scene.add( sprite );
    } );
}