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 相关文章推荐
Ctrl+Enter提交内容信息
Jun 26 Javascript
js中prototype用法详细介绍
Nov 14 Javascript
jquery删除ID为sNews的tr元素的内容
Apr 10 Javascript
基于jQuery实现的文字按钮表单特效整理
Dec 07 Javascript
JS版元素周期表实现方法
Aug 05 Javascript
浅谈JavaScript中的string拥有方法的原因
Aug 28 Javascript
JavaScript入门系列之知识点总结
Mar 24 Javascript
微信小程序入门教程
Nov 18 Javascript
浅析Node.js非对称加密方法
Jan 29 Javascript
微信小程序排坑指南详解
May 23 Javascript
解决微信小程序中转换时间格式IOS不兼容的问题
Feb 15 Javascript
Javascript中window.name属性详解
Nov 19 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脚本的10个技巧(5)
2006/10/09 PHP
关于更改Zend Studio/Eclipse代码风格主题的介绍
2013/06/23 PHP
php对二维数组进行排序的简单实例
2013/12/19 PHP
PHP获取一个字符串中间一部分字符的方法
2014/08/19 PHP
php去除头尾空格的2种方法
2015/03/16 PHP
打开新窗口关闭当前页面不弹出关闭提示js代码
2013/03/18 Javascript
js转义字符介绍
2013/11/05 Javascript
js用typeof方法判断undefined类型
2014/07/15 Javascript
javascript对中文按照拼音排序代码
2014/08/20 Javascript
JavaScript中的bold()方法使用详解
2015/06/08 Javascript
分享12个非常实用的JavaScript小技巧
2016/05/11 Javascript
Ztree新增角色和编辑角色回显问题的解决
2016/10/25 Javascript
vue-cli如何快速构建vue项目
2017/04/26 Javascript
jQuery插件imgAreaSelect基础讲解
2017/05/26 jQuery
express框架实现基于Websocket建立的简易聊天室
2017/08/10 Javascript
jQuery实现弹窗下底部页面禁止滑动效果
2017/12/19 jQuery
JS实现select选中option触发事件操作示例
2018/07/13 Javascript
JavaScript防止全局变量污染的方法总结
2018/08/02 Javascript
解决angularjs service中依赖注入$scope报错的问题
2018/10/02 Javascript
Vue.js仿Select下拉框效果
2020/02/18 Javascript
javaScript 实现重复输出给定的字符串的常用方法小结
2020/02/20 Javascript
[03:24]2014DOTA2国际邀请赛 神秘商店生意火爆
2014/07/18 DOTA
爬山算法简介和Python实现实例
2014/04/26 Python
python使用multiprocessing模块实现带回调函数的异步调用方法
2015/04/18 Python
Python求算数平方根和约数的方法汇总
2016/03/09 Python
在Django同1个页面中的多表单处理详解
2017/01/25 Python
python+pandas生成指定日期和重采样的方法
2018/04/11 Python
Python smtp邮件发送模块用法教程
2020/06/15 Python
Python2与Python3关于字符串编码处理的差别总结
2020/09/07 Python
一篇文章带你学习CSS3图片边框
2020/11/04 HTML / CSS
HTML5文档结构标签
2017/04/21 HTML / CSS
敏捷开发的主要原则都有哪些
2015/04/26 面试题
酒店管理毕业生自荐信
2014/05/25 职场文书
政府领导干部个人对照检查材料思想汇报
2014/09/24 职场文书
2015年家长学校工作总结
2015/04/22 职场文书
《社戏》教学反思
2016/02/22 职场文书