[WebGL] Three.js의 BufferGeometry로 UV 좌표를 만지기

여러가지 조사해 보았지만, 그다지 스마트한 방법을 찾을 수 없었다.

이른바 「텍스처 아틀라스」적인 일을 하자고 생각하고 먹었을 때의 메모입니다.

덧붙여서 ↓와 같은 이미지를 준비하고, 그것을 마우스 오버로 전환하는, 같은 것을 이미지하고 있습니다.

CSS라도 잘 사용되는 방법이군요.

// UV座標のAttributeを取得
var attr = mesh.geometry.getAttribute('uv');
for (var i = 1, l = attr.array.length; i < l; i += 2) {
    // UV座標は(x, y)の2要素のベクトルなので、Yの値を半分にする
    attr.array[i] /= 2;
}

하고 있는 것은 간단하고, UV 좌표는 (x, y) 의 형태로 1차원 배열로 격납되고 있는 것 같기 때문에, 취득한 배열의 Y 에 해당하는 값을 반으로 하고 있습니다. (※)

※ ... 이번에는 위의 이미지와 같이 세로로 두 줄로 늘어선 버튼을 상정하고 있기 때문에 반으로 하고 있습니다만, 텍스처 아틀라스와 같이 종횡에 복수의 요소를 늘어놓은 경우는 그것용으로 제대로 그리고 계산하지 않습니다.

문서 를 보면 다음 요소를 얻을 수 있는 것 같습니다. (UV가 실려 있지 않기 때문에 전부가 아닐지도 모릅니다)


attribute
item size
description


position
(itemSize: 3)
Stores the x, y, and z coordinates of each vertex in this geometry. Set by .fromGeometry().

normal
(itemSize: 3)
Stores the x, y, and z components of the face or vertex normal vector of each vertex in thi

color
(itemSize: 3)
Stores the red, green, and blue channels of vertex color of each vertex in this geometry. S

tangent
(itemSize: 3)
Stores the x, y, and z components of the tangent vector of each vertex in this geometry. Se

색인
(itemSize: 3)
Allows for vertices to be re-used across multiple triangles; this is called using "indexed triangles,"and works much the same as it does in Geometry: each triangle is associated with the index of three vertices. This attribute therefore stores the index each vertex for each triangular face. If this attribute is not set, the renderer assumes that each three contiguous positions represent a single triangle.In addition to the the built-in attributes, you can set your own custom attributes. Geometry, these attributes are set and stored on the Material. In BufferGeometry, the attributes are stored with the geometry itself. Note that you still need to set the attributes information on the material as well, but the value of each attribute is sto BufferGeometry.

참고 기사

Threejs BufferGeometry - Render some faces with other Texture - Stackoverflow

문서