Isometric Room生成及X、Y轴着色风格匹配问题求助

问题根因 #

• 现有材质分配逻辑仅判断iX坐标的奇偶性，会导致同一X列的所有方块使用相同材质，最终输出竖条纹效果而非目标棋盘格
• 若要匹配参考图的平涂卡通着色效果，还需要额外调整材质和渲染配置

修复后的实现逻辑 #

核心修改材质判断条件，采用X、Z轴坐标之和的奇偶性做判定，即可生成标准交错棋盘格，修改后代码如下：

for(let iX = 0; iX < 10; iX++) {
    for(let iZ = 0; iZ < 10; iZ++) {
        // 两个轴坐标相加判断奇偶，实现棋盘格交错效果
        material = (iX + iZ) % 2 == 0 ? material1 : material2;
        
        var box = generateBox(1, 0.1, 1, material);
        box.name = `box-${iX}-${iZ}`;
        box.position.set(iX, box.geometry.parameters.height / 2, iZ);
        room.add(box);
    }
}

卡通着色风格适配（匹配参考图效果） #

如果要达到参考图的平涂无渐变、硬边缘的视觉效果，可以做以下调整：

• 材质选择MeshToonMaterial替代标准材质，开启flatShading: true关闭光照插值，得到无渐变的平涂色块
• 关闭场景内的环境光遮蔽、抗锯齿柔化效果
• 若需要实现边缘描边，可以给每个方块额外套一个稍大尺寸的黑色背面材质，也可使用渲染器的轮廓后处理能力实现

内容的提问来源于stack exchange，提问作者C3010