在 Three.JS 中处理大量唯一对象答案

【问题标题】：Handling large amounts of unique objects in Three.JS在 Three.JS 中处理大量唯一对象
【发布时间】：2018-09-26 20:42:39
【问题描述】：

我在项目开发过程中遇到了障碍。我试图在独特尺寸和形状的物体上使用各种类型的 phong 材料来达到一个水平。默认情况下，Three.JS 以一种拉伸方式处理纹理，当呈现在不完全 1:1:1 比例大小的网格上时，它们会变得难以忍受，这意味着一切都必须是立方体或完美大小的球体才能看起来正常.为了避免这个问题，您可以使用重复选项加载纹理。这种方法的问题在于，对于 100 多个不同大小的对象，这些重复选项对于每种材料、每个对象都必须不同。这意味着加载数百个纹理或用克隆填充内存。后者并没有太困扰我。我需要帮助，试图弄清楚如何处理具有独特几何形状和独特颜色贴图、发射贴图、高光贴图、aomaps、凹凸贴图和法线贴图的大量独特对象。如何使具有基于材料的独特重复设置的 1 个纹理变得可行？即使我已经解决了这个问题，我也必须为每种材料重复 5+ 纹理。 5*~100 = ~500 纹理/纹理变化。这是个问题。至少 100 个，最多 800 个。

对此我非常绝望，如果我无法处理批量对象，我正在考虑切换到 Unity 或 UE4。

我愿意从第 1 步开始完全修改我的代码。这没什么特别的，而且非常粗糙。但我想展示我在 THREE.js 中处理对象的方式。这不是我的完整程序（显然），它只是我如何做事的一个例子。

var energyRockMaterial =
  new THREE.MeshPhongMaterial(
    {
        envMap: scene.background,
        map: new THREE.TextureLoader().load("energyrock.jpg"),
        normalMap: new THREE.TextureLoader().load("energyrocknormal.jpg"),
        //bumpMap: new THREE.TextureLoader().load("energyrockbump.jpg"),
        aoMap: new THREE.TextureLoader().load("energyrockao.jpg"),
        specularMap: new 
        THREE.TextureLoader().load("energyrockspecular.jpg"),
        emissiveMap: new 
        THREE.TextureLoader().load("energyrockemissive.jpg"),
        color:"#ffffff",
        emissive:"#bb00bb",
        specular:"#000000",
        reflectivity:1,
    });
var energyRockGeometry = new THREE.BoxBufferGeometry(1,1,1);
var energyRockMesh = new 
THREE.Mesh(energyRockGeometry,energyRockMaterial);
scene.add(energyRockMesh)

对有问题的缩进表示歉意，HTML 表单不喜欢我的标签，我不得不把它弄出来。

感谢您的回复。

【问题讨论】：

试试这个模式：mesh.onBeforeRender = function() { this.material.map.repeat.x = this.userData.repeatx; }; 这样克隆出来的材质可以共享同一个纹理。
你的整个场景是由立方体和原始形状组成的吗？还是从外部文件加载模型？
我正在使用原始形状，我不打算更改它。

标签： javascript three.js

【解决方案1】：

首先，阅读UV mapping。简而言之，UV 是您分配给顶点的纹理坐标。它们告诉渲染器纹理上的哪个点映射到网格上的哪个顶点，渲染器处理其余部分，将纹理映射到三角形上。

THREE.js 通过 Geometry 和 BufferGeometry 支持 UV。（在我看来，后者更容易使用。）

适用于您的情况的好处是您可以将单一材料用于多种形状。具有独特 UV 的形状将唯一地映射纹理。换句话说，具有一组 UV 的立方体可能与具有不同 UV 的另一个立方体具有相同的材质，并且它们各自会根据自己的 UV 映射纹理。

其次，可能与您的情况不太相关，您可以考虑使用texture atlas。这是一个包含多个纹理的大型图像文件。即使您所有的形状都有不同的纹理，您也可以（可能）加载单个图像文件，将其放入单个材质中以供网格共享，然后它们将使用其独特的 UV 映射到与它们相关的纹理部分。

【讨论】：