Question

忍受我，我是一个完整的javascript和三个newby。我在这里有一些代码，我试图在对象列表中推送网格：

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 );

}

所有网格都是不同大小的矩形。大小存储在size_list中。我只使用一个geometry对象，因为如果我使用更多的程序崩溃。我尝试通过移动

为每个网格创建一个几何对象

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循环，但浏览器无法处理它。

所以我在创建网格并将其推送到对象数组之前修改geometry对象的属性。我记录了修改后的值，以便我可以看到它们在打印好值时正确更改。

然而，最后，在显示场景时，所有网格仍然具有第一行代码片段中定义的（1,50,1）维度。我一直在阅读有关javascript的内容，我认为问题就像处理副本和引用一样，但我无法理解这种行为。

如何在不必为每个网格物体创建新的geometry对象的情况下有效地修改网格物体？为什么这种方法不起作用？

Answer 1

您可以通过设置其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 ] );

然后在你的循环中：

{{1}}

three.js r.73

推送网格时有三种奇怪的javascript行为

1 个答案: