Как натянуть текстуру jpg на сферу?

Question

[ERomulon]

Создал на vue сайт, создал сцену, сферу и тп. Если сфера MeshPhongMaterial и у нее есть к примеру только color, то все отлично работает. Пробую натянуть на нее текстуру земли в jpg, png - результат никаких ошибок, но сцена пустая. Как правильно загрузить и применить текстуру в формате jpg и подобном? Какие правила и ограничения на сам файл, если они есть?

mounted(){
		let canvas = document.getElementById('myscene');
		let width = window.innerWidth;
		let height = window.innerHeight;
		var mouse = new THREE.Vector2(), INTERSECTED;
		let renderer = new THREE.WebGLRenderer({
			canvas: canvas,
			antialias: true,
			alpha: true
		});

		renderer.setPixelRatio(window.devicePixelRatio > 1 ? 2 : 1);
		renderer.setSize(width, height);
		var camera = new THREE.PerspectiveCamera(40, width / height, 1, 1000);
		let texture = new THREE.TextureLoader().load('../assets/earth-small.jpg');
		//SCENE
		let scene = new THREE.Scene();

		let group = new THREE.Group();
		scene.add(group);
		camera.position.set(0, -150, 50);
		camera.lookAt(10, 20, 30);
		var controls = new OrbitControls(camera, renderer.domElement);

		var light = new THREE.AmbientLight( 0x404040 ); // soft white light
		scene.add( light );

		//BODY
		var geometry = new THREE.SphereGeometry( 25, 32, 32 );
		
		var material = new THREE.MeshBasicMaterial( { map: texture } );
		var sphere = new THREE.Mesh( geometry, material );
		scene.add( sphere );

		let time = 0;
		function Render() {
			time++;
			renderer.render(scene, camera);
			window.requestAnimationFrame(Render);
		}
		Render();

		function onResize() {
			renderer.setSize(window.innerWidth, window.innerHeight);
			camera.aspect = (window.innerWidth / window.innerHeight);
			camera.updateProjectionMatrix();
		}
		window.addEventListener('resize', onResize, false);
	}