我对three.js很陌生,它是一个3D地球仪,周围有卫星精灵在移动。
问题是-sprite图像在加载纵横比被忽略后会失真,初始比例约为其大小的5倍。我正在手动缩小比例,但当我手动为每个轴选择数字时,图像会失真,例如。 satelliteSprite.scale.set(0.14, 0.075, 1);
satelliteSprite.scale.set(0.14, 0.075, 1);
我的卫星图像:
我有两个问题:
AxesHelper
起初的 <img> vs缩小比例的雪碧 (0.1, 0.1, 0.1) :
<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;
1)创造 广场 具有透明度的PNG纹理,因此不会拉伸/扭曲,现在可以为每个轴均匀缩放,例如。 satelliteSprite.scale.set(0.08, 0.08, 0.08)
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;