2014-08-29 150 views
0

在Three.js中,我有一個奇怪的問題,幾何圖形很垂直。Three.js幾何形狀拉伸?

我在動態加載圖片,並創建一個planeGeometry以將其放置在場景中。

畫面排在196×190,並且使用了兩功能的功率我們以前用於Away3D中縮放圖像以2的冪這種蛔蟲在512×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; 
} 

如何在感激地接受正常的大小得到完整的圖像任何線索!

回答

0

當時縮減說錯話

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