经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » 软件/图像 » WebGL » 查看文章
WebGL three.js学习笔记之阴影与实现物体的动画效果
来源：jb51　　时间：2019/4/26 8:31:02　　对本文有异议

实现物体的旋转、跳动以及场景阴影的开启与优化

本程序将创建一个场景，并实现物体的动画效果

 运行的结果如图：

运行结果

 完整代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.  <meta charset="UTF-8">
  5.  <title>Three.js</title>
  6.  <script src="../../../Import/three.js"></script>
  7.  <script src="../../../Import/stats.js"></script>
  8.  <script src="../../../Import/Setting.js"></script>
  9.  <script src="../../../Import/OrbitControls.js"></script>
  10.  <script src="../../../Import/dat.gui.min.js"></script>
  11.  <style type="text/css">
  12.  div#canvas-frame {
  13.  border: none;
  14.  cursor: pointer;
  15.  width: 100%;
  16.  height: 850px;
  17.  background-color: #333333;
  18.  }
  19.  </style>
  20. </head>
  21. <body onload="threeStart()">
  22. <div id="canvas-frame"></div>
  23. <script>
  24.  //控制面板中需要的两个数据
  25.  let control = new function () {
  26.  this.rotationSpeed = 0.01;
  27.  this.jumpSpeed = 0.03;
  28.  };
  29.  let renderer, camera, scene;
  30.  let controller;
  31.  let width,height;
  32.  
  33.  //初始化渲染器
  34.  function initThree() {
  35.  width = document.getElementById('canvas-frame').clientWidth;
  36.  height = document.getElementById('canvas-frame').clientHeight;
  37.  renderer = new THREE.WebGLRenderer({
  38.  antialias: true
  39.  });//定义渲染器
  40.  renderer.setSize(width, height);//设置渲染的宽度和高度
  41.  document.getElementById("canvas-frame").appendChild(renderer.domElement);//将渲染器加在html中的div里面
  42.  renderer.setClearColor(0x333333, 1.0);//渲染的颜色设置
  43.  renderer.shadowMapEnabled = true;//开启阴影，默认是关闭的，太影响性能
  44.  renderer.shadowMapType = THREE.PCFSoftShadowMap;//阴影的一个类型，可以不设置对比看效果
  45.  }
  46.  //初始化摄像机
  47.  function initCamera() {
  48.  camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);//perspective是透视摄像机，这种摄像机看上去画面有3D效果
  49.  
  50.  //摄像机的位置
  51.  camera.position.x = 50;
  52.  camera.position.y = 50;
  53.  camera.position.z = 50;
  54.  camera.up.x = 0;
  55.  camera.up.y = 1;//摄像机的上方向是Y轴
  56.  camera.up.z = 0;
  57.  camera.lookAt(0, 0, 0);//摄像机对焦的位置
  58.  //这三个参数共同作用才能决定画面
  59.  }
  60.  //初始化场景
  61.  function initScene() {
  62.  scene = new THREE.Scene();
  63.  }
  64.  //摄像机的控制，可以采用鼠标拖动来控制视野
  65.  function cameraControl() {
  66.  controller = new THREE.OrbitControls(camera, renderer.domElement);
  67.  controller.target = new THREE.Vector3(0, 0, 0);
  68.  }
  69.  //一个很方便的控制面板，方便更改程序的参数
  70.  function datGUI() {
  71.  let gui = new dat.GUI();
  72.  //可以设置可以调动的范围
  73.  gui.add(control, "rotationSpeed", 0, 0.05);
  74.  gui.add(control, "jumpSpeed", 0, 0.08);
  75.  }
  76.  //初始化灯光
  77.  function initLight() {
  78.  let light = new THREE.SpotLight(0xffffff, 1.0, 0);//点光源
  79.  light.position.set(-40, 60, -10);
  80.  light.castShadow = true;//开启阴影
  81.  light.shadowMapWidth = 8192;//阴影的分辨率
  82.  light.shadowMapHeight = 8192;
  83.  scene.add(light);
  84.  light = new THREE.AmbientLight(0xffffff, 0.2);//环境光，如果不加，点光源照不到的地方就完全是黑色的
  85.  scene.add(light);
  86.  }
  87.  
  88.  let cube;
  89.  let sphere;
  90.  
  91.  //初始化物体
  92.  function initObject() {
  93.  //定义了一个地面
  94.  let planeGeometry = new THREE.PlaneGeometry(100, 100, 1, 1);
  95.  let planeMaterial = new THREE.MeshLambertMaterial({
  96.  color: 0xcccccc,
  97.  });
  98.  let plane = new THREE.Mesh(planeGeometry, planeMaterial);
  99.  plane.rotation.x = -0.5 * Math.PI;
  100.  plane.position.x = 15;
  101.  plane.receiveShadow = true;//开启地面的接收阴影
  102.  scene.add(plane);//添加到场景中
  103.  
  104.  //定义了一个方块
  105.  let cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
  106.  let cubeMaterial = new THREE.MeshLambertMaterial({
  107.  color: 0xff1111,
  108.  });
  109.  cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
  110.  cube.position.x = -4;
  111.  cube.position.y = 3;
  112.  cube.position.z = 0;
  113.  cube.castShadow = true;//开启阴影
  114.  scene.add(cube);
  115.  
  116.  //定义了一个球体
  117.  let sphereGeometry = new THREE.SphereGeometry(4, 100, 100);
  118.  let sphereMaterial = new THREE.MeshLambertMaterial({
  119.  color: 0xba7890,
  120.  });
  121.  sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
  122.  sphere.position.x = 20;
  123.  sphere.position.y = 4;
  124.  sphere.position.z = 2;
  125.  sphere.castShadow = true;//开启阴影
  126.  scene.add(sphere);
  127.  }
  128.  //方块的自动旋转
  129.  function cubeRotation() {
  130.  cube.rotation.x += control.rotationSpeed;
  131.  cube.rotation.y += control.rotationSpeed;
  132.  cube.rotation.z += control.rotationSpeed;
  133.  }
  134.  
  135.  let step = 0;
  136.  //球体的抛物线运动轨迹
  137.  function boxJump() {
  138.  step += control.jumpSpeed;
  139.  sphere.position.x = 20 + 10 * (Math.cos(step));
  140.  sphere.position.y = 4 + 10 * (Math.abs(Math.sin(step)));
  141.  }
  142.  //定义的一个功能文件
  143.  function initSetting() {
  144.  loadAutoScreen(camera,renderer);
  145.  loadFullScreen();
  146.  loadStats();
  147.  }
  148.  //主函数
  149.  function threeStart() {
  150.  initThree();
  151.  initCamera();
  152.  initScene();
  153.  initLight();
  154.  initObject();
  155.  cameraControl();
  156.  datGUI();
  157.  initSetting();
  158.  animation();
  159.  }
  160.  //动画
  161.  function animation() {
  162.  cubeRotation();//方块旋转函数
  163.  boxJump();//球体运动函数
  164.  stats.update();//更新性能检测器
  165.  
  166.  renderer.clear();
  167.  renderer.render(scene, camera);//开始渲染
  168.  
  169.  requestAnimationFrame(animation);//重复执行此函数，不停的渲染，达到动画的效果
  170.  }
  171. </script>
  172. </body>
  173. </html>

其中OrbitControls.js和dat.gui.min.js这两个文件都是Three.js自带的两个很好用的工具，第一个是可以让摄像机有轨道地进行移动，而不用再自己写函数去实现，第二个是一个轻量级的图形用户界面库（GUI 组件），使用这个库可以很容易地创建出能够改变代码变量的界面组件，方便我们测试程序。

另外如果想要在程序中开启阴影的话首先需要把renderer.shadowMapEnabled设置为true，默认是关闭的，因为实现阴影的效果是比较消耗性能的。同时要把light的投掷阴影开启light.castShadow = true，但是并不是所有的灯光都可以开启，比如环境光就不可以。每一个需要产生阴影的物体也要开启阴影，我们需要用地面来接收阴影，所以也需要开启地面的接收


  1. plane.receiveShadow = true；
  2. cube.castShadow = true;
  3.  sphere.castShadow = true;

现在的效果是这样的：


 可以看到，阴影是比较难看的，所以设置一些阴影的类型，PCFSoftShadowMap能让边缘柔和，但只是基于像素颗粒的边缘柔和。我们可以先使用此类型，然后再提高阴影的分辨率

  1. light.shadowMapWidth = 8192;
  2.  light.shadowMapHeight = 8192;

默认的值应该是1024。

 此时的阴影效果是这样的

优化后阴影

 至此，我们的场景还有物体的动画效果就已经实现。

总结

以上所述是小编给大家介绍的WebGL three.js学习笔记之阴影与实现物体的动画效果,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对w3xue网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

WebGL热门文章

  • WebGL学习之法线贴图
  • WebGL 与 WebGPU 比对[1] 前奏
  • WebGl 利用drawArrays、drawElements画三角形
  • WebGL之物体选择
  • WebGL模型拾取——射线法二
  • WebGL简易教程(十)：光照
  • WebGL学习之纹理盒
  • 纯Shading Language绘制HTML5时钟
  • WebGL简易教程(五)：图形变换(模型、视图、投影变换)
  • WebGL学习教程之Three.js学习笔记(第一篇)

    • WebGL推荐文章

  • 可视化学习：如何用WebGL绘制3D物体
  • webgl 系列 —— 渐变三角形
  • WebGL 与 WebGPU 比对[1] 前奏
  • WebGL简易教程(十二)：包围球与投影
  • WebGL简易教程(十一)：纹理
  • WebGL简易教程(十)：光照
  • WebGL简易教程(九)：综合实例：地形的绘制
  • 基于 HTML5 WebGL 的垃圾分类系统
  • WebGL简易教程(五)：图形变换(模型、视图、投影变换)
  • WebGL简易教程(六)：第一个三维示例(使用模型视图投影变换)

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号