Struggling to make my scene interactive

Hi everyone,

I’m launching my online car lighting shop, for this I need a 3D model on which the differents headlights light up when selected on my configurator.
My first idea was to declare a variable which would be the intensity of the light and to use a checkbox to change its value… it doesn’t work

After some research it seems that the solution is to use React but I don’t know anything about it and I would like to launch my shop quickly.

Does anyone know a solution? Should I use a paid solution like Sketchfab or Verge3D?

Here’s a codepen of my scene with the type of configurator I want to use.
It’s in French cause I am and it’s messy cause it isn’t finished.

+ how can I achieve the “blinding lens flare effect” when you look directly to a car headlight ? tried GodRays effect but it looks like it’s not the best solution

It is not completely clear what your (first) problem is. Why can’t you just set the visibility of the lights? But intensity should also work.

I tried both ways but could’nt achieve what I’m looking for.

Would be great if you could modify my Pen to show how you would do it

Anyone can help me ? up

@aurelientanguy

i don’t think you need react for your use case…

have a look here and try click this button…

it’s a simple case of booleans it seems, going to dm you…

@aurelientanguy

as for your second question, did you implement god rays properly? that’d be the best way to do it, otherwise you could try a clever use of bloom effect somehow but you’d have to add an emmisive material to a plane behind the headlight and change it’s emmisive intensity based on the angle of view which would be much of a headache compared to just using god rays i’m sure…

@forerunrun just tried using GodRays effect, it works but it looks awful lol, must have done it wrong.

It looks like there’s some aliasing and it’s a bit laggy. What did I do wrong ?
Here is a codepen of what i’ve done

it works but it looks awful lol, must have done it wrong

found the problem, I did’nt set the composer size. It looks much better now

But I can’t figure out how to make another “light source” ?

@aurelientanguy

you can also try it in conjunction with an SMAA pass to smooth the sharp lines

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

what do you mean by make another light source, you mean add another light to the scene?

@forerunrun is’nt the SMAA pass going to make the scene even more laggy ? I need my scene to work fine on every devices, including mobiles.

I mean doing the exact thing to the right headlight, as an example

@aurelientanguy

as far as i’m aware it should be fine with SMAA, your lagginess problem might be due to having 6 spotlights, from my experience having more than one spotlight in the scene has made projects of mine laggy in the past, this might be fixed in latest version of three js but the calculations of a spotlight with shadows are quite intensive…