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?
Advertisement
Answer
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/three@0.119.1/build/three.js"></script>