1.renderer设置

首先我们需要告诉renderer我们需要显示阴影效果：

//告诉渲染器需要阴影效果
renderer.shadowMap.enabled = true;

2、光源设置

其次需要设置正确的光源，光影，有光才有影。现实环境中，人们之所以能看得到物体，是因为有光，物体的材质反射光到人眼中。在ThreeJS中有几种光源，去模拟现实环境。
最常见的四种为：
环境光( AmbientLight )：笼罩在整个空间无处不在的光
点光源( PointLight )：向四面八方发射的单点光源
聚光灯( SpotLight )：发射出锥形状的光， 模拟手电筒，台灯等光源
平行光( DirectinalLight )：平行的一束光，模拟从很远处照射的太阳光

  // 平行光 const light2 = new THREE.DirectionalLight(0xffffff,0.5) light2.position.set(0, 0.2, 0.1)light2.castShadow = true;scene.add(light2)//点光源const light = new THREE.PointLight(0xffffff, 1, 100);light.position.set(0, 5, 5);light.castShadow = true;scene.add(light);

3、3d模型设置

需要在每个子网格上设置castShadow = true，如下所示：

var loader = new THREE.GLTFLoader();loader.load( 'xxx', function( gltf ) {//主要代码块gltf.scene.traverse( function( node ) {if ( node instanceof THREE.Mesh ) { node.castShadow = true; }} );scene.add( gltf.scene );} );

4、创建底部平面接收阴影设置

最后，添加一个接收阴影的平面，通过receiveShadow属性设置平面接收阴影。

   //添加平面, 绘制阴影var planeGeometry = new THREE.PlaneGeometry(100, 60, 10, 10);var planeMaterial = new THREE.ShadowMaterial();planeMaterial.opacity = 0.2;var plane = new THREE.Mesh(planeGeometry, planeMaterial);plane.rotation.x = -0.5 * Math.PI;plane.position.y = -2;plane.position.z = 0;plane.opacity = 0scene.add(plane);plane.receiveShadow = true;

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！