При рисовании линий BufferGeometry Three.js цвета не прилипают к сегментам

При рисовании линии BufferGeometry я устанавливаю такие индексы, как: indices = [1,2,2,3,3,4] и такие цвета, как: colors = [r1,g1,b1,r1,g1,b1, r2,g2,b2,r2,g2,b2, r3,g3,b3,r3,g3]. Тем не менее, цвета не прилипают к сегментам и выходят за их пределы, со временем смешиваясь со следующим цветом. Что-то, что я заметил, это то, что он не рисует все цвета, только первый, например, если он окрашивает сегмент и половину цвета. Я создал скрипку: http://jsfiddle.net/0f1oxdjx/При рисовании линий BufferGeometry Three.js цвета не прилипают к сегментам

var positions = new Float32Array(MAX_POINTS * 3); // 3 vertices per point 
var colors = new Float32Array(2*(MAX_POINTS-1)*3); 
var indices = new Uint16Array(2*(MAX_POINTS-1)); 
var x = y = z = index = 0; 

for (var i = 0, l = MAX_POINTS; i < l; i ++) { 
    positions[ index ++ ] = x; 
    positions[ index ++ ] = y; 
    positions[ index ++ ] = z; 
    x += (Math.random() - 0.5) * 300; 
    y += (Math.random() - 0.5) * 300; 
    z += (Math.random() - 0.5) * 300; 
} 
var iindex = 0, cindex = 0; 
for (var i = 1, l = MAX_POINTS; i < l; i ++) { 
    indices[iindex++] = i-1; 
    indices[iindex++] = i; 
    x = (Math.random()); 
    y = (Math.random()); 
    z = (Math.random()); 
    colors[ cindex ++ ] = x; 
    colors[ cindex ++ ] = y; 
    colors[ cindex ++ ] = z; 

    colors[ cindex ++ ] = x; 
    colors[ cindex ++ ] = y; 
    colors[ cindex ++ ] = z; 
} 
geometry.addAttribute('position', new THREE.BufferAttribute(positions, 3)); 
geometry.addAttribute('color', new THREE.BufferAttribute(colors, 3)); 
geometry.setIndex(new THREE.BufferAttribute(indices, 1)); 

// material 
var material = new THREE.LineBasicMaterial({vertexColors:THREE.VertexColors, linewidth:2});

редактировал скрипку.

источник

2016-12-23 Ricardo Serrano

Вы уверены, что вы связаны с правой скрипку? Код здесь и в скрипке не кажется одинаковым, и код в скрипке не запускается - у него есть ошибки. – michaPau

Впервые я использую его. Правильно ли сейчас? –

Да, но, возможно, здесь также помещен код дырки в блок кода. Сценарий имеет дополнительный код (в конце в функции init + рендеринг и функция анимации), который здесь не отображается. – michaPau

Как указал WestLangley, используя неиндексированную геометрию, я смог решить проблему. Вы можете увидеть рабочую скрипку здесь:

http://jsfiddle.net/ed00u25s/

positions[ index ++ ] = x; 
positions[ index ++ ] = y; 
positions[ index ++ ] = z; 
for (var i = 1, l = MAX_POINTS-1; i < l; i ++) { 
    x += (Math.random() - 0.5) * 300; 
    y += (Math.random() - 0.5) * 300; 
    z += (Math.random() - 0.5) * 300; 
    positions[ index ++ ] = x; 
    positions[ index ++ ] = y; 
    positions[ index ++ ] = z; 

    positions[ index ++ ] = x; 
    positions[ index ++ ] = y; 
    positions[ index ++ ] = z; 
} 
positions[ index ++ ] = x; 
positions[ index ++ ] = y; 
positions[ index ++ ] = z; 
var iindex = 0, cindex = 0; 
for (var i = 1, l = MAX_POINTS; i < l; i ++) { 
    x = (Math.random()); 
    y = (Math.random()); 
    z = (Math.random()); 
    colors[ cindex ++ ] = x; 
    colors[ cindex ++ ] = y; 
    colors[ cindex ++ ] = z; 

    colors[ cindex ++ ] = x; 
    colors[ cindex ++ ] = y; 
    colors[ cindex ++ ] = z; 
}

источник

2017-01-16 17:48:06

При рисовании линий BufferGeometry Three.js цвета не прилипают к сегментам

ответ

Смежные вопросы