代码之家  ›  专栏  ›  技术社区  ›  godblessstrawberry

sprite加载后缩放和变形-three.js

  •  0
  • godblessstrawberry  · 技术社区  · 6 年前

    我对three.js很陌生,它是一个3D地球仪,周围有卫星精灵在移动。

    enter image description here

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

    我的卫星图像: enter image description here

    我有两个问题:

    1. 如何正确加载,以便至少达到纵横比 受人尊敬的?
    2. 当我添加 AxesHelper 为什么它不与图像平面对齐?

    起初的 <img> vs缩小比例的雪碧 (0.1, 0.1, 0.1) : enter image description here

    我的卫星、地球、照相机代码:

    //.........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 回复  |  直到 6 年前
        1
  •  0
  •   godblessstrawberry    6 年前

    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;