Question

我在Three.js中遇到一个奇怪的问题，其中几何体是垂直拉伸的。

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

图片以196 x 190的形式出现，我使用了之前在Away3d中使用过的2功能，将图像缩放到2的幂。显然这是在512 x 256处出现。

在此尺寸下，图像根本不显示，因此必须按比例放大甚至显示。这可能是太大了，图像的一部分伸出了保存全景图像的立方体的一侧。

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

stretched

以下是我正在使用的代码：

 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);

Three.js几何形状拉伸？

1 个答案: