THREE.Line с размытым

Question

Есть варианты вариантов Линия с размытыми или другими фильтрами?

Я использую альтернативу для линии с THREE.Plane с текстурой, но имитировать перемещение с позиции вектора и lookAt не просто как динамическая линия с vertices[0]vertices[1].

Answer 1

Объект Line с использованием WebGLRenderer не имеет много вариантов. Используя CanvasRenderer или SVG рендеринга, я считаю, что вы можете сделать больше с ним. Например, большинство реализаций WebGL (Chrome в Windows) поддерживают только максимальную ширину строки 1, поэтому вы даже не можете изменить ширину. Если вы перейдете на CanavsRenderer, вы можете установить его с помощью опции 'lineWidth'. Однако я не знаю, можно ли размыть линию с помощью простого варианта, подобного этому.

Если вы хотите использовать WebGLRenderer, лучше всего искать информацию о GLSL и писать пользовательские шейдеры. Затем ознакомьтесь с этим примером, как написать собственный шейдер для объекта Line. This example кажется, что все это очень хорошо. Я уверен, что он может быть адаптирован для того, чтобы делать то, ради чего вы стремитесь.

Answer 2

Вы можете использовать THREE.Ribbon, как и я. В основном, точки в Ribbon.geometry отображаются как квадрациклы, как лента. Например, если точки

Ribbon.geometry=[ 
new THREE.Vertex3(1,0,0), 
new THREE.Vertex3(-1,0,0), 
new THREE.Vertex3(1,0,10), 
new THREE.Vertex3(-1,0,10) 
] 

произведут тонкую полоску от начала наружу по оси z. Вы можете использовать Ribbon.geometry.colors для добавления цветов в каждую вершину. В диапазоне от белого до черного, в сочетании с материалом ленты, THREE.MeshBasicMaterial с THREE.AdditiveBlending и THREE.DoubleSide, вы можете изменить вершины геометрии в реальном времени и получить прозрачный эффект замирания! Не забудьте заполнить список вершин предопределенной суммой при инициализации, потому что после инициализации вы не можете добавить больше! Вы можете комбинировать с фильтром цветения.