THREEJS - 带有 2 种材料的索引 BufferGeometry

问题描述

我想创建一个可以容纳多种材料的单一缓冲几何体.我读过为了在 BufferGeometry 中实现这一点，我需要使用组.所以我创建了以下地板":网格:

var gg=new THREE.BufferGeometry(),vtx=[],fc=[[],[]],mm=[new THREE.MeshLambertMaterial({ color:0xff0000 }),new THREE.MeshLambertMaterial({ color:0x0000ff })];for(var y=0 ; y

问题:

• 查看

  修复 #1 - 不定义组 0

  fix #2 - .addGroup 中的第二个参数是缓冲区长度，它必须是 3 的倍数(100 是错误的)

  var gg = new THREE.BufferGeometry(),vtx = [],fc = [[],[]],毫米 = [新的 THREE.MeshLambertMaterial({颜色:0xff0000}),新的 THREE.MeshLambertMaterial({颜色:0x0000ff})];for (var y = 0; y 

  I want to create ONE single buffer geometry that can hold many materials.I have read that in order to achieve this in BufferGeometry, I need to use groups. So I created the following "floor" mesh:

  var gg=new THREE.BufferGeometry(),vtx=[],fc=[[],[]],mm=[
      new THREE.MeshLambertMaterial({ color:0xff0000 }),
      new THREE.MeshLambertMaterial({ color:0x0000ff })
  ];
  for(var y=0 ; y<11 ; y++)
      for(var x=0 ; x<11 ; x++) {
          vtx.push(x-5,0,y-5);
          if(x&&y) {
              var p=(vtx.length/3)-1;
              fc[(x%2)^(y%2)].push(
                   p,p-11,p-1,
                   p-1,p-11,p-12
              );
          }
      }
  gg.addAttribute('position',new THREE.Float32BufferAttribute(vtx,3));
  Array.prototype.push.apply(fc[0],fc[1]); gg.setIndex(fc[0]);
  gg.computeVertexNormals();
  gg.addGroup(0,100,0);
  gg.addGroup(100,100,1);
  scene.add(new THREE.Mesh(gg,mm));
  

  THE ISSUE:

  • looking at the example in https://www.crazygao.com/vc/tst2.htm can see that the BLUE material looks weird.

  • Single material showup OK.

  • 2 materials with group as above, in any case show the BLUE really strage.

  • Changing the 1st group to start=0, count=200 (for all triangles) and removing the 2nd group, will show MORE squares of RED (obviously) but still NOT in the way I would like it to show.

  • Changing the 1st group count to any value greater than 200 will cause a crash (obviously) of attempting to access vertex out of range...


  Is anyone know clearly what shall I do?

  I am using THREE.js v.101 and I prefer to not create special custom shader for that, or add another vertex buffer to duplicate those I already have, and I prefer to not create 2 meshes as this may get much more complicated with advanced models.

  解决方案

  Check out this: https://jsfiddle.net/mmalex/zebos3va/

  ---

  fix #1 - don't define group 0

  fix #2 - 2nd parameter in .addGroup is buffer length, it must be multiple of 3 (100 was wrong)

  var gg = new THREE.BufferGeometry(),
      vtx = [],
      fc = [[],[]],
      mm = [
          new THREE.MeshLambertMaterial({
              color: 0xff0000
          }),
          new THREE.MeshLambertMaterial({
              color: 0x0000ff
          })
      ];
  
  for (var y = 0; y < 11; y++)
      for (var x = 0; x < 11; x++) {
          vtx.push(x - 5, 0, y - 5);
          if (x && y) {
              var p = (vtx.length / 3) - 1;
              fc[(x % 2) ^ (y % 2)].push(
                  p, p - 11, p - 1,
                  p - 1, p - 11, p - 12
              );
          }
      }
  
  gg.addAttribute('position', new THREE.Float32BufferAttribute(vtx, 3));
  fc[0].push.apply(fc[1]);
  gg.setIndex(fc[0]);
  gg.computeVertexNormals();
  
  // group 0 is everything, unless you define group 1
  // fix #1 - don't define group 0
  // fix #2 - 2nd parameter is buffer length, it must be multiple of 3 (100 was wrong)
  
  gg.addGroup(0, 102, 1);
  
  scene.add(new THREE.Mesh(gg, mm));
  

  这篇关于THREEJS - 带有 2 种材料的索引 BufferGeometry的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！