摘要：另外如果想要在程序中开启阴影的话首先需要把设置为，默认是关闭的，因为实现阴影的效果是比较消耗性能的。此时的阴影效果是这样的至此，我们的场景还有物体的动画效果就已经实现。
实现物体的旋转、跳动以及场景阴影的开启与优化
本程序将创建一个场景，并实现物体的动画效果
运行的结果如图：
完整代码如下：
Three.js
其中OrbitControls.js和dat.gui.min.js这两个文件都是Three.js自带的两个很好用的工具，第一个是可以让摄像机有轨道地进行移动，而不用再自己写函数去实现，第二个是一个轻量级的图形用户界面库（GUI 组件），使用这个库可以很容易地创建出能够改变代码变量的界面组件，方便我们测试程序。
另外如果想要在程序中开启阴影的话首先需要把renderer.shadowMapEnabled设置为true，默认是关闭的，因为实现阴影的效果是比较消耗性能的。同时要把light的投掷阴影开启light.castShadow = true，但是并不是所有的灯光都可以开启，比如环境光就不可以。每一个需要产生阴影的物体也要开启阴影，我们需要用地面来接收阴影，所以也需要开启地面的接收阴影
plane.receiveShadow = true；
cube.castShadow = true;
sphere.castShadow = true;
可以看到，阴影是比较难看的，所以设置一些阴影的类型，PCFSoftShadowMap能让边缘柔和，但只是基于像素颗粒的边缘柔和。我们可以先使用此类型，然后再提高阴影的分辨率light.shadowMapWidth = 8192;
light.shadowMapHeight = 8192;
默认的值应该是1024。
此时的阴影效果是这样的
至此，我们的场景还有物体的动画效果就已经实现。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/103812.html
摘要：对于自身不能发光的物体，需要给场景添加光源从而达到可视的效果。中渲染阴影的开销比较大，所以默认物体是没有阴影的，需要单独开启。主要用于检测动画运行时的帧数，可以显示表示每秒多少帧和每帧多少毫秒，越大越好，但太大会影响性能，一般为左右。 一、WebGL 与 three.js WebGL（Web Graphics Library）是一种3D绘图协议，它允许把JavaScript和OpenG...
摘要：上帝觉得缺少了些生气，便用泥巴捏了一个小人儿，不叫亚当，她叫小芳。接下来预先恭喜你，你可以成为这网页世界的一个小上帝。使用可以向场景中发射光线。在下述案例中，从摄像机的位置向场景中鼠标的点击位置发射光线。 先得摆出几个关键词：场景、灯光、模型、材质、贴图与纹理、相机、渲染器。然后我开始装模作样地解释： 上帝说，要有场景！于是就有了场景，场景去纳这万事万物。 上帝说，要有光！于是就有了光...
摘要：上帝觉得缺少了些生气，便用泥巴捏了一个小人儿，不叫亚当，她叫小芳。接下来预先恭喜你，你可以成为这网页世界的一个小上帝。使用可以向场景中发射光线。在下述案例中，从摄像机的位置向场景中鼠标的点击位置发射光线。 先得摆出几个关键词：场景、灯光、模型、材质、贴图与纹理、相机、渲染器。然后我开始装模作样地解释： 上帝说，要有场景！于是就有了场景，场景去纳这万事万物。 上帝说，要有光！于是就有了光...
摘要：环境光的位置对呈现的效果无任何效果环境光的构造函数只有一个参数进制的颜色值。半球光点光源点光源的光线来自同一点，并向外发射。点光源的构造函数有三个参数，比平行光多了一个距离参数，光会从光源经过的距离一路衰减为。 Lightapi 光源的基类。 Light( color, intensity ) color 光源颜色的RGB数值 intensity 光源强度的数值。 看到的颜色 使...
阅读 1198·2021-11-15 11:37
阅读 2192·2021-09-23 11:21
阅读 1273·2019-08-30 15:55
阅读 2088·2019-08-30 15:55
阅读 2757·2019-08-30 15:52
阅读 2793·2019-08-30 11:12
阅读 1556·2019-08-29 18:45
阅读 1858·2019-08-29 14:04
