错误设置颜色

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++;
    }

方块已正确定位。问题是在设置颜色时。我得到：

Uncaught TypeError: Cannot read property 'color' of undefined

Answer 1

for ... in 循环迭代对象的 keys 所以 tile 实际上是 index 而不是对象在数组中，使用正常的 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

错误设置颜色

Error setting Color

javascript

three.js