How to make a visible cone of light from a spotlight (like the one called Batman)?

Question

JavaScript

Good afternoon.
In the current work, it is necessary to make something like a spotlight, from which a cone of light should be visible. Like the spotlight used to call Batman.
I have never had any experience with three.js or webgl or 3D at all. In my mind, this effect should give an intense directional light, which is what I tried to do with THREE.SpotLight(), but obviously I'm doing something wrong.
I've found a few options that are roughly what I need, but they either use shaders or post-processing, and I would like to know if this can be done using only Three.js.
What should happen can be seen on the codepen , except that instead of just reflection, it is the visible cone of light that is needed.

Answer 1

Elfrey,
in this example, shaders are used to the full, if I understand you correctly,
then in the simplest version it will be enough to draw a cone of light coming out of the spotlight using a pre-created cone-type object with a yellow material with translucency superimposed on it, without any shaders, like this:

geomLightCone = new THREE.CylinderGeometry( 0, 30, 100, 20, 4 );
material = new THREE.MeshBasicMaterial( {
        color: 0xFFFF00, 
        opacity: 0.5, 
        visible: true} );

meshLight = new THREE.Mesh(geomLightCone, material);
scene.add(meshLight);

...it is also necessary to constantly monitor the position of the beam depending on the position of the spotlight.
ps maybe I'm wrong, but it's not necessary to track the position of the beam, it's enough just to place it in the right place at the moment of initializing the objects on the stage, and then
instead of:
add to the "spotlight" object, the "ray of light" object like this:
projectorMesh.add(meshLight);

Answer 2

The programs for 3d modeling 3ds Max, cinema 4d, blender, and so on do an excellent job with your task. look here stackoverflow.com/questions/10742149/how-to-create ...
www.html5canvastutorials.com/three/html5-canvas-we...
habrahabr.ru/post/117772
like blender, powerful, free, awesome support

Answer 3

But what if you use a cone together with a light source, so you get a light that behaves like a light, only with a spotlight effect, like in "Batman")).
It is also possible to apply the "glow" shader effect to the cone, which will make the light flow more interesting, unfortunately, nothing will save these methods from through penetration through the walls, since you will have to calculate something yourself.
If these implementations are not to your liking, you need to study shaders and calculate everything yourself.
Here are some links that can help:
pixelshaders.com
www.airtightinteractive.com/2013/02/intro-to-pixel...
there are tons of examples here:
glsl.heroku.com
also has a good resource to ask.
PS In general, there are implementations not through a cone, but through 2, 3, ... and more flat objects crossed with each other, the only thing left is to implement "clipping" the beam-surface

Answer 4

If I understand you correctly, then this is what you need: https://medium.com/@andrew_b_berg/volumetric-light...