Блог

Главная - Вопросы по программированию - Как сделать разноцветные круглые частицы в Three.js ?

Как сделать разноцветные круглые частицы в Three.js ?

#javascript #three.js #vertex-shader #particles

#javascript #three.js #вершинный шейдер #частицы

Вопрос:

Я пытался отобразить округлые частицы, используя THREE.PointsMaterial и передавая текстуру холста в map параметре. Работает нормально, но я не знаю, как использовать VertexColors, чтобы каждая частица имела свой цвет.

Короче говоря: этот код отображает разноцветные квадратные частицы:

 var material = new THREE.PointsMaterial({
  vertexColors: THREE.VertexColors,
});

И это отображает одноцветные круглые частицы:

 var material = new THREE.PointsMaterial({
  vertexColors: THREE.VertexColors,
  map: createCanvasTexture(), // returns texture painted on Canvas
});

Есть ли какой-нибудь способ передать VertexColors в map ?

Или я должен использовать vertexShader fragmentShader ? (Вероятно, хорошее решение, когда мне также нужно анимировать позицию). Но как передать туда цвета?

Комментарии:

1. Добавьте color атрибут буфера в свою геометрию и установите vertexColors: true материал точек. И объедините оба ваших варианта: new THREE.PointsMaterial( { vertexColors: true, map: createCanvasTexture() } );

2. @prisoner849 когда вы применяете текстуру в, map она перезаписывает vertexColors …

3. Какого цвета текстура? Обычно он должен быть белым, так как материал выполняет умножение цвета текстуры и вершины по каналам.

4. @prisoner849 фу! спасибо, чувак! белая текстура заставила это работать! 🙂 большое спасибо!