Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/three.js/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 推网格时的三种奇怪行为_Javascript_Three.js - Fatal编程技术网

Javascript 推网格时的三种奇怪行为

Javascript 推网格时的三种奇怪行为,javascript,three.js,Javascript,Three.js,请容忍我,我完全是一个javascript和三个新手。我这里有一段代码,我试图在对象列表中推网格: geometry = new THREE.BoxGeometry( 1, 50, 1 ); for ( var i = 0, l = geometry.faces.length; i < l; i ++ ) { var face = geometry.faces[ i ]; face.vertexColors[ 0 ] = new THREE.Color().setHSL(

请容忍我,我完全是一个javascript和三个新手。我这里有一段代码,我试图在对象列表中推网格:

geometry = new THREE.BoxGeometry( 1, 50, 1 );
for ( var i = 0, l = geometry.faces.length; i < l; i ++ ) {

    var face = geometry.faces[ i ];
    face.vertexColors[ 0 ] = new THREE.Color().setHSL( Math.random() * 0.3 + 0.5, 0.75, Math.random() * 0.25 + 0.75 );
    face.vertexColors[ 1 ] = new THREE.Color().setHSL( Math.random() * 0.3 + 0.5, 0.75, Math.random() * 0.25 + 0.75 );
    face.vertexColors[ 2 ] = new THREE.Color().setHSL( Math.random() * 0.3 + 0.5, 0.75, Math.random() * 0.25 + 0.75 );

}

for ( var i = 0; i < list.length; i=i+2 ) {

    geometry.width = size_list[i];
    geometry.depth = size_list[i+1];

    console.log('geo');
    console.log(geometry.width);
    console.log(geometry.depth);

    material = new THREE.MeshPhongMaterial( { specular: 0xffffff, shading: THREE.FlatShading, vertexColors: THREE.VertexColors } );

    var mesh = new THREE.Mesh( geometry, material );
    mesh.position.x = list[i];
    mesh.position.y = 5;
    mesh.position.z = list[i+1];

    console.log('mesh');
    console.log(mesh.geometry.width);
    console.log(mesh.geometry.depth);

    scene.add( mesh );

    material.color.setHSL( Math.random() * 0.2 + 0.5, 0.75, Math.random() * 0.25 + 0.75 );

    objects.push( mesh );

}
进入第二个for循环,但浏览器无法处理它

因此,在创建网格并将其推送到对象数组之前,我正在修改
几何体
对象的属性。我正在记录修改后的值,以便在打印好的值时看到它们被正确更改

但是,最终,在显示场景时,所有网格的尺寸仍然为(1,50,1),如代码片段的第一行中所定义的。我一直在阅读有关javascript的文章,我认为问题在于它处理副本和引用的方式,但我不能真正理解这种行为


如何有效地修改网格而不必为每个网格创建新的
几何体
对象?为什么这种方法不起作用?

您可以通过设置网格的
scale
属性来缩放网格

使用此模式:

 var geometry = new THREE.BoxGeometry( 1, 1, 1 ); // create once
然后在循环中:

var mesh = new THREE.Mesh( geometry, material ); // share the geometry

mesh.scale.set( width[ i ], height[ i ], depth[ i ] );

three.js r.73

试试这个:创建一次:
var geometry=new three.BoxGeometry(1,1,1)然后在循环中:
mesh.scale.set(宽度[i]、高度[i]、深度[i])这会更改网格尺寸:)。谢谢。你能解释一下为什么第一个版本不起作用吗?我能给你的最好答案是库不是设计成这样的。好的,谢谢。我想可能会有一个更“JavaScript”的答案:p
var mesh = new THREE.Mesh( geometry, material ); // share the geometry

mesh.scale.set( width[ i ], height[ i ], depth[ i ] );