Three.js 几何形状拉伸？

Question

我在 Three.js 中有一个奇怪的问题，即几何体在垂直方向上非常拉伸。

我正在动态加载图片，并创建一个 planeGeometry 以将其放置在场景中。

图片的分辨率为 196 x 190，我使用我们之前在 Away3d 中使用的 2 的幂函数将图像缩放为 2 的幂。之前它的分辨率为 512 x 256。

在这种尺寸下，图像根本不会出现，因此必须将其放大以均匀显示。这可能是太大了，部分图像突出了包含全景图像的立方体的一侧。

这张图片是垂直拉伸的，没有显示完整的宽度或高度图像 - 它应该与部分覆盖它的招牌大小相同（这就是它在 Away3d 中所做的）

这是我正在使用的代码：

 function photo(data){

    console.log(data);

    var texture = new THREE.Texture(texture_placeholder);
    var photoMaterial = new THREE.MeshBasicMaterial({
        map: texture,
        overdraw : 0.5
    });

    var image = new Image();
    image.crossOrigin = '';

    image.onload = function() {

        texture.image = this;
        texture.needsUpdate = true;
        texture.repeat.set( 1, 1 );
        texture.mipmaps[ 0 ] = texture.image;
        texture.generateMipmaps = true;

        var w = powerOf2Down(texture.width);
        var scale = w/texture.width;
        var scaledHeight = texture.height * scale;
        var h = powerOf2Up(scaledHeight);

        console.log(w + '/' + h);

        var photoGeom = new THREE.PlaneGeometry( w  , h );
        //photoGeom.scale.normalize().multiplyScalar(0.3);
        var photoMesh = new THREE.Mesh( photoGeom, photoMaterial );

        photo.add( photoMesh );
        scene.add( photo );
    };

    image.src = 'http://cdn.beek.co/' + data.file.realName;



    photo = new THREE.Object3D();
    photo.hotspotData = data;


    photo.position.copy( panTiltToVector( data.pan, data.tilt, data.distance ) );
    photo.rotation.x = data.rotationX != null ? -data.rotationX : 0;
    photo.rotation.y = data.rotationY != null ? -data.rotationY : 0;
    photo.rotation.z = data.rotationZ != null ? -data.rotationZ : 0;
    photo.rotation.y += Math.PI;


    //targetList.push( photo );

}

function powerOf2Down(value)
{
    if(value < 80) 
        return 64;
    else if(value < 150) 
        return 128;
    else if(value < 400) 
        return 256;
    else if(value < 800)
        return 512;

    return 1024;
}

 function powerOf2Up(value)
{
    if(value <= 64) 
        return 64;
    else if(value <= 128) 
        return 128;
    else if(value <= 256) 
        return 256;
    else if(value <= 512)
        return 512;

    return 1024;
}

感谢您提供有关如何以正常尺寸获得完整图像的任何线索！

Answer 1

缩小了错误的比例

        photo.scale.normalize().multiplyScalar(0.1);