Fatal编程技术网
  • javascript/
  • JavaScript/three.js:three.BufferGeometry不接收任何灯光或阴影

JavaScript/three.js:three.BufferGeometry不接收任何灯光或阴影

javascript three.js

JavaScript/three.js:three.BufferGeometry不接收任何灯光或阴影,javascript,three.js,light,buffer-geometry,Javascript,Three.js,Light,Buffer Geometry,我正在尝试使用噪波函数生成地形，但在获取BufferGeometry网格以接收来自点光源的任何光时遇到了问题。设置AmbientLight时，我可以看到BufferGeometry，但只有PointLight无法工作。它旁边的容积测量法适用于这两种类型的光。我还希望地形接收阴影。我需要在网格上运行一些额外的方法吗？我错过了什么 const scene=new THREE.scene（）； const-camera=新的三视角摄像机（75，window.innerWidth/window.in

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


const scene=new THREE.scene（）；
const-camera=新的三视角摄像机（75，window.innerWidth/window.innerHeight，0.11000）；
摄像机位置z=30；
const renderer=new THREE.WebGLRenderer（{antialas:true}）；
//添加（新的3.AmbientLight（0xffffff））；
window.addEventListener（'resize'，（）=>{
camera.aspect=window.innerWidth/window.innerHeight；
camera.updateProjectMatrix（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
});
window.addEventListener（'load'，（）=>{
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
函数animate（）{
请求动画帧（动画）；
渲染器。渲染（场景、摄影机）；
}
制作动画（）；
createScene（）；
});
函数createScene（）{
(() => {
const geometry=new THREE.BufferGeometry（）；
//创建一个简单的正方形。我们复制左上角和右下角
//顶点，因为每个顶点需要在每个三角形中显示一次。
常量顶点=新数组([
-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，因为每个顶点有3个值（组件）
geometry.addAttribute（'position'，新的三个.BufferAttribute（顶点，3））；
const material=new THREE.MeshStandardMaterial（{color:0xffffff}）；
常量网格=新的三个网格（几何体、材质）；
mesh.receiveShadow=false；
场景。添加（网格）；
})();
(() => {
常数几何=新的三立方测量法（10,8,3）；
const material=new THREE.MeshStandardMaterial（{color:0xffffff}）；
常量网格=新的三个网格（几何体、材质）；
mesh.castShadow=true；
mesh.receiveShadow=false；
网格位置y=10；
场景。添加（网格）；
})();
(() => {
常量灯=新的三点灯（0x00ff00）；
光照位置z=500；
灯光位置y=500；
场景。添加（灯光）；
常量灯2=新的三点灯（0xff0000）；
2.位置z=500；
light2.位置x=500；
场景。添加（light2）；
})();
}
身体{
背景：#000；
保证金：0；
溢出：隐藏；
}
您的几何体没有法线。如果没有法线，灯光将没有要着色的曲面信息

加：

geometry.addAttribute（'position'，新的三个.BufferAttribute（顶点，3））；

geometry.computeVertexNormals（）//您的几何体没有法线。如果没有法线，灯光将没有要着色的曲面信息

加：


geometry.addAttribute（'position'，新的三个.BufferAttribute（顶点，3））；

geometry.computeVertexNormals（）//看看这个：。请注意渲染器的设置和灯光阴影的设置。看起来您完全没有提到法线，这是灯光工作所必需的。请查看以下内容：。请注意渲染器的设置和灯光阴影的设置。看起来您完全没有提到灯光工作所需的法线。或者，与其添加法线，不如使用
material=new THREE.meshsStandardMaterial（{color:0xffffff，flatShading:true}）在这种情况下，（三角形汤）结果将是相同的，如果平均法线（通过使用索引几何体/共享顶点），则使用平面着色将看起来不同。可能遇到不支持
dxdf
但可能不支持的设备。嗨，韦斯特，我希望你做得很好：）或者，代替添加法线，
material=new THREE.MeshStandardMaterial（{color:0xffffff，flatShading:true}）在这种情况下，（三角形汤）结果将是相同的，如果平均法线（通过使用索引几何体/共享顶点），则使用平面着色将看起来不同。可能遇到不支持
dxdf
但可能不支持的设备。嗨，韦斯特，我希望你一切顺利：）

<!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>



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