一、效果图：
二、实现过程
1、加载光影贴图
在给添加光影贴图时，要给底面物体接收阴影才能看到效果
//var geometry = new THREE.SphereGeometry(40, 100, 40);var material = new THREE.MeshLambertMaterial({color: 0x0000ff});var mesh = new THREE.Mesh(geometry, material);mesh.position.set(0,40,0)scene.add(mesh);// 设置产生投影的网格模型mesh.castShadow = true;//创建一个平面几何体作为投影面var planeGeometry = new THREE.PlaneGeometry(300, 200);planeGeometry.faceVertexUvs[1] = planeGeometry.faceVertexUvs[0];var textureLoader = new THREE.TextureLoader();// 加载光照贴图var textureLight = textureLoader.load('cshadow.webp');var planeMaterial = new THREE.MeshLambertMaterial({color: 0x999999,lightMap:textureLight,// 设置光照贴图lightMapIntensity:0.5,//烘培光照的强度. 默认 1.});var planeMesh = new THREE.Mesh(planeGeometry, planeMaterial); //网格模型对象MeshplaneMesh.rotateX(-Math.PI / 2); //旋转网格模型//接受阴影planeMesh.receiveShadow= true;scene.add(planeMesh);
3、初始化场景
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>光照贴图</title><style>body {margin: 0;overflow: hidden;/* 隐藏body窗口区域滚动条 */}</style><!--引入three.js三维引擎--><script src="js/yanhuang/three.js"></script><!-- 引入threejs扩展控件OrbitControls.js --><script src="js/yanhuang/OrbitControls.js"></script></head><body><script>/*** 创建场景对象Scene*/var scene = new THREE.Scene();/*** 光源设置*///点光源var point = new THREE.PointLight(0xffffff);point.position.set(-100,200, 0); //点光源位置point.castShadow = true;scene.add(point); //点光源添加到场景中/*** 相机设置*/var width = window.innerWidth; //窗口宽度var height = window.innerHeight; //窗口高度var k = width / height; //窗口宽高比var s = 150; //三维场景显示范围控制系数，系数越大，显示的范围越大//创建相机对象var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);camera.position.set(100, 200, 100); //设置相机位置camera.lookAt(scene.position); //设置相机方向(指向的场景对象)camera.castShadow = true;/*** 创建渲染器对象*/var renderer = new THREE.WebGLRenderer();renderer.setSize(width, height); //设置渲染区域尺寸renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色//允许渲染阴影renderer.shadowMap.enabled = true;document.body.appendChild(renderer.domElement); //body元素中插入canvas对象// 渲染函数function render() {renderer.render(scene, camera); //执行渲染操作requestAnimationFrame(render);//请求再次执行渲染函数render，渲染下一帧}var axisHelper = new THREE.AxisHelper(250,250,250);scene.add(axisHelper);render();//创建控件对象 相机对象camera作为参数 控件可以监听鼠标的变化，改变相机对象的属性var controls = new THREE.OrbitControls(camera);</script></body></html>
