Question

我在项目开发过程中遇到了麻烦。我试图在各种尺寸和形状的物体上使用各种类型的丁字裤材料来达到一个水平。默认情况下，Three.JS处理纹理的方式会使其拉伸，并且在比例大小不完全为1：1：1的网格上呈现时变得难以忍受，这意味着所有内容都必须是立方体或完美大小的球体才能看起来正常。为避免此问题，可以使用重复选项加载纹理。这种方法的问题在于，对于100多个唯一大小的对象，每种材料，每个对象的重复选项必须不同。这意味着加载数百个纹理或使用克隆填充内存。后者不会太困扰我。我需要帮助来弄清楚如何处理大量具有独特几何形状和独特色彩图，自发光贴图，镜面贴图，异常，凹凸贴图和法线贴图的独特对象。如何使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表单不喜欢我的选项卡，因此我不得不对此一一列举。

感谢您的答复。

Answer 1

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

THREE.js通过Geometry和BufferGeometry支持UV。（我认为后者更易于使用。）

与此相关的一件好事是，您可以将一种材料用于多种形状。具有独特UV的形状将唯一地映射纹理。换句话说，具有一组UV的多维数据集可以与具有不同UV的另一个多维数据集具有相同的材质，并且它们都将根据自己的UV映射纹理。

其次，可能与您的情况不太相关，您可以考虑使用texture atlas。这是一个包含多个纹理的大图像文件。即使您所有的形状都具有不同的纹理，也可以（潜在地）加载单个图像文件，将其放在单一材质中以共享网格，并且它们将使用其唯一的UV映射到与其相关的纹理部分。 / p>

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

1 个答案: