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

标签 javascript 3d three.js buffer-geometry

我有一个这样的输出日期:

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() 和这项工作,但我需要使用纹理“textures[0]”渲染索引 0 到 287,使用“textures[1]”渲染索引 288 到 605 等等。

我的第一次尝试是为索引为 288 到 605 的每个部分创建一个 BufferGeometry,但是由于索引是按孔模型的顺序排列的,所以我必须将完整的顶点、法线和 UVCoords 放入缓冲区中,只有几个面孔。

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

或者是否可以创建一个 Material ,用纹理 A 渲染前 X 个面,然后用纹理 B 渲染下一个???

最佳答案

如果你想在一个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

关于javascript - Threejs BufferGeometry - 用其他纹理渲染一些面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28631414/

相关文章:

javascript - 检查密码是否相等 jQuery

javascript - 如何编写不带参数的类型化操作

javascript - 在窄显示屏上查看时删除 .mouseenter

3d - 我正在尝试以编程方式为角色的头发设置动画。最好的方法是什么?

html - CSS3 多重变换

JSON - Blender 和 ThreeJS - JSON 中位置 0 处出现意外标记 <

svg - 挤出具有多个孔的多个多边形并对组合形状进行纹理化

javascript - XMLHttpRequest Level 2 - 确定上传是否完成

c++ - 计算线段与trimesh交点的代码

javascript - three.js 不能玩透明webm?