Три.js-сфера, которая светится

у меня проблема. Я хочу сделать сферу, которая работает как источник света (солнце). Я узнал, что meshPhongMaterial имеет такую опцию, как emissive: color и shininess: intensity но мне не удалось закодировать солнце. Кто-нибудь знает как это сделать? Спасибо за ответы!

9
geometry javascript light three.js

3 ответов

материал meshPhong имеет параметры "emissive" и "shininess", которые влияют на вычисления в шейдере материала, но они не дадут вам эффекта, который вы хотите, они просто используются для расчета конечного цвета.

вы можете поместить прожектор, например, в точное положение сферы, чтобы он осветил объект вокруг него. Однако, если вы хотите достичь эффекта светящейся сферы, вам придется написать шейдер после обработки:

  • рендер сфера фреймбуфер 1.
  • рендеринг той же сферы, окрашенной в желтый цвет (или какой-то другой яркий цвет) в framebuffer 2.
  • размытие содержимого в framebuffer 2 как эффект постобработки.
  • смешайте исходное изображение (framebuffer 1) и размытый framebuffer 2 вместе, чтобы получить окончательное изображение.

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

вы визуализируете сферу, а затем визуализируете некоторый quad с текстура "glow aura" сзади. Посещение:http://threegraphs.com/charts/sample/world/ чтобы увидеть, как вы можете имитировать свечение и создавать круг, подобный затмению, вокруг сферы.

2

Если вы хотите создать эффект свечения стиля, у меня есть написанный ряд примеров в http://stemkoski.github.io/Three.js/ это может быть полезно, в том числе:

http://stemkoski.github.io/Three.js/Selective-Glow.html
с сопровождающими блоге
http://stemkoski.blogspot.com/2013/03/using-shaders-and-selective-glow.html

а также более атмосферный стиль свечения эффекты

http://stemkoski.github.io/Three.js/Atmosphere.html
и
http://stemkoski.github.io/Three.js/Shader-Halo.html

надеюсь, что это помогает!

15

поскольку у вас нет конкретной проблемы, я не могу дать вам конкретный ответ. Однако вы кажетесь немного потерянным, поэтому вот что вам может не хватать: чтобы что-то выглядело как источник света, оно должно делать две вещи:--1-->

  1. Illuminate: вы достигаете этого, создавая новый световой объект внутри него. Это хорошая идея, чтобы поместить как ваш объект и свет внутри новой тройки.Object3D.
  2. Glow: вам нужно будет создать шейдер, чтобы размыть пиксели вокруг этого объекта. Я нашел учебник для троих.JS для вас здесь: три.Яш зарево учебник.

есть более продвинутые методы, которые вы можете попробовать, например, добавить godrays.

желаю удачи.

2