javascript - 三个js : Visible light for spotlight

标签 javascript three.js webgl light

在我目前的项目中,我需要做一个可见的聚光灯,就像那个叫 bat 侠的聚光灯一样。我的意思是那个光锥,你可以在夜空中看到它。 我没有任何图形或 3d 经验,我只是无法让光可见。 如果您能告诉我怎么做或提供一些建议,那就太好了。

这里是 codepen用于实验。 非常感谢。

附言我需要可见的整个锥体,而不仅仅是盒子的反射。

最佳答案

JSFiddle Demo of batsignal-type spotlight

由于多种原因,灯光(和阴影)可能很棘手。它们有很多参数,需要大量调整才能看起来正确。让灯出现可能有点违反直觉,这就是为什么这行代码是你最好的 friend :

light.shadowMapVisible = true;

光对象是不可见的。如果你看一个,你什么也看不到。如果您想要天空中的太阳照亮您的场景,则必须创建光源太阳对象(如果您想要看到某些东西)。

让光显现出来通常意味着提供一个可以让光照射的表面。在上面的例子中,那个表面是一个围绕着我们的球体。在我们的示例中,我们还构建了一个黄色透明圆锥体来伪造光束。尝试向该锥体添加纹理以获得更大的真实感。在现实生活中,这个圆锥体就像聚光灯反射空气中微小颗粒的光一样可见。在我们的 3d 世界中,没有粒子可以反射,除非我们将它们放在那里,因此是圆锥体。祝你好运!

提示:

  • 请记住,灯有很多种。有些可以转换阴影,有些则不能。有些只影响某些 Material 。

  • 渲染器有一个名为“maxLights”的参数,默认为 4。

关于javascript - 三个js : Visible light for spotlight,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21313249/

相关文章:

javascript - 如何在 Three.js 中查看两侧的自定义 2D 形状

php - 如何检查是否单击了提交,这样我的函数就不会触发?

javascript - Chrome 和 Firefox 对 url() 的解释不同,使 .replace() 正则表达式具有挑战性

javascript - 在没有 jQuery 的情况下禁用 pre IE9 中的按钮

javascript - 带有 WebGL 的服务器端 javascript?

opengl - WebGL 和 OpenGL 的区别

javascript - 在浏览器上,如何绘制每个 64-128 点的 100k 系列?

javascript - 为什么这个小的重定向不起作用(javascript)?

javascript - Three.js - 旋转后更大的边界框

javascript - 将 DIV 悬停在 ThreeJS 对象上,使其位置与 3D 世界同步