JavaScript/three.js: THREE.BufferGeometry 没有接收到任何光线或阴影

Question

我正在尝试使用噪声函数生成地形，但我在让 BufferGeometry 网格接收来自 PointLight 的任何光时遇到了问题。设置 AmbientLight 时，我可以看到 BufferGeometry，但只有 PointLight 它不起作用。它旁边的 CubeGeometry 适用于两种类型的光。我还希望地形接收阴影。我需要在网格上运行一些额外的方法吗？我在这里错过了什么？

https://jsfiddle.net/cbo8fx1s/

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://threejs.org/build/three.js"></script>
    <script>
      const scene = new THREE.Scene();
      const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
      camera.position.z = 30;
      const renderer = new THREE.WebGLRenderer({antialias: true});

      // scene.add(new THREE.AmbientLight(0xffffff));

      window.addEventListener('resize', () => {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
      });

      window.addEventListener('load', () => {
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        function animate() {
          requestAnimationFrame(animate);
          renderer.render(scene, camera);
        }
        animate();

        createScene();
      });

      function createScene() {
        (() => {
          const geometry = new THREE.BufferGeometry();
          // create a simple square shape. We duplicate the top left and bottom right
          // vertices because each vertex needs to appear once per triangle.
          const vertices = new Float32Array([
            -1.0, -1.0, 1.0,
            1.0, -1.0, 1.0,
            1.0, 1.0, 1.0,

            1.0, 1.0, 1.0,
            -1.0, 1.0, 1.0,
            -1.0, -1.0, 1.0
          ]);

          // itemSize = 3 because there are 3 values (components) per vertex
          geometry.addAttribute('position', new THREE.BufferAttribute(vertices, 3));

          const material = new THREE.MeshStandardMaterial({color: 0xffffff});
          const mesh = new THREE.Mesh(geometry, material);
          mesh.receiveShadow = false;
          scene.add(mesh);
        })();

        (() => {
          const geometry = new THREE.CubeGeometry(10, 8, 3);
          const material = new THREE.MeshStandardMaterial({color: 0xffffff});
          const mesh = new THREE.Mesh(geometry, material);
          mesh.castShadow = true;
          mesh.receiveShadow = false;
          mesh.position.y = 10;
          scene.add(mesh);
        })();

        (() => {
          const light = new THREE.PointLight(0x00ff00);
          light.position.z = 500;
          light.position.y = 500;
          scene.add(light);

          const light2 = new THREE.PointLight(0xff0000);
          light2.position.z = 500;
          light2.position.x = 500;
          scene.add(light2);
        })();
      }
    </script>
    <style>
      body {
        background: #000;
        margin: 0;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
  </body>
</html>

Answer 1

您的几何图形没有法线。没有法线，灯光就没有要着色的表面信息。

添加：

geometry.addAttribute('position', new THREE.BufferAttribute(vertices, 3));
geometry.computeVertexNormals() //<-- this

为了让你的广场出现。

JavaScript/three.js: THREE.BufferGeometry 没有接收到任何光线或阴影

JavaScript/three.js: THREE.BufferGeometry not receiving any light or shadows

javascript

light

three.js

buffer-geometry