threejs学习笔记(10)

最新推荐文章于 2021-04-18 23:33:39 发布

转载最新推荐文章于 2021-04-18 23:33:39 发布 · 97 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/cly84920/p/4426412.html

本文详细介绍了three.js中如何使用webgl实现阴影效果，包括设置阴影参数、理解常见材质类型及其与灯光的关系，以及二维平面形状的创建。通过几个关键步骤，深入浅出地解释了three.js在阴影与材质方面的应用。

demo地址：http://www.adanghome.com/js_demo/41/

====================================================

1）webgl的原生接口是不带阴影功能的，而threejs对阴影做了封装，简单设置几个参数就可以实现阴影了。

renderer.shadowMapEnabled = true;

light.castShadow = true;

cubeMesh.castShadow = true;

plane.receiveShadow = true;

2）常见的材质有MeshNormalMaterial、MeshBasicMaterial、MeshLambertMaterial、MeshPhongMaterial这几种，材质和灯光有直接关系。其中normal不接收颜色参数，会自动生成颜色，并且不受灯光影响。basic可以接收颜色，也不受光线影响。lambert是漫反射材质，受光线影响。phong是高光高反射材质，受光线影响。

3）二维平面，形状用PlaneGeometry类。

转载于:https://www.cnblogs.com/cly84920/p/4426412.html