显示顶点时,不显示具有隐藏顶点的BufferGeometry

时间:2014-07-01 07:34:47

标签: javascript three.js

我遇到了THREE.BufferGeometry的问题。我根据需要预先分配了大量顶点,并通过在FOV外部设置位置将它们隐藏在屏幕上。我已经在ParticleSystem中使用了这个技巧,一切正常。但是对于简单的网格,当我将顶点移动到FOV时,没有任何反应。我创建了fiddle to demonstrate the problem。在演示中,当你点击屏幕时,应该会出现10条红线,但是在你注释掉行空顶部()之前你永远不会看到它们,这会将顶点移到FOV之外。

正交相机

var width = window.innerWidth,
    height = window.innerHeight;
// camera
camera = new THREE.OrthographicCamera(width / -2, width / 2, height / 2, height / -2, 0, 1);
camera.position.x = 0;
camera.position.y = 0;
camera.position.z = 1;

创建网格

// geometry
var geometry = new THREE.BufferGeometry();
positions = new THREE.Float32Attribute(lines * 4, 3);
colors = new THREE.Float32Attribute(lines * 4, 3);
indices = new THREE.Uint32Attribute(lines * 6, 1);
var radius = 500;

// COMMENT NEXT LINE TO SEE THE LINES
emptyAttributes();
//realAttributes();
geometry.addAttribute('position', positions, 3);
geometry.addAttribute('color', colors, 3);
geometry.addAttribute('index', indices, 1);
// materials
var material = new THREE.MeshBasicMaterial({
    vertexColors: THREE.VertexColors,
    opacity: 0.8,
    transparent: true
});

// mesh
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

隐藏屏幕顶点

function emptyAttributes() {
  for (var i = 0; i < lines * 12; i++) {
    if ((i + 1) % 3 == 0) {
        positions.array[i] = 2;
    }
  }
}

更新属性以查看行

function realAttributes() {
  for (var i = 0; i < lines; i++) {
    var coords = [i * 10, -100, i * 10 + 5, -100, i * 10 + 5, 100, i * 10, 100];
    for (var j = 0; j < 4; j++) {
        positions.array[i * 12 + j * 3] = coords[j * 2];
        positions.array[i * 12 + j * 3 + 1] = coords[j * 2 + 1];
        positions.array[i * 12 + j * 3 + 2] = 0;

        colors.array[i * 12 + j * 3] = 1;
        colors.array[i * 12 + j * 3 + 1] = 0;
        colors.array[i * 12 + j * 3 + 2] = 0;
    }
    indices.array[i * 6] = i * 4;
    indices.array[i * 6 + 1] = i * 4 + 1;
    indices.array[i * 6 + 2] = i * 4 + 2;
    indices.array[i * 6 + 3] = i * 4;
    indices.array[i * 6 + 4] = i * 4 + 2;
    indices.array[i * 6 + 5] = i * 4 + 3;
  }
}
realAttributes();
mesh.geometry.attributes.position.needsUpdate = true;
mesh.geometry.attributes.color.needsUpdate = true;
mesh.geometry.attributes.index.needsUpdate = true;

问题在FireFox和Chrome的最新版THREE.js - r67上重现。

0 个答案:

没有答案