Question

好吧，这可能到处都是，因为涉及任何图形时，我几乎都是初学者。因此，我可能在这里误用了一些术语，对此表示抱歉。

如果我尝试实现的目标已经以一种更轻松的方式解决了，我将不胜感激，希望我能提供有关该信息的信息，但我主要希望首先了解此问题。：）

我试图实现的目标：我想为自己想在自己的Vive中建立的3D小世界创建地形。地形（工作时）应允许在其上混合纹理。在这里，我只添加纹理。这就是我目前的问题所在。

几年前，我在XNA中写过类似的文章。我将rbga用作顶点的颜色，并根据每个通道的强度将其混合。因此，每个顶点最多有4个纹理。基于这种记忆和一个模糊的想法，它应该如何工作，我用普通的javascript做到了：

const heightmap2 = [
    [0, 0, 0],
    [1, 0, 0],
    [2, 0, 0],        
    [3, 0, 0],
    
    [0, 0, 1],
    [1, 0, 1],
    [2, .5, 1],        
    [3, 0, 1],
    
    [0, 0, 2],
    [1, 0, 2],
    [2, 0, 2],        
    [3, 0, 2],
    
    [0, 0, 3],
    [1, 0, 3],
    [2, 0, 3],        
    [3, 0, 3],
    
    [0, 0, 4],
    [1, 0, 4],
    [2, 0, 4],        
    [3, 0, 4],
    
    [0, 0, 5],
    [1, 0, 5],
    [2, 0, 5],        
    [3, 0, 5],
];
let mapWidth = 3;
let mapHeight = 5;

let globaltexture = '#chesstexture'; 

// Just did this to "wait" for the dom to load.... I know not ideal, just wip
setTimeout(() => {
    const hmElem = document.getElementById('heightmap');    
    
    for(let i = 0; i < heightmap2.length; i++) {
        
        let row = Math.floor(i / (mapWidth + 1));
        let isLast = row !==  Math.floor((i + 1) / (mapWidth + 1));
        
        // We don't create a last triangle as it would return from the right side to the left side and be reversed.
        if(isLast) continue
        
        if(heightmap2[i][2] % 2 === 0) {
            hmElem.appendChild(createLowerTriangle(i))
            
            // Skip out of border vertices
            if (row === 0 || row >= mapHeight) continue
            hmElem.appendChild(createUpperTriangle(i));
        } else {
            hmElem.appendChild(createUpperTriangle(i));
            // Skip out of border vertices
            if (row === 0 || row >= mapHeight) continue
            
            // These are definately borked as in textures are tilted once any elevation is set...
            hmElem.appendChild(createLowerTriangle(i))
        }
    }
    
}, 10)

function createTriangle(a, b, c) {
    let tri = document.createElement("a-triangle");
    tri.setAttribute('src', globaltexture);
    tri.setAttribute('vertex-a', a);
    tri.setAttribute('vertex-b', b);
    tri.setAttribute('vertex-c', c);
    return tri;
}

function createUpperTriangle(pos) {
    return createTriangle(heightmap2[pos].join(' '),  heightmap2[pos+1].join(' '), heightmap2[pos - mapWidth].join(' '));
}

function createLowerTriangle(pos) {
    return createTriangle(heightmap2[pos + mapWidth + 1].join(' '),  heightmap2[pos+1].join(' '), heightmap2[pos].join(' '));
}

<html>
<head>
  <script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
  <script src="scripts.js"></script>
</head>
<body>
  <a-scene debug>
    <a-assets>
     <img id="chesstexture" src="/assets/textures/chess.jpg">
    </a-assets>
      <a-sky color="#cee8db"></a-sky>
      <a-entity position="0 0 -10" id="heightmap">
      </a-entity>
      <a-entity light="type: ambient; color: #BBB"></a-entity>
    </a-scene>
  </body>
  </html>

这不包括基于顶点颜色或其他任何颜色的混合，它只是一个充满坐标的数组，每个坐标都是三角形的边。

然后将所有这些迭代并添加到dom中。结果是我期望的正确高度图。作为纹理，我创建了一个“棋盘”，每个角都有数字。

像这样：

1 3

7 9

我的问题是，一旦在我的高度图中添加了高程（在任何线条的Y坐标中，数字都简单地大于0）就是它可以正确地定位三角形，但是它也会“旋转”纹理。可悲的是，我不知道它如何对齐。

从技术上讲，我以后还是要删除此“在三角形特征上绘制纹理”，因为无论如何我都要对其进行混合，但这仍然让我很困扰。

我主要想在这里了解如何控制纹理定位。

如果我的解释很难理解，我将在当前图像上添加图像。我用蓝色标记了一个“破碎”的三角形。

A帧中基于三角形的地形上纹理坐标的问题

0 个答案: