three.js创建阴影-CFANZ编程社区

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

<head>
    <meta charset="UTF-8">
    <title>three.js创建阴影</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            /* 隐藏body窗口区域滚动条 */
        }
        
        .mianban {
            position: absolute;
            left: 0;
            top: 0;
            z-index: 100;
        }
    </style>
    <!--引入three.js三维引擎-->
    <script src="./mrdoob-three.js-2a64f55/build/three.min.js"></script>
    <script src="./mrdoob-three.js-2a64f55/examples/js/controls/OrbitControls.js"></script>
    <!-- 引入three.js相机控件OrbitControls.js -->
</head>

<body>
    <div class="mianban">
        <!-- <button class="btn1">旋转</button> -->
    </div>
    <div id="Stats-output"></div>
    <script>
        var scene = new THREE.Scene();

        // 点光源
        // 添加光源
        // 创建立方体
        var cubeGeometry = new THREE.BoxGeometry(40, 40, 40);
        var cubeMaterial = new THREE.MeshLambertMaterial({
            color: 0xffff00
        });
        var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
        cube.position.x = 0;
        cube.position.y = 40;
        cube.position.z = 0;
        cube.castShadow = true;
        scene.add(cube); //点物体添加到场景中


        // 创建平面
        //环境光
        var ambient = new THREE.AmbientLight(0x444444);
        scene.add(ambient);

        var width = window.innerWidth; //窗口宽度
        var height = window.innerHeight; //窗口高度
        var k = width / height; //窗口宽高比
        var s = 300; //三维场景显示范围控制系数，系数越大，显示的范围越大
        var camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000);
        // var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
        camera.position.set(300, 500, 300); //设置相机位置
        camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
        // 添加光源
        var spotLight = new THREE.SpotLight(0xffffff);
        spotLight.position.set(0, 250, 110);
        spotLight.castShadow = true;
        //设置阴影分辨率
        spotLight.shadow.mapSize.width = 2048;
        spotLight.shadow.mapSize.height = 2048;
        scene.add(spotLight);

        // 创建平面
        var planeGeometry = new THREE.PlaneGeometry(400, 400);
        var planeMaterial = new THREE.MeshLambertMaterial({
            color: 0xeeeeee
        });
        var plane = new THREE.Mesh(planeGeometry, planeMaterial);
        // 使平面就接收物体投掷过来的阴影
        plane.receiveShadow = true;
        plane.rotation.x = -Math.PI / 2;
        scene.add(plane); //点添加到场景中
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(width, height); //设置渲染区域尺寸
        renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
        //开启阴影效果
        renderer.shadowMap.enabled = true;
        renderer.shadowMap.type = THREE.PCFSoftShadowMap;

        document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
        let x1 = 0,
            y1 = 0,
            z1 = 300;

        function render() {
            renderer.render(scene, camera); //执行渲染操作
        }
        // setInterval(() => {
        //     spotLight.position.set(x1++, 0, z1++);
        // }, 10);
        // 坐标轴
        var axisHelper = new THREE.AxesHelper(250);
        scene.add(axisHelper);
        render();


        window.onresize = function() {
            console.log(11);
            renderer.setSize(window.innerWidth, window.innerHeight);
            render();
        }


        var controls = new THREE.OrbitControls(camera, renderer.domElement);
        controls.addEventListener('change', render); //监听鼠标、键盘事件
    </script>
</body>

</html>