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;
}
如何在感激地接受正常的大小得到完整的图像任何线索!