Question

我的输出日期如下：

geom[0] = {

texturesindexT: new Int16Array([0,1,2,3]),
texturesindexS: new Int16Array([-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,...]),

materialsindexT: new Int16Array([-1,-1,-1,-1]),
materialsindexS: new Int16Array([-1,0,1,2,3,4,5,0,6,2,7,8,-1,0,...]),

startIndicesT: new Uint32Array([0,288,606,897,1380]),
startIndicesS: new Uint32Array([1380,1431,1479,1485,1497,1515,1659,...]),

m_indices: new Uint16Array([0,1,2,3,0,2,4,2,5,4,6,2,7,3,2,8,9,10,...]),

m_vertices: new Float32Array([-81.93996,25.7185,-85.53822,-81.93996,...]),

m_normals: new Float32Array([-0.004215205,0.9999894,-0.001817489,-0.004215205,...]),

m_texCoords: new Float32Array([0,0.04391319,0,0.2671326,0.009521127,0.03514284,...]),

}

var textures = new Array("-1_-1/t0.jpg","-1_-1/t1.jpg","-1_-1/t2.jpg",...);

数据是为了索引，顶点和正常缓冲区，但是必须使用其他纹理和Maretials渲染部分。

我试图用索引，顶点和texCoords / UVCoords制作一个THREE.Geometry但是没有用。

现在我正在尝试使用THREE.BufferGeometry（）和这项工作但我需要使用Texture＆＃34; textures [0]＆＃34;渲染索引0到287。和＃34;纹理[1]＆＃34;索引288到605;等等。

我的第一次尝试是为索引为288到605的每个部分创建一个BufferGeometry，但由于指数是针对孔模型的，所以我必须将完整的顶点，normales和UVCoords放在缓冲区中面孔。

有没有办法用其他纹理渲染BufferGeometry的各个部分或为每个面设置纹理索引？

或者是否可以创建一个材质，使用纹理A渲染第一个X面，使用纹理B渲染下一个X ???

Answer 1

如果您想使用两个不同的纹理和一个BufferGeometry，您可以使用此模式设置drawcalls：

var geometry1 = new THREE.BufferGeometry();
// ...and set the data...
var geometry2 = geometry1.clone();

// set drawcalls
geometry1.offsets = geometry1.drawcalls = []; // currently required
geometry1.addDrawCall( start1, count1, 0 );

geometry2.offsets = geometry2.drawcalls = []; // currently required
geometry2.addDrawCall( start2, count2, 0 );

var material1 = new THREE.MeshPhongMaterial( { map: map1 } );
var material2 = new THREE.MeshPhongMaterial( { map: map2 } );

var mesh1 = new THREE.Mesh( geometry1, material1 );
var mesh2 = new THREE.Mesh( geometry2, material2 );

three.js r.70

Answer 2

您可以创建两个具有相同顶点缓冲区和不同索引的几何图形：

var position = new THREE.BufferAttribute(positionArray, 3);
var normal = new THREE.BufferAttribute(normalArray, 3);
var uv = new THREE.BufferAttribute(uvArray, 2);

var indices1 = new THREE.BufferAttribute(indexArray1, 1);
var geometry1 = new THREE.BufferGeometry();
geometry1.addAttribute('position', position);
geometry1.addAttribute('normal', normal);
geometry1.addAttribute('uv', uv);
geometry1.addAttribute('index', indices1);

var indices2 = new THREE.BufferAttribute(indexArray2, 1);
var geometry2 = new THREE.BufferGeometry();
geometry2.addAttribute('position', position);
geometry2.addAttribute('normal', normal);
geometry2.addAttribute('uv', uv);
geometry2.addAttribute('index', indices2);

然后像往常一样用不同的材质创建2个网格。据我了解，这将在两个网格中重复使用相同的数据。

Threejs BufferGeometry - 使用其他纹理渲染一些面

2 个答案: