Question

全部。

我正在使用three.js 127，按照文档添加SpotLight。但是，阴影不会显示在场景中。下面，你可以找到我的场景。我已经将平面设置为接收阴影以及其他能够投射阴影的元素，但场景上没有渲染阴影。

      {if $listing.pagination.total_items > 1}
    {l s='There are %product_count% products.' d='Shop.Theme.Catalog' sprintf=['%product_count%' => $listing.pagination.total_items]}
  {else}
    {l s='There is 1 product.' d='Shop.Theme.Catalog'}
  {/if}

我是否缺少一些东西来渲染阴影？

Answer 1

我从您的代码中注意到一些可能导致此问题的事情：

最重要的是您没有在渲染器上启用 shadowMap，您可以这样做：

renderer.shadowMap.enabled = true;

这部分似乎没有出现在您链接的 SpotLight 文档中，有关这方面的更多信息可以在 SpotLightShadow 的文档中找到。

在 JS 沙箱上尝试此操作后，我仍然没有看到阴影，但似乎聚光灯太远了，它在 'z' 位置设置为 80。我将值设置得稍微小一些（40），它似乎可以解决问题。帮助我弄清楚的是通过使用帮助程序和 OrbitControls 这使得调试更容易一些：

import { OrbitControls } from 'https://cdn.jsdelivr.net/npm/three@0.127/examples/jsm/controls/OrbitControls.js';
...

spotLight.position.set(8, 40, 40); // Third parameter (z) with value of 80 was too far away

controls = new OrbitControls(camera, renderer.domElement);
helper = new THREE.PointLightHelper(pointLight);
scene.add(helper);

这是固定版本的 JSFiddle：https://jsfiddle.net/tombugolya/hx61L5vp/17/

三.js：投射聚光灯阴影

1 个答案: