Question

我想绘制具有野兽表现的多个脸部（例如100000x）。我正在尝试使用“for”循环，但是有很多场景。孩子们。

  lastz=0;nextz=0;
  for (i1=0; i1<100000; i1++) {                    
    var geometry = new THREE.Geometry();
    var material = defaultshellmaterial.clone();
    nextz=Math.random();
    geometry.vertices.push(new THREE.Vector3(0+i1,0,lastz));
    geometry.vertices.push(new THREE.Vector3(1+i1,0,nextz));
    geometry.vertices.push(new THREE.Vector3(1+i1,1,nextz));
    geometry.vertices.push(new THREE.Vector3(0+i1,1,lastz));
    geometry.faces.push(new THREE.Face3(0, 1, 2)); 
    geometry.faces.push(new THREE.Face3(0, 3, 2));
    geometry.computeFaceNormals();
    lastz=nextz;
    var mesh= new THREE.Mesh( geometry, material);
    scene.add(mesh);                         
  }

这是野兽的方式吗？存在将网格绘制成一个场景子的可能性（就像我用于多个线或点的方法）？然后将用鼠标选择每张脸？我的基本想法不起作用......

  lastz=0;nextz=0;
  var geometry = new THREE.Geometry();
  var material = defaultshellmaterial.clone();
  var mesh= new THREE.Mesh( geometry, material);
  for (i1=0; i1<10000; i1++) {                    
    nextz=Math.random();
    geometry.vertices.push(new THREE.Vector3(0+i1,0,lastz));
    geometry.vertices.push(new THREE.Vector3(1+i1,0,nextz));
    geometry.vertices.push(new THREE.Vector3(1+i1,1,nextz));
    geometry.vertices.push(new THREE.Vector3(0+i1,1,lastz));
    geometry.faces.push(new THREE.Face3(0, 1, 2)); 
    geometry.faces.push(new THREE.Face3(0, 3, 2));
    geometry.computeFaceNormals();
    lastz=nextz;                        
  }   
  scene.add(mesh);

Answer 1

谢谢大家的帮助和灵感！我在three.js网站上发现了一个类似的例子https://threejs.org/examples/#webgl_buffergeometry_uint诀窍在于使用bufferregometry，它必须使用float32array。唯一的问题是float32array不具有可变长度，并且必须为顶点，法线和颜色创建标准数组，然后将其转换为float32array。如何绘制很多三角形的更长但更强大的解决方案可能是：

  var geometry = new THREE.BufferGeometry(); // buffered geometry
  var positions = []; // standard arrays which allow push next number on the end (changeble length)
  var normals = [];
  var colors = [];
  var pA = new THREE.Vector3(); //auxiliary vectors
  var pB = new THREE.Vector3();
  var pC = new THREE.Vector3();
  var cb = new THREE.Vector3();
  var ab = new THREE.Vector3();     
  var color = new THREE.Color();

  for (i=0; i<1000000; i++) {
    add=i*10;
    ax=0+add;ay=0;az=0;
    bx=10+add;by=0;bz=0;
    cx=0+add;cy=10;cz=0;

    positions.push( ax, ay, az ); // push new vertices
    positions.push( bx, by, bz );
    positions.push( cx, cy, cz );

    // flat face normals (just compute normals with auxiliary vectors)
    pA.set( ax, ay, az );
    pB.set( bx, by, bz );
    pC.set( cx, cy, cz );
    cb.subVectors( pC, pB );
    ab.subVectors( pA, pB );
    cb.cross( ab );
    cb.normalize();
    var nx = cb.x;
    var ny = cb.y;
    var nz = cb.z;
    normals.push( nx, ny, nz ); // push normals
    normals.push( nx, ny, nz );
    normals.push( nx, ny, nz );

    // set random HSL color for each triangle
    color.setHSL(Math.random(), 1, 0.5); // barvy duhy?

    colors.push( color.r, color.g, color.b );
    colors.push( color.r, color.g, color.b );
    colors.push( color.r, color.g, color.b );
  }         
  function disposeArray() { this.array = null; }// auxiliary function set inital null array

  geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ).onUpload( disposeArray ) ); // transfor standard array which allows the ".push" to the Float32array suitable for 3D graphics
  geometry.addAttribute( 'normal', new THREE.Float32BufferAttribute( normals, 3 ).onUpload( disposeArray ) );
  geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ).onUpload( disposeArray ) );
  geometry.computeBoundingSphere(); // sometimes is usseful to define new boundary for new entities

    var material = new THREE.MeshPhongMaterial( {
      color: 0xaaaaaa, specular: 0xffffff, shininess: 250,
        side: THREE.DoubleSide, vertexColors: THREE.VertexColors
    } );

  mesh = new THREE.Mesh( geometry, material ); // all triangles will be in the one mesh what is powerfull
    scene.add( mesh );

three.js绘制多个面孔和表现

1 个答案: