three.js 设置光源和阴影投射

基于上一节内容对空间添加光源效果，以及物体的在平面的投影效果。

效果图：

坐标系

坐标系支持右手定则。图中红色是x轴，绿色是y轴，蓝色是z轴

涉及的改动点为：

• 将材质替换为可对光源产生反应的：MeshLambertMaterial
• 设置渲染器支持阴影渲染功能：renderer.shadowMap.enabled = true;
• 设置平面可接受阴影:plane.receiveShadow = true;
• 设置立方体/球体可投射阴影:cube.castShadow = true;
• 设置光源：spotLight

        //容器
        const container = document.getElementById('container')
        let sWidth = document.getElementById('container').clientWidth
        let scale = window.innerWidth / window.innerHeight
        console.log(sWidth, scale)
        //清空容器
        if(container.childNodes.length > 0){
    
    
            let node = document.getElementsByTagName('canvas')[0]
            container.removeChild(node)
        }
        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera( 45, scale, 0.1, 1000 );
        var renderer = new THREE.WebGLRenderer();
        renderer.setClearColor(new THREE.Color(0x000000))
        renderer.setSize(sWidth, sWidth / scale)

        // 设置渲染器支持阴影渲染功能
        renderer.shadowMap.enabled = true;
        // 坐标轴大小
        var axes = new THREE.AxesHelper(20)
        scene.add(axes)
        // 创建地面
        var planeGeometry = new THREE.PlaneGeometry(60, 20);

        // 将材质替换为可对光源产生反应的：MeshLambertMaterial
        var planeMaterial = new THREE.MeshLambertMaterial({
    
    
            color: 0xAAAAAA
        });
        var plane = new THREE.Mesh(planeGeometry, planeMaterial);
        // r旋转地面
        plane.rotation.x = -0.5 * Math.PI;
        plane.position.set(15, 0, 0);

        // 设置平面可接受阴影
        plane.receiveShadow = true;
        // 添加地面到场景中
        scene.add(plane);
        // 添加方块
        var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
        var cubeMaterial = new THREE.MeshLambertMaterial({
    
    
            color: 0xFF0000
        });
        var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
        // 设置方块位置
        cube.position.set(-4, 3, 0);

        // 设置立方体可投射阴影
        cube.castShadow = true;

        // 添加方块到场景中
        scene.add(cube);
        // 创建球体
        var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
        var sphereMaterial = new THREE.MeshLambertMaterial({
    
    
            color: 0x7777FF
        });
        var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
        // 设置球体位置
        sphere.position.set(20, 4, 2);
        

        // 添加球体到场景中
        scene.add(sphere);

        // 设置球体可投射阴影
        sphere.castShadow = true;

        // 放置相机位置
        camera.position.set(-30, 40, 30);
        camera.lookAt(scene.position);

        // 设置光源
        var spotLight = new THREE.SpotLight(0xFFFFFF);
        spotLight.position.set(-40, 40, -15);
        spotLight.castShadow = true;
        spotLight.shadow.mapSize = new THREE.Vector2(1024, 1024);
        spotLight.shadow.camera.far = 130;
        spotLight.shadow.camera.near = 40;
        scene.add(spotLight);
        
        // 添加canvas节点
        container.appendChild(renderer.domElement);

        // 渲染
        renderer.render(scene, camera)