利用Three.js如何实现阴影效果实例代码
程序员文章站
2022-09-08 16:29:02
前言
众所周知作为webgl的插件，three.js肯定没有原生webgl那样，添加一个阴影这么费劲。所以，经过一小时的研究（笨人不聪明，已经是极限速度了）。终于将阴影效...
前言
众所周知作为webgl的插件，three.js肯定没有原生webgl那样，添加一个阴影这么费劲。所以，经过一小时的研究（笨人不聪明，已经是极限速度了）。终于将阴影效果做了出来，并且还发现一些容易犯错的地方。话不多说了，来一起看看详细的介绍吧。
先上效果图：
实现这个效果其实很简单，只需要设置几个属性就可以实现当前的效果。而上面的材质问题我将放到下一节：
（1）首先需要告诉渲染器我需要阴影，你给我生成阴影：
renderer.shadowmap.enabled = true;
（2）然后告诉灯光，我需要阴影：
light.castshadow = true;
（3）告诉模型哪些需要投射阴影：
//告诉球需要投射阴影 sphere.castshadow = true; //告诉立方体需要投射阴影 cube.castshadow = true;
（4）最后告诉最底下的平面长方形你要接受阴影：
plane.receiveshadow = true;
上面四步只要设置好了，就可以实现阴影的效果了。
注意事项：你的模型的材质一定要选择对灯光有反应的材质，要不然不会出现效果，就是因为这个问题导致好长时间没有整出来阴影。
案例全部代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<style type="text/css">
html, body {
margin: 0;
height: 100%;
}
canvas {
display: block;
}
</style>
</head>
<body onload="draw();">
</body>
<script src="build/three.js"></script>
<script src="examples/js/controls/trackballcontrols.js"></script>
<script src="examples/js/libs/stats.min.js"></script>
<script>
var renderer;
function initrender() {
renderer = new three.webglrenderer({antialias:true});
renderer.setsize(window.innerwidth, window.innerheight);
//告诉渲染器需要阴影效果
renderer.shadowmap.enabled = true;
renderer.shadowmap.type = three.pcfsoftshadowmap; // 默认的是，没有设置的这个清晰 three.pcfshadowmap
document.body.appendchild(renderer.domelement);
}
var camera;
function initcamera() {
camera = new three.perspectivecamera(45, window.innerwidth/window.innerheight, 0.1, 1000);
camera.position.set(0, 40, 100);
camera.lookat(new three.vector3(0,0,0));
}
var scene;
function initscene() {
scene = new three.scene();
}
var light;
function initlight() {
scene.add(new three.ambientlight(0x444444));
light = new three.spotlight(0xffffff);
light.position.set(60,30,0);
//告诉平行光需要开启阴影投射
light.castshadow = true;
scene.add(light);
}
function initmodel() {
//上面的球
var spheregeometry = new three.spheregeometry(5,20,20);
var spherematerial = new three.meshstandardmaterial({color:0x7777ff});
var sphere = new three.mesh(spheregeometry, spherematerial);
sphere.position.y = 5;
//告诉球需要投射阴影
sphere.castshadow = true;
scene.add(sphere);
//辅助工具
var helper = new three.axishelper(10);
scene.add(helper);
//立方体
var cubegeometry = new three.cubegeometry(10,10,8);
var cubematerial = new three.meshlambertmaterial({color:0x00ffff});
var cube = new three.mesh(cubegeometry, cubematerial);
cube.position.x = 25;
cube.position.y = 5;
cube.position.z = -5;
//告诉立方体需要投射阴影
cube.castshadow = true;
scene.add(cube);
//底部平面
var planegeometry = new three.planegeometry(100,100);
var planematerial = new three.meshstandardmaterial({color:0xaaaaaa});
var plane = new three.mesh(planegeometry, planematerial);
plane.rotation.x = - 0.5 * math.pi;
plane.position.y = -0;
//告诉底部平面需要接收阴影
plane.receiveshadow = true;
scene.add(plane);
}
//初始化性能插件
var stats;
function initstats() {
stats = new stats();
document.body.appendchild(stats.dom);
}
//用户交互插件 鼠标左键按住旋转，右键按住平移，滚轮缩放
var controls;
function initcontrols() {
controls = new three.trackballcontrols( camera );
//旋转速度
controls.rotatespeed = 5;
//变焦速度
controls.zoomspeed = 3;
//平移速度
controls.panspeed = 0.8;
//是否不变焦
controls.nozoom = false;
//是否不平移
controls.nopan = false;
//是否开启移动惯性
controls.staticmoving = false;
//动态阻尼系数 就是灵敏度
controls.dynamicdampingfactor = 0.3;
//未知，占时先保留
//controls.keys = [ 65, 83, 68 ];
controls.addeventlistener( 'change', render );
}
function render() {
renderer.render( scene, camera );
}
//窗口变动触发的函数
function onwindowresize() {
camera.aspect = window.innerwidth / window.innerheight;
camera.updateprojectionmatrix();
controls.handleresize();
render();
renderer.setsize( window.innerwidth, window.innerheight );
}
function animate() {
//更新控制器
render();
//更新性能插件
stats.update();
controls.update();
requestanimationframe(animate);
}
function draw() {
initrender();
initscene();
initcamera();
initlight();
initmodel();
initcontrols();
initstats();
animate();
window.onresize = onwindowresize;
}
</script>
</html>
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家学习或者使用three.js具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对的支持。
上一篇： 浅谈mint-ui 填坑之路
下一篇： 给vue项目添加ESLint的详细步骤