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.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。
此时的阴影效果是这样的
至此，我们的场景还有物体的动画效果就已经实现。
WebGL three.js学习笔记 阴影与实现物体的动画的更多相关文章
- WebGL three.js学习笔记 6种类型的纹理介绍及应用
WebGL three.js学习笔记 6种类型的纹理介绍及应用 本文所使用到的demo演示: 高光贴图Demo演示 反光效果Demo演示(因为是加载的模型,所以速度会慢) (一)普通纹理 计算机图形学 ...
- WebGL three.js学习笔记 加载外部模型以及Tween.js动画
WebGL three.js学习笔记 加载外部模型以及Tween.js动画 本文的程序实现了加载外部stl格式的模型,以及学习了如何把加载的模型变为一个粒子系统,并使用Tween.js对该粒子系统进行 ...
- WebGL three.js学习笔记 使用粒子系统模拟时空隧道（虫洞）
WebGL three.js学习笔记 使用粒子系统模拟时空隧道 本例的运行结果如图: 时空隧道demo演示 Demo地址:https://nsytsqdtn.github.io/demo/sprite ...
- WebGL three.js学习笔记 法向量网格材质MeshNormalMaterial的介绍和创建360度全景天空盒的方法
WebGL学习----Three.js学习笔记(5) 点击查看demo演示 Demo地址:https://nsytsqdtn.github.io/demo/360/360 简单网格材质 MeshNor ...
- WebGL three.js学习笔记 创建three.js代码的基本框架
WebGL学习----Three.js学习笔记(1) webgl介绍 WebGL是一种3D绘图协议,它把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的 ...
- WebGL three.js学习笔记 自定义顶点建立几何体
自定义顶点建立几何体与克隆 Three.js本身已经有很多的网格模型,基本已经够我们的使用,但是如果我们还是想自己根据顶点坐标来建立几何模型的话,Three.js也是可以的. 基本效果如图: 点击查看 ...
- WebGL three.js学习笔记 纹理贴图模拟太阳系运转
纹理贴图的应用以及实现一个太阳系的自转公转 点击查看demo演示 demo地址:https://nsytsqdtn.github.io/demo/solar/solar three.js中的纹理 纹理 ...
- js学习笔记：webpack基础入门（一）
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- Vue.js学习笔记（2）vue-router
vue中vue-router的使用:
随机推荐
- 学习了解CyclicBarrier
CyclicBarrier我的理解就是一个线程等待器,用途就是将注册了这个barrier的线程卡在同一个位置,直到注册这个barrier的所有线程都完成之后,继续执行.下面是一个学习过程中采用的示例, ...
- HTML学习笔记8：表单
什么是表单? 一个网页表单可以将用户输入的数据发送到服务器进行处理.因为互联网用户使用复选框,单选按钮或文本字段填写表格,所以WebForms的形式类似文件或数据库.例如,WebForms ...
- 深入理解SpringBoot之自动装配
SpringBoot的自动装配是拆箱即用的基础,也是微服务化的前提.其实它并不那么神秘,我在这之前已经写过最基本的实现了,大家可以参考这篇文章.这次主要的议题是,来看看它是怎么样实现的,我们透过源代码 ...
- Python 简单实现数学四则运算
GitHub地址:https://github.com/compassblog/PythonExercise 一.题目描述 (1)能自动生成小学四则运算题目: (2)能支持真分数的四则运算: 二.实现 ...
- 原生 JavaScript 实现扫雷
学习了这么长时间的 JS,不能光看不练,于是就写了个小游戏练习一下.因为自己还是个菜鸟,所以有错误的话还请各位大佬多多指点,谢谢啦~ 如果感兴趣的话可以试试:Demo 项目地址:game-mineSw ...
- Win32项目生成的程序exe图标显示异常的问题
问题 如图: 用VS2013生成exe执行文件时发现的问题,起初以为是没添加ico图像的最小尺寸,后来查看ico并不是这个问题. Baidu.Google了半天找到原因:文件资源管理器的图标缓存bug ...
- HTTP Strict Transport Security实战详解
HTTP Strict Transport Security (通常简称为HSTS) 是一个安全功能,它告诉浏览器只能通过HTTPS访问当前资源, 禁止HTTP方式. 0×01. Freebuf百科: ...
- Scrapy 1.4 文档 02 安装指南
安装 Scrapy Scrapy 运行在 Python 2.7 和 Python 3.3 或更高版本上. 如果您使用的是 Anaconda 或 Miniconda,则可以从 conda-forge 通 ...
- 一次故障解决过程梳理：mysql varchar text timestamp
CHAR 类型的一个变体是 VARCHAR 类型,char(M),M是指字节长度,和varchar(M)一样 故障原因:mysql主键设置为int(9),但数据量已经大于int(9)的范围了 tips ...
- selenium提供的截图功能
get_screenshot_as_file()提供一个截屏功能.在自动化执行过程中,执行失败后只能看到代码的运行错误,而不能直接看到ui上的错误,利用截屏保存下来很容易的进行问题的判断 先来执行一个 ...