在three.js/proctree.js中正确缩放纹理

为这个模糊的标题道歉，我不知道如何描述我的问题

我试图用three.js创建一个非常酷的森林。该库似乎创建了树干和主干的三维模型，然后为树叶（或“细枝”）添加了简单的平面纹理

从近距离看，生成的树看起来非常漂亮，但当你缩小时，树叶几乎完全消失了。这是一个问题，因为我正试图创建一个稠密的森林。请参阅以下两个屏幕抓图（或）：

有没有办法防止叶子变得非常像素化，从远处看很薄？或者，换一种说法，一个人怎样才能创造出从远处看和近距离看一样茂密的好看的叶子呢

使用的材质如下所示：

this.twigMaterial = new THREE.MeshStandardMaterial({
  color: this.config.twigColor,
  roughness: 1.0,
  metalness: 0.0,
  map: this.textureLoader.load('assets/twig-1.png'),
  alphaTest: 0.9
});

---

你的问题听起来很相似

我很确定更小分辨率的mipmap（当你缩小时）正在混合你的叶子纹理并改变

alphaTest

阈值所比较的alpha值。距离越远，纹理的更多区域被视为“透明”

可以按如下方式修改纹理属性以禁用mipmap：

var texture = this.textureLoader.load('assets/twig-1.png');
texture.minFilter = THREE.LinearFilter;

this.twigMaterial = new THREE.MeshStandardMaterial({
  color: this.config.twigColor,
  roughness: 1.0,
  metalness: 0.0,
  map: texture,
  alphaTest: 0.9
});

---

然而，这可能会给你的叶子一个别名的外观。或者，您也可以创建自己的，并将它们作为数组传递到纹理中，以获得更自定义的外观。

非常感谢！调整minFilter可以解决视觉细化的问题，不过正如您所注意到的，在别名方面也存在一些问题。但这应该能帮助我找到一个解决方案——这是我不太熟悉的术语（mipmap、过滤器、alphaTests…）