Javascript Three.js:值正确时,屏幕上的对象定位不准确
我正在构建一排不同形状的矩形。它们都有不同的宽度和高度,但我已经从json对象(整数)中获得了它们 现在我需要把它们放在同一个高度上,同时保持比例,然后把它们一批一批地排列在一起。例如:Javascript Three.js:值正确时,屏幕上的对象定位不准确,javascript,three.js,Javascript,Three.js,我正在构建一排不同形状的矩形。它们都有不同的宽度和高度,但我已经从json对象(整数)中获得了它们 现在我需要把它们放在同一个高度上,同时保持比例,然后把它们一批一批地排列在一起。例如: var data = [{width:724,height:234},{width:345,height:726},{width:853,height:320}]; var xpos = 0; for (var i=0, s=data.length; i<s; i+=1) { var mater
var data = [{width:724,height:234},{width:345,height:726},{width:853,height:320}];
var xpos = 0;
for (var i=0, s=data.length; i<s; i+=1) {
var materialBlack = new THREE.MeshPhongMaterial({
ambient: 0x1b1b1b,
color: 0x1b1b1b,
overdraw: false,
side: THREE.DoubleSide
});
var geometry = new THREE.PlaneGeometry( 1, 1, 1, 1 );
var object = new THREE.Mesh( geometry, materialBlack );
var scaleFactor = 300/data[i].height; // 300 units height for all
var scaledWidth = data[i].width*scaleFactor;
var scaledHeight = data[i].height*scaleFactor;
xpos += i==0 ? 0 : scaledWidth;
object.scale.set( scaledWidth, scaledHeight, 1);
object.position.set( xpos, 0, 0 );
scene.add( object );
}
var data=[{width:724,height:234},{width:345,height:726},{width:853,height:320}];
var-xpos=0;
对于(var i=0,s=data.length;i我认为问题在于PlaneGeometry
的大小是2,而您希望它是1
试试这个:
var geometry = new THREE.PlaneGeometry( 0.5, 0.5, 1, 1 );
此外,您可以只创建一个几何体和材质,并在每个网格中重复使用它们。我认为问题在于平面几何体的大小是2,而您希望它是1
var width = parseInt( objects[ i ][ "nodeObject" ][ "img_width" ] ) * scaleFactor;
objects[ i ].position.set( xpos + ( width / 2 ), 0, 0 );
xpos += width;
试试这个:
var geometry = new THREE.PlaneGeometry( 0.5, 0.5, 1, 1 );
此外,您可以只创建一个几何体和材质,并在每个网格中重用它们
var width = parseInt( objects[ i ][ "nodeObject" ][ "img_width" ] ) * scaleFactor;
objects[ i ].position.set( xpos + ( width / 2 ), 0, 0 );
xpos += width;
另外,在将来,请尝试提出对他人有帮助的问题
另外,在将来,请尝试问一些对其他人有帮助的问题。你能把它放在一个JSFIDLE上,这样我们就可以看到完整的代码和它是如何工作的吗?问题是我不能给出数据源url,它会加载所有这些图像。也许我可以清理json数据以便发布。这是FIDLE。你会注意到其中的重叠那些闪烁的线条。需要一个webgl浏览器。我只能从jsfiddle加载这一个png…你在哪里把结果记录到控制台?我在你的jsfiddle中没有看到。你可能只是有一个数学错误。哦,对了,它不再在那里了。我会马上更新它。你能把它放到jsfiddle上吗?这样我们就可以看到完整的代码以及我是如何修改的问题是我不能给出数据源url,它会加载所有图像。也许我可以清理json数据以便发布。这是小提琴。你会注意到那些闪烁的线条中的重叠。需要一个webgl浏览器。我只能从JSFIDLE加载这一个png…你在哪里将结果记录到控制台?我不知道在你的JSFIDLE中可以看到这一点。你可能只是有一个数学错误。哦,对了,它不再存在了。我会马上更新它。谢谢你的快速响应!但这只会使它们的大小减少一半。还有,这和小提琴中的一样吗?我正在创建一个单位等于图像像素尺寸的平面。这太奇怪了它们只是有一点重叠,而不是以0.5的比例或其他方式。感谢您的快速响应!但这只会使它们的大小减少一半。而且,这与小提琴中的相同吗?我正在创建一个单位等于图像像素尺寸的平面。它们只是有一点重叠,而不是以0.5的比例或其他方式重叠,这太奇怪了。