制作隐藏在bufferGeometry中的随机顶点/ traingles

Question

我的问题是关于使一些顶点/三角形在bufferGeometry中不可见。我从another question复制这个shader：

<script type="x-shader/x-vertex" id="vertexshader"> 
    attribute float visible; 
    varying float vVisible; 
    attribute vec3 color; 
    varying vec3 vColor; 

void main() { 
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); 
    vColor = color; 
    vVisible = visible; 
} 
</script> 
<script type="x-shader/x-fragment" id="fragmentshader"> 
varying float vVisible; 
varying vec3 vColor; 

void main() { 
    if (vVisible > 0.0) { 
     gl_FragColor = vec4(vColor, 1.0); 
    }else 
     discard; 
} 
</script> 

，然后这是我所定义的缓冲区几何：

var geometry = new THREE.BufferGeometry(); 
var sides = 4; 
var heightSegments = 1; 
var height = 20; 
var radius = 10; 
var indices= []; 
var vertices; 
function vertexes(){ 
    for (var j=0; j <=height; j = j + (height/heightSegments)) { 
     for (var i=0;i<=sides;i++) { 


vertex.push([radius*Math.cos(2*Math.PI*i/sides),j,radius*Math.sin(2*Math.PI*i/sides)]); 

     } 
    } 
    for (var j = 0; j<sides; j++) { 
     for (var i = 0 ; i <sides*heightSegments; i+=sides) { 

      indices.push(i + j); 
      indices.push(i + j + 1); 
      indices.push(i + sides + j + 1); 
      indices.push(i + j + 1); 
      indices.push(i + sides + j + 1 + 1); 
      indices.push(i + sides + j + 1); 
     } 
    } 

} // three components per vertex 

function updatePositions() { 
    for (var k=0; k<(sides+1)*(heightSegments+1) ; k++) 
    { 
     vertices[ k*3 + 0 ] = vertex[k][0]; 
     vertices[ k*3 + 1 ] = vertex[k][1]; 
     vertices[ k*3 + 2 ] = vertex[k][2]; 
     line_visible[k] = 1; 
     line_colors[ k*3 + 0 ] = color.r; 
     line_colors[ k*3 + 1 ] = color.g; 
     line_colors[ k*3 + 2 ] = color.b; 
    } 

} 
vertexes(); 
vertices = new Float32Array(vertex.length*3); 
line_visible = new Float32Array(vertex.length); 
var color = new THREE.Color(0xffff00); 
var line_colors = new Float32Array(vertex.length*3); 
updatePositions(); 

geometry.setIndex(indices); 
geometry.addAttribute('position', new THREE.BufferAttribute(vertices, 3)); 
geometry.addAttribute('color', new THREE.BufferAttribute(line_colors, 3)); 
geometry.addAttribute('visible', new THREE.BufferAttribute(line_visible, 1)); 
var shader_material = new THREE.ShaderMaterial({ 
    vertexShader: document.getElementById('vertexshader').textContent, 
    fragmentShader: document.getElementById('fragmentshader').textContent 
}); 

var mesh = new THREE.Mesh(geometry, shader_material); 
scene.add(mesh); 

所以当我做的这行代码隐藏一些顶点或三角形：

geometry.attributes.visible.array[0]=0; 

我还添加这行代码的代码上面的行之后：

geometry.attributes.visible.needsUpdate = true; 

没有什么改变！只是为了补充一点，我随机想让它们隐藏起来，所以我不认为setDrawRange会起作用！

Answer 1

你改变你的visible属性后，一定要设置needsUpdate标志：

geometry.attributes.visible.array[0]=0; 
geometry.attributes.visible.needsUpdate = true; 

这告诉three.js所该属性的值发生变化，需要重新被推到了GPU。当GPU具有新值时，着色器应按预期工作。