I am trying to display a sprite in three on javascript and make it bigger. I tried the following:
JavaScript
x
8
1
THREE.ImageUtils.crossOrigin = '';
2
var spriteMap = THREE.ImageUtils.loadTexture( "https://cdn.iconscout.com/icon/premium/png-256-thumb/airplane-1993284-1683707.png" );
3
var spriteMaterial = new THREE.SpriteMaterial( { map: spriteMap } );
4
var sprite = new THREE.Sprite( spriteMaterial );
5
sprite.width = 10;
6
sprite.height = 10;
7
scene.add( sprite );
8
and
JavaScript
1
7
1
THREE.ImageUtils.crossOrigin = '';
2
var spriteMap = THREE.ImageUtils.loadTexture( "https://cdn.iconscout.com/icon/premium/png-256-thumb/airplane-1993284-1683707.png" );
3
var spriteMaterial = new THREE.SpriteMaterial( { map: spriteMap } );
4
var sprite = new THREE.Sprite( spriteMaterial );
5
sprite.size = THREE.Vector3(10,10,10);
6
scene.add( sprite );
7
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?
Advertisement
Answer
Sprite.size
does not exist. Try to modify Sprite.scale
instead. Check out the following live example:
JavaScript
1
36
36
1
var camera, scene, renderer;
2
3
init();
4
animate();
5
6
function init() {
7
8
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10);
9
camera.position.z = 5;
10
11
scene = new THREE.Scene();
12
13
var loader = new THREE.TextureLoader();
14
15
var map = loader.load("https://cdn.iconscout.com/icon/premium/png-256-thumb/airplane-1993284-1683707.png");
16
var material = new THREE.SpriteMaterial({
17
map: map
18
});
19
var sprite = new THREE.Sprite(material);
20
sprite.scale.set( 5, 5, 1 );
21
scene.add(sprite);
22
23
renderer = new THREE.WebGLRenderer({
24
antialias: true
25
});
26
renderer.setSize(window.innerWidth, window.innerHeight);
27
document.body.appendChild(renderer.domElement);
28
29
}
30
31
function animate() {
32
33
requestAnimationFrame(animate);
34
renderer.render(scene, camera);
35
36
}
JavaScript
1
6
1
body {
2
margin: 0;
3
}
4
canvas {
5
display: block;
6
}
JavaScript
1
1
1
<script src="https://cdn.jsdelivr.net/npm/three@0.119.1/build/three.js"></script>