webGL 投影

2022-10-13 19:10:01

阴影需要什么？　

　　1.只有支持阴影的灯光才可以
　　　　pointLight，spotlight，directionallight

　　　　点光源，聚光灯，平行光

　　2.添加摄像机辅助器 THREE.CameraHelper
　　　　var helper = new THREE.CameraHelper(directionalLight.shadow.camera);
　　　　scene.add(helper);

　　3.查看阴影摄像机的相关设置
　　　　light.shadow.camera.left //此四项值为阴影投射方向,需要注意，正负值不确定，可以使用dat.gui.js，设置灯光等值，调试查看

　　　　light.shadow.camera. right

　　　　left为负,bottom为负，其他为正阴影投射在屏幕正前方

　　　　right为负，bottom为负阴影投射到屏幕的后方

　　　　light.shadow.camera.top

　　　　light.shadow.camera.bottom

　　　　light.shadow.camera.near //如果看不到阴影，远近截面设置不对，尝试远截面设置大一点

　　　　light.shadow.camera.far

　　4.最后一步需要确认几项设置

　　　　renderer.shadowMap.enabled = true; // // 告诉渲染器需要阴影效果

　　　　light.castShadow = true; // 灯光开启投影影射

　　　　mesh.castShdow = true; // 几何图形生成投影

　　　　plane.receiveShaow = true; // 平面接收阴影设置

可以查看这里：

https://www.hangge.com/blog/cache/detail_1812.html

测试案例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    html,
    body {
      margin: 0;
      height: 100%;
    }

    canvas {
      display: block;
    }
  </style>
</head>

<body>

</body>
<script src="https://johnson2heng.github.io/three.js-demo/lib/three.js"></script>
<script>
  var width = window.innerWidth;
  var height = window.innerHeight;
  var scene = new THREE.Scene();
  var renderer;
  var camera;
  var mesh1;
  var mesh2;
  var mesh3;
  // 渲染器
  function renders() {
    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(width, height);
    // 告诉渲染器需要阴影效果
    renderer.shadowMap.enabled = true;
    // 默认的没有设置的这个清晰 THREE.PCFShadowMap
    renderer.shadowMap.type = THREE.PCFSoftShadowMap;
    document.body.appendChild(renderer.domElement);
  }
  // 相机
  function cameras() {
    camera = new THREE.PerspectiveCamera(45, width / window.height, 0.1, 1000);
    camera.position.set(0, 40, 100);
    camera.lookAt(new THREE.Vector3(0, 0, 0));
  }
  // 灯光
  function light() {
    // 环境光
    var ambientLight = new THREE.AmbientLight("#111111");
    scene.add(ambientLight);
    // 平行光
    var directionalLight = new THREE.DirectionalLight("#ffffff");
    directionalLight.position.set(0, 40, 0); // 灯光位置 
    // 产生阴影设置
    directionalLight.shadow.camera.near = 20; //产生阴影的最近距离
    directionalLight.shadow.camera.far = 200; //产生阴影的最远距离
    directionalLight.shadow.camera.left = -50; //产生阴影距离位置的最左边位置
    directionalLight.shadow.camera.right = 50; //最右边
    directionalLight.shadow.camera.top = 50; //最上边
    directionalLight.shadow.camera.bottom = -50; //最下面

    //这两个值决定使用多少像素生成阴影 默认512
    directionalLight.shadow.mapSize.height = 1024;
    directionalLight.shadow.mapSize.width = 1024;
    //告诉平行光需要开启阴影投射
    directionalLight.castShadow = true;
    scene.add(directionalLight);

    var helper = new THREE.CameraHelper(directionalLight.shadow.camera);
    scene.add(helper);
  }
  // 几何体
  function geometry() {
    var geometry3 = new THREE.CylinderGeometry(5, 5, 10, 10);
    var material3 = new THREE.MeshLambertMaterial({ color: 0xffff00 });
    mesh1 = new THREE.Mesh(geometry3, material3); //网格模型对象Mesh
    mesh1.position.set(-20, 10, 10);//设置mesh3模型对象的xyz坐标为120,0,0
    mesh1.castShadow = true;
    scene.add(mesh1);

    //立方体
    var cubeGeometry = new THREE.CubeGeometry(10, 10, 10);
    var cubeMaterial = new THREE.MeshLambertMaterial({ color: 0x00ffff });
    mesh2 = new THREE.Mesh(cubeGeometry, cubeMaterial);
    mesh2.position.set(30, 15, 10);
    mesh2.castShadow = true;// 告诉立方体需要投射阴影
    scene.add(mesh2);
  }
  // 底部平面 
  function plan() {
    var planeGeometry = new THREE.PlaneGeometry(500, 500, 1, 1);
    // planeGeometry.vertices[0].uv = new THREE.Vector2(0, 0);
    // planeGeometry.vertices[1].uv = new THREE.Vector2(1, 0);
    // planeGeometry.vertices[2].uv = new THREE.Vector2(1, 1);
    // planeGeometry.vertices[3].uv = new THREE.Vector2(0, 1);
    // var texture = new THREE.TextureLoader().load("images/a.jpg");
    // 如果使用图片填充平面，需要启动web 服务器才可以
    var planeMaterial = new THREE.MeshLambertMaterial({
     // map: texture,
      color: 0xf1f1f1
    });
    var plane = new THREE.Mesh(planeGeometry, planeMaterial);
    plane.rotation.x = -0.5 * Math.PI;
    plane.position.y = -0.5 * Math.PI;
    //告诉底部平面需要接收阴影
    plane.receiveShadow = true;
    scene.add(plane);
  }

  function draw() {
    renderer.render(scene, camera);
    mesh1.rotation.x += 0.01;
    mesh1.rotation.y += 0.01;

    mesh2.rotation.x += 0.01;
    mesh2.rotation.y += 0.01;
    requestAnimationFrame(draw);
  }
  function main() {
    renders();
    cameras();
    light();
    geometry();
    plan();
    draw();
  }
  main();
</script>

</html>

web 服务器可以使用 http-server 通过npm 全局安装使用很方便

http-server -c-1 命令行进入指定文件夹启动服务

webGL 投影

码农公寓

相关文章