【问题标题】:ThreeJS creating a sunThreeJS 创建太阳
【发布时间】:2012-12-20 15:14:15
【问题描述】:

我正在尝试在 WebGL 中创建一个太阳系。 但是我不知道设置照明。 我想在我的太阳上放一盏灯,让它360度投射光。我的行星应该投射和接收阴影。为了实现这一点,我的灯光需要 360 度投射阴影。 有可能做这样的事情吗?如果是这样,怎么做?我应该使用哪种类型的灯?

我的太阳有一个 meshBasicMaterial,我的行星有一个 meshShaderMaterial。谁能给我一些示例代码?

谢谢!

【问题讨论】:

    标签: javascript html three.js webgl


    【解决方案1】:

    您应该为太阳添加THREE.PointLight - 它会将光线投射到各个方向。

    阴影比较复杂,因为 Three.js 中的点光源不支持阴影投射。您有一些不太理想的选择:

    • 使用 6 个仅限阴影的聚光灯或定向灯,阴影摄像机布置为指向每个世界轴(即进入立方体)。这将是相当昂贵的。
    • 使用一个(或多个)指向最感兴趣区域的阴影投射灯,例如用户当前正在查看的位置。
    • 自行实现全方位阴影贴图(例如,双抛物面阴影只需要两个阴影贴图而不是 6 个)。
    • 省略阴影。太空中可以接收阴影的表面并不多,所以你真的需要它们吗?

    请注意,在阴影接收对象上使用自定义ShaderMaterial,您需要自己在着色器中实现阴影(或包含三个.js 的阴影代码块)。

    【讨论】:

    • 好答案,我将使用始终指向用户正在查看的区域的灯,因为我是 Web 开发人员而不是 3D 程序员,而且我不知道如何编写我自己的着色器。现在添加阴影并不重要,但它可以让事情变得更加逼真(例如月亮在地球上投下阴影等)。
    • 请注意,THREE.PointLight 现在可以投射阴影。 threejs.org/docs/index.html#api/lights/PointLight
    【解决方案2】:

    听起来您需要使用全向灯。

    【讨论】:

    • 点光源是一种 360 度的光源。但是它不支持阴影投射。
    猜你喜欢
    • 2012-05-07
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-01-01
    • 2011-08-17
    • 1970-01-01
    • 2020-03-25
    相关资源
    最近更新 更多