2014-08-29 118 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);