WebGL three.js学习笔记之阴影与实现物体的动画效果


Posted in Javascript onApril 25, 2019

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

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

 运行的结果如图:

WebGL three.js学习笔记之阴影与实现物体的动画效果

运行结果

 完整代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Three.js</title>
 <script src="../../../Import/three.js"></script>
 <script src="../../../Import/stats.js"></script>
 <script src="../../../Import/Setting.js"></script>
 <script src="../../../Import/OrbitControls.js"></script>
 <script src="../../../Import/dat.gui.min.js"></script>
 <style type="text/css">
 div#canvas-frame {
 border: none;
 cursor: pointer;
 width: 100%;
 height: 850px;
 background-color: #333333;
 }
 </style>
</head>
<body onload="threeStart()">
<div id="canvas-frame"></div>
<script>
 //控制面板中需要的两个数据
 let control = new function () {
 this.rotationSpeed = 0.01;
 this.jumpSpeed = 0.03;
 };
 let renderer, camera, scene;
 let controller;
 let width,height;

 //初始化渲染器
 function initThree() {
 width = document.getElementById('canvas-frame').clientWidth;
 height = document.getElementById('canvas-frame').clientHeight;
 renderer = new THREE.WebGLRenderer({
 antialias: true
 });//定义渲染器
 renderer.setSize(width, height);//设置渲染的宽度和高度
 document.getElementById("canvas-frame").appendChild(renderer.domElement);//将渲染器加在html中的div里面
 renderer.setClearColor(0x333333, 1.0);//渲染的颜色设置
 renderer.shadowMapEnabled = true;//开启阴影,默认是关闭的,太影响性能
 renderer.shadowMapType = THREE.PCFSoftShadowMap;//阴影的一个类型,可以不设置对比看效果
 }
 //初始化摄像机
 function initCamera() {
 camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);//perspective是透视摄像机,这种摄像机看上去画面有3D效果

 //摄像机的位置
 camera.position.x = 50;
 camera.position.y = 50;
 camera.position.z = 50;
 camera.up.x = 0;
 camera.up.y = 1;//摄像机的上方向是Y轴
 camera.up.z = 0;
 camera.lookAt(0, 0, 0);//摄像机对焦的位置
 //这三个参数共同作用才能决定画面
 }
 //初始化场景
 function initScene() {
 scene = new THREE.Scene();
 }
 //摄像机的控制,可以采用鼠标拖动来控制视野
 function cameraControl() {
 controller = new THREE.OrbitControls(camera, renderer.domElement);
 controller.target = new THREE.Vector3(0, 0, 0);
 }
 //一个很方便的控制面板,方便更改程序的参数
 function datGUI() {
 let gui = new dat.GUI();
 //可以设置可以调动的范围
 gui.add(control, "rotationSpeed", 0, 0.05);
 gui.add(control, "jumpSpeed", 0, 0.08);
 }
 //初始化灯光
 function initLight() {
 let light = new THREE.SpotLight(0xffffff, 1.0, 0);//点光源
 light.position.set(-40, 60, -10);
 light.castShadow = true;//开启阴影
 light.shadowMapWidth = 8192;//阴影的分辨率
 light.shadowMapHeight = 8192;
 scene.add(light);
 light = new THREE.AmbientLight(0xffffff, 0.2);//环境光,如果不加,点光源照不到的地方就完全是黑色的
 scene.add(light);
 }

 let cube;
 let sphere;

 //初始化物体
 function initObject() {
 //定义了一个地面
 let planeGeometry = new THREE.PlaneGeometry(100, 100, 1, 1);
 let planeMaterial = new THREE.MeshLambertMaterial({
 color: 0xcccccc,
 });
 let plane = new THREE.Mesh(planeGeometry, planeMaterial);
 plane.rotation.x = -0.5 * Math.PI;
 plane.position.x = 15;
 plane.receiveShadow = true;//开启地面的接收阴影
 scene.add(plane);//添加到场景中

 //定义了一个方块
 let cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
 let cubeMaterial = new THREE.MeshLambertMaterial({
 color: 0xff1111,
 });
 cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
 cube.position.x = -4;
 cube.position.y = 3;
 cube.position.z = 0;
 cube.castShadow = true;//开启阴影
 scene.add(cube);

 //定义了一个球体
 let sphereGeometry = new THREE.SphereGeometry(4, 100, 100);
 let sphereMaterial = new THREE.MeshLambertMaterial({
 color: 0xba7890,
 });
 sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
 sphere.position.x = 20;
 sphere.position.y = 4;
 sphere.position.z = 2;
 sphere.castShadow = true;//开启阴影
 scene.add(sphere);
 }
 //方块的自动旋转
 function cubeRotation() {
 cube.rotation.x += control.rotationSpeed;
 cube.rotation.y += control.rotationSpeed;
 cube.rotation.z += control.rotationSpeed;
 }

 let step = 0;
 //球体的抛物线运动轨迹
 function boxJump() {
 step += control.jumpSpeed;
 sphere.position.x = 20 + 10 * (Math.cos(step));
 sphere.position.y = 4 + 10 * (Math.abs(Math.sin(step)));
 }
 //定义的一个功能文件
 function initSetting() {
 loadAutoScreen(camera,renderer);
 loadFullScreen();
 loadStats();
 }
 //主函数
 function threeStart() {
 initThree();
 initCamera();
 initScene();
 initLight();
 initObject();
 cameraControl();
 datGUI();
 initSetting();
 animation();
 }
 //动画
 function animation() {
 cubeRotation();//方块旋转函数
 boxJump();//球体运动函数
 stats.update();//更新性能检测器

 renderer.clear();
 renderer.render(scene, camera);//开始渲染

 requestAnimationFrame(animation);//重复执行此函数,不停的渲染,达到动画的效果
 }
</script>
</body>
</html>

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

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

WebGL three.js学习笔记之阴影与实现物体的动画效果

plane.receiveShadow = true;
cube.castShadow = true;
 sphere.castShadow = true;

现在的效果是这样的:

WebGL three.js学习笔记之阴影与实现物体的动画效果

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

light.shadowMapWidth = 8192;
 light.shadowMapHeight = 8192;

默认的值应该是1024。

 此时的阴影效果是这样的

优化后阴影

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

总结

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

Javascript 相关文章推荐
用js遍历 table的脚本
Jul 23 Javascript
对xmlHttp对象方法和属性的理解
Jan 17 Javascript
P3P Header解决Cookie跨域的问题
Mar 12 Javascript
jquery中的查找parents与closest方法之间的区别
Dec 02 Javascript
jQuery实现从身份证号中获取出生日期和性别的方法分析
Feb 25 Javascript
详谈jQuery中使用attr(), prop(), val()获取value的异同
Apr 25 jQuery
Bootstrap模态框插件使用详解
May 11 Javascript
Vue内容分发slot(全面解析)
Aug 19 Javascript
JavaScript Math对象和调试程序的方法分析
May 13 Javascript
javascript自定义日期比较函数用法示例
Jul 22 Javascript
JS阻止事件冒泡的方法详解
Aug 26 Javascript
vue实现一个6个输入框的验证码输入组件功能的实例代码
Jun 29 Javascript
WebGL学习教程之Three.js学习笔记(第一篇)
Apr 25 #Javascript
Angular封装搜索框组件操作示例
Apr 25 #Javascript
Vue使用zTree插件封装树组件操作示例
Apr 25 #Javascript
详解javascript中的Error对象
Apr 25 #Javascript
Vue开发之封装上传文件组件与用法示例
Apr 25 #Javascript
vue2.0自定义指令示例代码详解
Apr 25 #Javascript
Vue开发之封装分页组件与使用示例
Apr 25 #Javascript
You might like
PHP.MVC的模板标签系统(二)
2006/09/05 PHP
深入理解require与require_once与include以及include_once的区别
2013/06/05 PHP
smarty的section嵌套循环用法示例
2016/05/28 PHP
JavaScript弹簧振子超简洁版 完全符合能量守恒,胡克定理
2009/10/25 Javascript
picChange 图片切换特效的函数代码
2010/05/06 Javascript
jQuery Dialog 弹出层对话框插件
2010/08/09 Javascript
JSDoc 介绍使用规范JsDoc的使用介绍
2011/02/12 Javascript
jQuery替换字符串(实例代码)
2013/11/13 Javascript
javaScript基础语法介绍
2015/02/28 Javascript
js实现数组转换成json
2015/06/26 Javascript
jquery实现触发时更新下拉列表内容的方法
2015/12/02 Javascript
详谈JS中实现种子随机数及作用
2016/07/19 Javascript
详解Vue自定义过滤器的实现
2017/01/10 Javascript
Bootstrap模态框使用详解
2017/02/15 Javascript
Vue 过渡实现轮播图效果
2017/03/27 Javascript
JQuery.dataTables表格插件添加跳转到指定页
2017/06/09 jQuery
微信小程序学习之数据处理详解
2017/07/05 Javascript
jQuery实现的分页插件完整示例
2020/05/26 jQuery
Javascript数组及类数组相关原理详解
2020/10/29 Javascript
[55:54]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python超简单解决约瑟夫环问题
2015/05/12 Python
Python中实现三目运算的方法
2015/06/21 Python
Python中常用信号signal类型实例
2018/01/25 Python
tf.truncated_normal与tf.random_normal的详细用法
2018/03/05 Python
PyTorch中常用的激活函数的方法示例
2019/08/20 Python
python 判断txt每行内容中是否包含子串并重新写入保存的实例
2020/03/12 Python
TensorFlow打印输出tensor的值
2020/04/19 Python
简单了解Python变量作用域正确使用方法
2020/06/12 Python
解析浏览器的一些“滚动”行为鉴赏
2019/09/16 HTML / CSS
感恩老师演讲稿400字
2014/08/28 职场文书
银行领导班子四风对照检查材料
2014/09/27 职场文书
公司股东出资证明书
2014/11/01 职场文书
医生学习党的群众路线教育实践活动心得体会
2014/11/03 职场文书
商超业务员岗位职责
2015/02/13 职场文书
自荐信格式范文
2015/03/04 职场文书
新手初学Java网络编程
2021/07/07 Java/Android