加载后Sprite缩放并变形-Three.js

Question

我对three.js还是很陌生，他在3D地球周围移动了卫星精灵。

问题是-加载后子画面图像会失真-忽略宽高比，初始比例约为其大小的5倍。我正在手动缩小尺寸，但是当我为每个轴手动选择数字时图像会失真。 satelliteSprite.scale.set(0.14, 0.075, 1);

我的卫星图像：

我在这里有2个问题：

1. 如何正确加载它，以便至少长宽比为 受尊重？
2. 当我将AxesHelper添加到sprite时，为什么它不与图像平面对齐？

原始<img>与缩小后的精灵(0.1, 0.1, 0.1)：

我在这里的卫星，地球，照相机代码：

//.........SPRITE
var satelliteTexture = new THREE.TextureLoader().load('assets/img/sections/section-astronaut/small-satellite.png');
var satelliteSprite = new THREE.Sprite(new THREE.SpriteMaterial({
  map: satelliteTexture,
  color: 0xffffff,
  fog: false
}));
satelliteSprite.scale.set(0.14, 0.075, 1);
satelliteSprite.position.setFromSpherical(new THREE.Spherical().set(0.565, Math.PI * 2 - 0.9, Math.PI * 2 + 0.5));
earth.add(satelliteSprite);
window['satelliteSprite'] = satelliteSprite;

var axesHelperSatelliteSprite = new THREE.AxesHelper(5);
satelliteSprite.add(axesHelperSatelliteSprite);

//..........CAMERA
var camera = window['camera'] = new THREE.PerspectiveCamera(45, width / height, 0.01, 100);
camera.position.z = 1.5;

//..........EARTH
var earth = window['earth'] = new THREE.Mesh(
  new THREE.SphereGeometry(earthRadius, earthSegments, earthSegments),
  new THREE.MeshPhongMaterial({
    map: THREE.ImageUtils.loadTexture('assets/img/sections/section-astronaut/2_no_clouds_4k.jpg'),
    bumpMap: THREE.ImageUtils.loadTexture('assets/img/sections/section-astronaut/elev_bump_4k.jpg'),
    bumpScale: 0.002,
    specularMap: THREE.ImageUtils.loadTexture('assets/img/sections/section-astronaut/water_4k.png'),
    specular: new THREE.Color(0x111111),
    wireframe: false
  })
);
earth.rotation.x = 0.4;
earth.rotation.y = -1.95;

Answer 1

1）创建具有透明度的正方形 png纹理，这样它就不会拉伸/变形，现在您可以为每个轴均等地缩放，例如satelliteSprite.scale.set(0.08, 0.08, 0.08)

2）为纹理设置滤镜和各向异性

  satelliteTexture.anisotropy = renderer.capabilities.getMaxAnisotropy();       
  satelliteTexture.minFilter = satelliteTexture.magFilter = THREE.LinearFilter;
  satelliteTexture.minFilter = satelliteTexture.magFilter = THREE.NearestFilter;