我遇到了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上重现。