Threejs-阴影的添加和平面的创建

      2021年04月13日 星期二 20:51:27     未分类      threejs    

1.创建渲染器之后,告知渲染器我需要渲染投影

renderer.shadowMap.enabled = true; //启用阴影

2.设置光源-SpotLight聚光灯

let spotlight = new THREE.SpotLight(0xffffff);
spotlight.position.set(8,4,15);
spotlight.cashShadow=true;//允许创建投影
scene.add(spolight);

3.添加平面*

let plane = new THREE.PlaneGeometry(14,18) //平面在x,y的长度(以平面中间处于原点的位置向轴两边扩散)
let planematerial = new THREE.MeshLambertMaterial({color: 0xffffff});
plane.receiveShadow = true; //平面接受阴影
//水平面旋转并且设置位置
plane.rotation.x = -0.5 * Math.PI;
plane.position.x = 0;
plane.position.y = 0;
plane.position.z = 0;
scene.add(plane);

这里需要提醒一下,需要物体拥有投影效果需要使用MeshPhongMaterial或者其他材质,不是默认MeshBasicMaterial.

想要物体有投影,需要使用cube.castShadow = true(即允许投影,在创建网格对象后使用),如下

//添加立方体
const geometry = new THREE.BoxGeometry(1,1,1)
//立方体材质
const material = new THREE.MeshPhongMaterial({color:0xcd9a5b});
//添加网格
const cube = new THREE.Mesh(geometry, material);
cube.castShadow = true;
cube.position.y = 0.5;
scene.add(cube);

上面我们创建了一个平面,而让它接受阴影,就需要使用plane.receiveShadow = true;什么是接受阴影?就是我们创建的聚光灯投射到正方体时候这个平面是否显示该正方体的阴影

源码我已经在https://scrimba.com/scrim/ckG2eLcM中编写,可以直接编译运行


暂无评论

发表评论