0
在Three.js中,我有一個奇怪的問題,幾何圖形很垂直。Three.js幾何形狀拉伸?
我在動態加載圖片,並創建一個planeGeometry以將其放置在場景中。
畫面排在196×190,並且使用了兩功能的功率我們以前用於Away3D中縮放圖像以2的冪這種蛔蟲在512×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;
}
如何在感激地接受正常的大小得到完整的圖像任何線索!