javascript - 设置颜色错误

Question

我是 Three.js 的新手。基本上我想做一个像棋盘这样的东西。我得到了这个:

for( x=-30; x<=50;x=x+10){
        for( y=-30; y<=20;y=y+10 ){
            var TileGeometry = new THREE.PlaneGeometry(5,5);
            var TileMaterial = new THREE.MeshBasicMaterial();
            var Tile = new THREE.Mesh(TileGeometry,TileMaterial);
            //tile.receiveShadow = true
            Tile.rotation.x=-0.5*Math.PI;
            Tile.position.x = x;
            Tile.position.y = 0;
            Tile.position.z = y;
            Tile.castShadow=true;
            scene.add(Tile);
            //whiteTile.material.color.setHex(0x000000);
            tiles.push(Tile);
        }
    }


    for(var tile in tiles){
        if(count%2==0){
            tile.material.color.setHex(0x000000);
            }
        else{
            tile.material.color.setHex(0xffffff);
            }
        count++;
    }

图 block 位置正确。问题出在设置颜色时。我得到:

未捕获类型错误:无法读取未定义的属性“颜色”

Answer 1

for ... in 循环迭代对象的键，因此 tile 实际上是索引而不是数组中的对象，使用普通的 for 循环或 forEach。

for (var i = 0; i < tiles.length; i++)
  tiles[i].material.color.setHex(i % 2 ? 0xffffff : 0);

Read more about for ... in loops on MDN