WebGL three.js学习笔记 阴影与实现物体的动画
程序员文章站
2022-08-10 09:15:31
实现物体的旋转、跳动以及场景阴影的开启与优化，本程序将创建一个场景，并实现物体的动画效果 ......
实现物体的旋转、跳动以及场景阴影的开启与优化
本程序将创建一个场景，并实现物体的动画效果
运行的结果如图：
完整代码如下：
<!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。
此时的阴影效果是这样的
至此，我们的场景还有物体的动画效果就已经实现。
上一篇： AJAX防止页面缓存的代码