製作隱藏在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具有新值時，着色器應按預期工作。