CODEWITHSUNDEEP
javascriptthree.js
Alex
Alex

Reputation: 44305

How to scale a three.js sprite?

I am trying to display a sprite in three on javascript and make it bigger. I tried the following:

THREE.ImageUtils.crossOrigin = '';
var spriteMap = THREE.ImageUtils.loadTexture( "https://cdn.iconscout.com/icon/premium/png-256-thumb/airplane-1993284-1683707.png" );
var spriteMaterial = new THREE.SpriteMaterial( { map: spriteMap } );
var sprite = new THREE.Sprite( spriteMaterial );
sprite.width = 10;
sprite.height = 10;
scene.add( sprite );

and

THREE.ImageUtils.crossOrigin = '';
var spriteMap = THREE.ImageUtils.loadTexture( "https://cdn.iconscout.com/icon/premium/png-256-thumb/airplane-1993284-1683707.png" );
var spriteMaterial = new THREE.SpriteMaterial( { map: spriteMap } );
var sprite = new THREE.Sprite( spriteMaterial );
sprite.size = THREE.Vector3(10,10,10);
scene.add( sprite );

but the sprite was very very tiny in the middle of the browser window. I saw no error on the console.

What am I doing wrong?

Upvotes: 1

Views: 3782

Answers (2)

Alex
Alex

Reputation: 11

If you want the scaling to happen based on the camera distance, you need to add a parameter to your material variable:

sizeAttenuation: false

Like this:

var material = new THREE.SpriteMaterial({
map: map,
sizeAttenuation: false});

This will make your sprite big when to camera is far away and smaller when the camera gets closer to it (based on the sprite.scale.set() values).

Upvotes: 1

Mugen87
Mugen87

Reputation: 31026

Sprite.size does not exist. Try to modify Sprite.scale instead. Check out the following live example:

var camera, scene, renderer;

init();
animate();

function init() {

  camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10);
  camera.position.z = 5;

  scene = new THREE.Scene();

  var loader = new THREE.TextureLoader();
 
    var map = loader.load("https://cdn.iconscout.com/icon/premium/png-256-thumb/airplane-1993284-1683707.png");
  var material = new THREE.SpriteMaterial({
    map: map
  });
  var sprite = new THREE.Sprite(material);
  sprite.scale.set( 5, 5, 1 );
  scene.add(sprite);

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

}

function animate() {

  requestAnimationFrame(animate);
  renderer.render(scene, camera);

}
body {
    margin: 0;
}
canvas {
    display: block;
}
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.js"></script>

Upvotes: 2

Related Questions