Good day everyone!
Here is the design of how this should look:
The pulse should be depends on audio that will be generated. The main problem that i don’t understand is how to make particles like that.
Is there any ideas how to create this kind of effect?
If you want particles in formation of a heart, then you can:
- Create a model of a heart in a software like Blender, export and load it, and use its vertices for
- Use a sphere geometry with a slight shifting of its vertices on a sphere surface and then deform the sphere, making a heart
- Deform a sphere geometry to a heart, then use
MeshSurfaceSampler (an example of its using) for random distributing of particles on the surface of the heart
And for connecting particles with lines, take a look at this example: three.js examples
Creativity is up to you
Thank you for ideas! I realized how to make heart. But what about sound line behind heart? It is also need to be dependable on beat data of the sound. Big troubles with this… How to make those lines to curve like that, sounds like smth impossible for me T_T
thank you! great example! and what about that shiny dots on the heart, i’ve created 3d model of a heart, and can access each sphere individually… i’ve tried to create point lights to each of them, so then can shine, but it cause an error, any ideas?
You can also do Karaoke.
I don’t know anything about music, but for a friend I did a test in 2018.
There are also some links.
A simple test result (Firefox only) is in the Collection of examples from discourse.threejs.org
see eXtended eXamples
see Audio Recording Audio Recorder
That’s not going to work. You should aim for only a couple of lights in the scene in total or performance will be terrible.
yeah, i’ve already understood that, cause my browser crashed several times
Yeah, I think a selective bloom pass would be the easiest way to get the shiny dots.
However, you might run into a problem with anti-aliasing due to all the small thin lines. When you use a post-processing effect (at least with WebGL1) you have to disable the built-in AA and use a post AA pass such as FXAA or SMAA.
In my experience these don’t always give nice results with thin lines. The examples I was testing with were architectural models so the lines were largely vertical and horizontal, you might have better luck here since your lines are at many angles and animated.
By the way @prisoner849, your selective bloom examples don’t use AA at all, right? They look surprisingly clean considering.
No, I don’t use AA. It’s noticeable (at least for me) on the lines of the spider web in the Totentanz scene.
Yes, but less than I would expect. Probably I’m just so in awe of the cool scenes that I don’t notice the jaggies
In the Nocturnal scene I’ve got horrible steps-like contours for the “ramp buildings”, when I’ve put them before the “flat building”, so I’ve just put them on the very background and made them as darken as possible That’s the trick