Light/Spell beam as in Harry Potter

Questions
, ,
1

Hi team,

I was looking to create a Harry Potter spell like effect using Three JS. I’m not sure where to start. I’m guessing this require shaders, but I’m a noob there.

(I want to make it cool ad realistic).

Help!

2

Hello @Nikhil_Shaji
I’m so excited.
could you post something like the image you want to create here?
let’s discuss in detail after seeing that.

3

potter_a

I’m looking for building this kind of effect using Three JS

4

You should be able to use just a simple Line / PolyLine geometry, or a Plane with a pretty VFX scrolling texture, and apply bloom postprocesing to it.

May be helpful too: ref1, ref2

3 Likes
5

of course, material is important and it would be also important that you should look for a good solution in lightening strike geometry.
I remember I saw related thread somewhere…

6

this is kind of what I want, but not sure how they made it. Looks like shaders is the way to go, but I’m not much an expert in shaders.

7

First solutuion: lines with bloom three.js webgl - lightning strike
GitHub - yomboprime/lightning_strike_demo: 3D lightning strike demo in Three.js
Second solution: stretched plane or sprite with cylindrical rotation to camera.

image
image960×540 67 KB

5 Likes
8

Particles/points, maybe?

4 Likes
9

lovely example as ever! did you use the once available LightningStrike Geometry class as previously part of three’s examples for that? not sure the reason it was removed but the LightningStrike example could be a good starting point to revamp and modify as a base for @Nikhil_Shaji’s use case also maybe, although it may need to be rewritten to be compatible with the latest version as it was dropped in r152 it seems…

2 Likes
10

Oh, yes, I knew about that class and I wanted to use it in that scene, but, as usual, I decided to do it my way :sweat_smile:

1 Like
11

Resurrected lightning storm example from Threejs ~r152

6 Likes
12

This is a perfect example to implement this light beam effect, I think.

13

Thanks a lot guys, this is exactly what I want to build. @Chaser_Code @prisoner849 @seanwasere I try to implement it based on the examples you shared.

Thank you :slight_smile:

14

I’ve made a lighting example scene recently in Polygonjs:

4 Likes
15

This is great!! Nice work.

1 Like
16

I think light is target from fixed one point to fixed second point with noise between them.