加载后精灵缩放和扭曲 - Three.js答案

【问题标题】：Sprite scaled and distorted after loading - Three.js加载后精灵缩放和扭曲 - Three.js
【发布时间】：2019-02-06 15:20:45
【问题描述】：

我对three.js 很陌生，正在构建3d 地球，卫星精灵在它周围移动。

问题是 - 加载后精灵图像变形 - 纵横比被忽略，初始比例约为其大小的 5 倍。我正在手动缩小比例，但是当我为每个轴手动选择数字时，图像会失真，例如satelliteSprite.scale.set(0.14, 0.075, 1);

我的卫星图：

我有两个问题：

如何正确加载它，以便至少宽高比是尊重？
当我将AxesHelper 添加到精灵时，为什么它没有与图像平面对齐？

原始<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;

【问题讨论】：

标签： three.js

【解决方案1】：

1) 创建具有透明度的 square 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;

【讨论】：