threejs使场景中物体产生阴影(并设置阴影分辨率)

一、对render设置

render.shadowMapEnabled=true; // 告诉 render我们需要阴影(允许阴影隐射)
render.shadowMap.type = THREE.PCFSoftShadowMap; //阴影类型

二、对接收阴影的物体设置

plane.receiveShadow=true;	//地面接受阴影 

三、对产生阴影的物体设置

cude.castShadow = true;//cast投射,就是方块投射阴影 

四、对灯光设置

    // 对灯光设置
    directionLight.castShadow = true;
    //设置阴影分辨率
    directionLight.shadow.mapSize.width = 2048;
    directionLight.shadow.mapSize.height = 2048;

五、代码实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>threejs使场景中物体产生阴影</title>
    <script src="../../lib/three.js"></script>
</head>
<body>
<script>
    /**
     * 创建场景对象Scene
     */
    var scene = new THREE.Scene();
    /**
     * 创建网格模型
     */
    var material = new THREE.MeshPhongMaterial( { color: 0x4080ff, dithering: true } );
    var geometry = new THREE.BoxBufferGeometry( 3, 1, 2 );
    var mesh = new THREE.Mesh( geometry, material );
    mesh.position.set( 4, 1, 0 );

    // 对产生阴影的物体设置
    mesh.castShadow = true;
    scene.add( mesh );

    var planeMaterial = new THREE.MeshPhongMaterial( { color: 0x808080} );
    var planeGeometry = new THREE.PlaneBufferGeometry( 2000, 2000 );
    var planeMesh = new THREE.Mesh( planeGeometry, planeMaterial );
    planeMesh.position.set( 0, 0, 0 );
    planeMesh.rotation.x = - Math.PI * 0.5;

    // 对接收阴影的物体设置
    planeMesh.receiveShadow = true;
    scene.add( planeMesh );


    directionLight=new THREE.DirectionalLight(0xffffff, 1);
    directionLight.position.set( 0, 100, 85 );

    // 对灯光设置
    directionLight.castShadow = true;
    //设置阴影分辨率
    directionLight.shadow.mapSize.width = 2048;
    directionLight.shadow.mapSize.height = 2048;

    directionLight.distance = 500;
    directionLight.target = mesh;
    scene.add( directionLight );


    //环境光
    var ambient = new THREE.AmbientLight(0xeeeeee);
    scene.add(ambient);
    /**
     * 相机设置
     */
    var width = window.innerWidth; //窗口宽度
    var height = window.innerHeight; //窗口高度
    //创建相机对象
    camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 1000 );
    camera.position.set( 15, 8, - 10 );
    camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
    /**
     * 创建渲染器对象
     */
    var renderer = new THREE.WebGLRenderer({antialias:true});

    // 对render设置
    renderer.shadowMap.enabled = true;
    renderer.shadowMap.type = THREE.PCFSoftShadowMap;

    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(width, height);//设置渲染区域尺寸
    renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
    document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
    //执行渲染操作   指定场景、相机作为参数
    renderer.render(scene, camera);
</script>
</body>
</html>

六、实例效果

threejs使场景中物体产生阴影(并设置阴影分辨率)_第1张图片

你可能感兴趣的:(threejs,javascript,3d,html5,threejs,阴影)