Как сделать видимый конус света из прожектора (по типу того, которым вызывают Бетмена)?

Question

[Elfrey]

День добрый.
В текущей работе необходимо сделать что-то типа прожектора, из которого должно быть видно конус света. Как например прожектор, которым вызывают Бетмена.
У меня никогда не было опыта ни работы с three.js, ни с webgl, ни с 3D вообще. В моем представлении такой эфект должен давать интенсивный направленный свет, что я и пытался сделать через THREE.SpotLight(), но очевидно я что-то делаю не так.
Я нашел несколько вариантов примерно того, что мне нужно, но там либо используются шейдеры, либо постпроцессинг, а мне бы хотелось узнать, можно ли это реализовать только средствами Three.js.
То что должно получиться можно посмотреть на codepen, за исключением того, что вместо просто отражения нужен именно видимый конус света.

Answer 1

[sozercanie_kosmosa]

Elfrey,

тут как раз используется то

в этом примере по полной используются шейдеры, если я вас правильно понял,
то в самом простом варианте будет достаточно нарисовать конус света выходящего из прожектора по средствам заранее созданного объекта типа конус с наложенным на него материалом желтого цвета с полупрозрачностью, без всяких шейдеров например так:

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);

...так же необходимо постоянно отслеживать положение луча в зависимости от положения прожектора.

ps возможно я ошибаюсь, но отслеживать положение луча не обязательно, достаточно лишь в момент инициализации объектов на сцене поместить его в нужное место, а затем
вместо:
scene.add(meshLight);
добавить к объекту "прожектор", объекта "луч света" так:
projectorMesh.add(meshLight);

Comments

[Elfrey]

Я пробовал такой вариант, но я не знаю уверен что можно заставить конус вести себя как свет. То есть чтобы когда он взаимодействовал с объектами на его пути.
Но пока это лучший вариант решения, спасибо.

Answer 2

[makol]

С вашей задачей отлично справляются проги по 3d моделированию 3ds Max, cinema 4d, blender, и тд. посмотрите здесь stackoverflow.com/questions/10742149/how-to-create...
www.html5canvastutorials.com/three/html5-canvas-we...
habrahabr.ru/post/117772
Но все же лучше изучить прогу по 3d, например blender, мощная, бесплатная, офигенная поддержка

Comments

[Elfrey]

Мне бы не хотелось использовать ничего, кроме Three.js. Я вообще слабо представляю каким образом мне может помочь 3ds Max.
За ссылки спасибо, но к сожалению это не то. Ближайший аналог того, что мне надо threejs.org/examples/webgl_postprocessing_godrays.html , но тут как раз используется то, что я пока не понимаю.

[makol]

@Elfrey Уважаемый, это сайт threejs.org вашего примера, у вас есть повод пообщаться именно с теми кто сможет подсказать решение : ) я бы списался, а те ссылки которые я вам скинул это раздел вопросов куда перенаправляет сайт на котором желаемый для вас результат

Answer 3

[sozercanie_kosmosa]

А что если конус использовать вместе с источником света таким образом ты получишь свет ведущий себя, как свет, только с эффектом прожектора, как в "Batman")).
Также возможен вариант применения к конусу шейдерного эффекта "glow" который сделает поток света более интересным, к сожалению не что не спасет этоти способы от сквозного проникновения через стены, так как что кое что придется рассчитывать самому.
Если данные реализации будут не по душе - нужно изучать шейдеры и рассчитывать все саму.

Вот несколько ссылок которые могут в этом помочь:
pixelshaders.com
www.airtightinteractive.com/2013/02/intro-to-pixel...

тут куча примеров:
glsl.heroku.com

так же есть хороший ресурс на котором можно спросить.

PS вообще есть реализации не через конус а через 2, 3, ... и более плоских объекта скрещенных между собой, дело остается за малым реализовать "клипинг" луч-поверхность

Answer 4

[Владислав Гриценко]

Если я правильно тебя понял, то это то, что тебе нужно: https://medium.com/@andrew_b_berg/volumetric-light...