CODEWITHSUNDEEP
javascriptthree.js3d
Joshua Comeau
Joshua Comeau

Reputation: 2763

ThreeJS: Putting a light inside a box for a glowing effect

I'm trying to recreate this glowing box from Beat Saber in ThreeJS:

Beat Saber blocks

I started by creating a shape in Blender and exporting an OBJ. I've loaded it in Three, as just a geometry:

My own recreation

Next I needed some lighting. I tried using a RectAreaLight, positioned inside but facing outwards, and this works alright:

light from within

My problem is that, compared with the screenshot above, it doesn't really seem like it's glowing, it just looks like a bright white triangle on a red cube. I'm not sure how to get the light to "spill" outside, like in the screenshot. Maybe I need to use a different kind of light?

Upvotes: 1

Views: 1263

Answers (1)

Mosè Raguzzini
Mosè Raguzzini

Reputation: 15851

what are you looking for is done usally by pixel shaders. Take a look at glow and bloom shaders like:

https://threejs.org/examples/webgl_postprocessing_unreal_bloom.html

Upvotes: 2

Related Questions