Three.js——聚光灯、环境光、点光源、平行光、半球光

news2024/12/23 22:31:28

个人简介

👀个人主页： 前端杂货铺
🙋‍♂️学习方向： 主攻前端方向，正逐渐往全干发展
📃个人状态： 研发工程师，现效力于中国工业软件事业
🚀人生格言： 积跬步至千里，积小流成江海
🥇推荐学习：🍍前端面试宝典 🍉Vue2 🍋Vue3 🍓Vue2/3项目实战 🥝Node.js🍒Three.js🍖数据结构与算法体系教程

🌕个人推广：每篇文章最下方都有加入方式，旨在交流学习&资源分享，快加入进来吧

内容参考链接
WebGL专栏WebGL 入门
Three.js（一）创建场景、渲染三维对象、添加灯光、添加阴影、添加雾化
Three.js（二）scene场景、几何体位置旋转缩放、正射投影相机、透视投影相机

文章目录

    • 前言
    • GUI 图形用户界面
    • 一、聚光灯
    • 二、环境光
    • 三、点光源
    • 四、平行光
    • 五、半球光
    • 总结

前言

大家好，这里是前端杂货铺。

上篇文章我们学习了 scene场景、几何体位置旋转缩放、正射投影相机、透视投影相机。接下来，我们继续我们 three.js 的学习！

在学习的过程中，如若需要深入了解或扩展某些知识，可以自行查阅 => three.js官方文档。

GUI 图形用户界面

GUI （图形用户界面）是一种用户界面形式，它允许用户通过图形元素（如窗口、菜单、按钮）与电子设备（如计算机、智能手机和平板电脑）进行交互。

如 three.js 官网中，我们可以通过鼠标拖动红框内的任意线条进行修改属性，从而达到修改属性并实时呈现效果的目的。

在这里插入图片描述

对于以下光源，我们封装一下，使用 GUI 进行操作，总体代码如下：

./controls/index.js

// 定义基础类型，这里面存放的是光源的参数
const basicType = {
    // 颜色。默认为一个白色（0xffffff）的 Color 对象。
    color: {
        method: 'addColor',
        getValue: item => item.color.getStyle(),
        setValue: (item, value) => item.color.setStyle(value),
    },
    // 
    skyColor: {
        method: 'addColor',
        getValue: item => item.skyColor.getStyle(),
        setValue: (item, value) => item.skyColor.setStyle(value),
    },
    // 光照强度。默认值为 1
    intensity: {
        method: 'add',
        extends: [0, 2],
        getValue: item => item.intensity,
        setValue: (item, value) => item.intensity = +value,
    },
    // 光源照射的最大距离。默认值为 0（无限远）
    distance: {
        method: 'add',
        extends: [0, 1],
        getValue: item => item.distance,
        setValue: (item, value) => item.distance = +value,
    },
    // 光线照射范围的角度。默认值为 Math.PI/3
    angle: {
        method: 'add',
        extends: [0, Math.PI / 2],
        getValue: item => item.angle,
        setValue: (item, value) => item.angle = +value,
    },
    // 决定了光线强度递减的速度。
    exponent: {
        method: 'add',
        extends: [0, 20],
        getValue: item => item.exponent,
        setValue: (item, value) => item.exponent = +value,
    }
}

// 存放光源类型及光源对应的属性
const itemType = {
    SpotLight: ['color', 'intensity', 'distance', 'angle', 'exponent'], // 聚光灯
    AmbientLight: ['color'], // 环境光
    PointLight: ['color', 'intensity', 'distance'], // 点光源
    DirectionalLight: ['color', 'intensity'], // 平行光
    HemisphereLight: ['groundColor', 'intensity'] // 半球光
}

function initControls(item) {
    const typeList = itemType[item.type];
    const controls = {};

    if (!typeList || !typeList.length) {
        return;
    }
	
	// 创建 gui 实例
    const gui = new dat.GUI();

    for (let i = 0; i < typeList.length; i++) {
        const child = basicType[typeList[i]];
        if (child) {
            controls[typeList[i]] = child.getValue(item);

            const childExtends = child.extends || [];

			// 监听变化，设置 value
            gui[child.method || 'add'](controls, typeList[i], ...childExtends).onChange((value) => {
                child.setValue(item, value);
            })
        }
    }
}

一、聚光灯

光线从一个点沿一个方向射出，随着光线照射的变远，光线圆锥体的尺寸也逐渐增大。

聚光灯产生的是锥形效果，可以想象一下手电筒、路灯等光源。它需要设置光源的位置，以便产生我们需要的阴影效果。

new THREE.SpotLight(color, intensity, distance, angle, exponent)
参数名称描述默认值
color光源颜色无
intensity光照强度1
distance光源到光源结束的距离0（不会随着距离衰减）
angle光源颜色Math.PI / 3
exponent沿着光照距离的衰退量10
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/three/three.js"></script>
    <script src="../lib/three/dat.gui.js"></script>
    <script src="../controls/index.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <script>
        // 创建场景
        const scene = new THREE.Scene();
        // 创建相机 视野角度FOV、长宽比、近截面、远截面
        const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
        // 设置相机位置
        camera.position.set(0, 0, 20);

        // 创建渲染器
        const renderer = new THREE.WebGLRenderer();
        // 设置渲染器尺寸
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        // 添加立方体
        const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
        // 创建立方体材质
        const cubeMaterial = new THREE.MeshLambertMaterial({
            color: 0xff0000,
            wireframe: false
        });

        const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

        // 添加到场景
        scene.add(cube);

        // 添加球体
        const sphereGeometry = new THREE.SphereGeometry(1, 10, 10);
        // 创建球体材质
        const sphereMatrial = new THREE.MeshBasicMaterial({
            color: 0x00ff00,
            wireframe: false
        })
        const sphere = new THREE.Mesh(sphereGeometry, sphereMatrial);

        sphere.position.x = 3;
        sphere.position.y = 1;

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

        // 添加平面，用来接收阴影
        const planeGeometry = new THREE.PlaneGeometry(20, 30);
        const planeMaterial = new THREE.MeshBasicMaterial({
            color: 0x999999
        });
        const plane = new THREE.Mesh(planeGeometry, planeMaterial);

        plane.rotateZ(20);
        plane.position.z = -10;
        plane.position.x = 3;

        scene.add(plane);

        // 添加灯光
        const spotLight = new THREE.SpotLight(0xffffff);
        spotLight.position.set(-10, 10, 90);
        scene.add(spotLight);
        spotLight.shadowMapWidth = 3456; // 分辨率宽度
        spotLight.shadowMapHeight = 3456; // 分辨率高度 越大越清晰但也越消耗性能

        // 产生阴影
        cube.castShadow = true;
        sphere.castShadow = true;

        // 接收阴影
        plane.receiveShadow = true;

        // 设置灯光开启阴影
        spotLight.castShadow = true;

        renderer.shadowMapEnabled = true;
        
        initControls(spotLight);

        const animation = () => {
            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;

            sphere.rotation.x += 0.01;
            sphere.rotation.y += 0.01;
            // 渲染
            renderer.render(scene, camera);
            requestAnimationFrame(animation);
        }

        animation();
    </script>
</body>

</html>

聚光灯

二、环境光

环境光不需要设置位置，对整个场景内的对象都生效。
它没有特定的来源，也不会影响阴影的形成。
它不能作为场景内的唯一光源，需要配合其他光源使用。
它的作用是用来 减弱阴影，或者给物体添加一些颜色。

new THREE.AmbientLight(0x000000);
参数名称描述默认值
color光源颜色白色（0xffffff）
intensity光照强度1
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/three/three.js"></script>
    <script src="../lib/three/dat.gui.js"></script>
    <script src="../controls/index.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <script>
        // 创建场景
        const scene = new THREE.Scene();
        // 创建相机 视野角度FOV、长宽比、近截面、远截面
        const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
        // 设置相机位置
        camera.position.set(0, 0, 20);

        // 创建渲染器
        const renderer = new THREE.WebGLRenderer();
        // 设置渲染器尺寸
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        // 添加立方体
        const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
        // 创建立方体材质
        const cubeMaterial = new THREE.MeshLambertMaterial({
            color: 0xff0000,
            wireframe: false
        });

        const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

        // 添加到场景
        scene.add(cube);

        // 添加球体
        const sphereGeometry = new THREE.SphereGeometry(1, 10, 10);
        // 创建球体材质
        const sphereMatrial = new THREE.MeshLambertMaterial({
            color: 0x00ff00,
            wireframe: false
        })
        const sphere = new THREE.Mesh(sphereGeometry, sphereMatrial);

        sphere.position.x = 3;
        sphere.position.y = 1;

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

        // 添加平面，用来接收阴影
        const planeGeometry = new THREE.PlaneGeometry(20, 30);
        const planeMaterial = new THREE.MeshBasicMaterial({
            color: 0x999999
        });
        const plane = new THREE.Mesh(planeGeometry, planeMaterial);

        plane.rotateZ(20);
        plane.position.z = -10;
        plane.position.x = 3;

        scene.add(plane);

        // 添加环境光
        const ambientLight = new THREE.AmbientLight(0x000000);
        scene.add(ambientLight);

        // 添加灯光
        const spotLight = new THREE.SpotLight(0xffffff);
        spotLight.position.set(-10, 10, 90);
        scene.add(spotLight);

        // 产生阴影
        cube.castShadow = true;
        sphere.castShadow = true;

        // 接收阴影
        plane.receiveShadow = true;

        // 设置灯光开启阴影
        spotLight.castShadow = true;

        renderer.shadowMapEnabled = true;
        
        initControls(ambientLight);

        const animation = () => {
            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;
            
            // 渲染
            renderer.render(scene, camera);
            requestAnimationFrame(animation);
        }

        animation();
    </script>
</body>

</html>

环境光

三、点光源

单点发光，照射所有方向的光源（需要设置光源位置），它也不会生成阴影。

new THREE.PointLight(color, intensity, distance, decay);
参数名称描述默认值
color光源颜色白色（0xffffff）
intensity光照强度1
distance光源照射的最大距离0（无限远）
decay沿着光照距离的衰退量2
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/three/three.js"></script>
    <script src="../lib/three/dat.gui.js"></script>
    <script src="../controls/index.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <script>
        // 创建场景
        const scene = new THREE.Scene();
        // 创建相机 视野角度FOV、长宽比、近截面、远截面
        const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
        // 设置相机位置
        camera.position.set(0, 0, 20);

        // 创建渲染器
        const renderer = new THREE.WebGLRenderer();
        // 设置渲染器尺寸
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        // 添加立方体
        const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
        // 创建立方体材质
        const cubeMaterial = new THREE.MeshLambertMaterial({
            color: 0xff0000,
            wireframe: false
        });

        const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

        // 添加到场景
        scene.add(cube);

        // 添加球体
        const sphereGeometry = new THREE.SphereGeometry(1, 10, 10);
        // 创建球体材质
        const sphereMatrial = new THREE.MeshLambertMaterial({
            color: 0x00ff00,
            wireframe: false
        })
        const sphere = new THREE.Mesh(sphereGeometry, sphereMatrial);

        sphere.position.x = 3;
        sphere.position.y = 1;

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

        // 添加平面，用来接收阴影
        const planeGeometry = new THREE.PlaneGeometry(20, 30);
        const planeMaterial = new THREE.MeshBasicMaterial({
            color: 0x999999
        });
        const plane = new THREE.Mesh(planeGeometry, planeMaterial);

        plane.rotateZ(20);
        plane.position.z = -10;
        plane.position.x = 3;

        scene.add(plane);

        // 添加环境光
        const ambientLight = new THREE.AmbientLight(0x000000);
        scene.add(ambientLight);

        // 添加灯光
        const pointLight = new THREE.PointLight(0xffffff);
        pointLight.position.set(-10, 10, 90);
        scene.add(pointLight);

        // 产生阴影
        cube.castShadow = true;
        sphere.castShadow = true;

        // 接收阴影
        plane.receiveShadow = true;

        renderer.shadowMapEnabled = true;
        
        initControls(pointLight);

        const animation = () => {
            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;

            // 渲染
            renderer.render(scene, camera);
            requestAnimationFrame(animation);
        }

        animation();
    </script>
</body>

</html>

点光源

四、平行光

平行光，即太阳光，会生成阴影。

new THREE.DirectionalLight(0xffffff);
参数名称描述默认值
color光源颜色白色（0xffffff）
intensity光照强度1
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/three/three.js"></script>
    <script src="../lib/three/dat.gui.js"></script>
    <script src="../controls/index.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <script>
        // 创建场景
        const scene = new THREE.Scene();
        // 创建相机 视野角度FOV、长宽比、近截面、远截面
        const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
        // 设置相机位置
        camera.position.set(0, 0, 20);

        // 创建渲染器
        const renderer = new THREE.WebGLRenderer();
        // 设置渲染器尺寸
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        // 添加立方体
        const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
        // 创建立方体材质
        const cubeMaterial = new THREE.MeshLambertMaterial({
            color: 0xff0000,
            wireframe: false
        });

        const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

        // 添加到场景
        scene.add(cube);

        // 添加球体
        const sphereGeometry = new THREE.SphereGeometry(1, 10, 10);
        // 创建球体材质
        const sphereMatrial = new THREE.MeshLambertMaterial({
            color: 0x00ff00,
            wireframe: false
        })
        const sphere = new THREE.Mesh(sphereGeometry, sphereMatrial);

        sphere.position.x = 3;
        sphere.position.y = 1;

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

        // 添加平面，用来接收阴影
        const planeGeometry = new THREE.PlaneGeometry(20, 30);
        const planeMaterial = new THREE.MeshBasicMaterial({
            color: 0x999999
        });
        const plane = new THREE.Mesh(planeGeometry, planeMaterial);

        plane.rotateZ(20);
        plane.position.z = -10;
        plane.position.x = 3;

        scene.add(plane);

        // 添加环境光
        const ambientLight = new THREE.AmbientLight(0x000000);
        scene.add(ambientLight);

        // 添加灯光
        const directionalLight = new THREE.DirectionalLight(0xffffff);
        directionalLight.position.set(-10, 10, 90);
        scene.add(directionalLight);

        // 产生阴影
        cube.castShadow = true;
        sphere.castShadow = true;

        // 接收阴影
        plane.receiveShadow = true;
        directionalLight.castShadow = true;
        renderer.shadowMapEnabled = true;

		// 定义阴影相机的投影范围，用于平行光的阴影渲染，确定在场景中的覆盖范围
        directionalLight.shadowCameraLeft = -50;
        directionalLight.shadowCameraRight = 50;
        directionalLight.shadowCameraTop = 50;
        directionalLight.shadowCameraBottom = -50;
        directionalLight.shadowCameraNear = 2;
        directionalLight.shadowCameraFar = 200;

        directionalLight.shadowMapWidth = 4096;
        directionalLight.shadowMapHeight = 4096;
        
        initControls(directionalLight);

        const animation = () => {
            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;
 
            // 渲染
            renderer.render(scene, camera);
            requestAnimationFrame(animation);
        }

        animation();
    </script>
</body>

</html>

平行光

五、半球光

半球光模拟室外自然光照，不会生成阴影。

// skyColor groundColor intensity
new THREE.HemisphereLight(0xff00ff, 0x00ff00, 1);
参数名称描述默认值
skyColor模拟天空光源颜色白色（0xffffff）
groundColor模拟地面光源颜色白色（0xffffff）
intensity光照强度1
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/three/three.js"></script>
    <script src="../lib/three/dat.gui.js"></script>
    <script src="../controls/index.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <script>
        // 创建场景
        const scene = new THREE.Scene();
        // 创建相机 视野角度FOV、长宽比、近截面、远截面
        const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
        // 设置相机位置
        camera.position.set(0, 0, 20);

        // 创建渲染器
        const renderer = new THREE.WebGLRenderer();
        // 设置渲染器尺寸
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        // 添加立方体
        const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
        // 创建立方体材质
        const cubeMaterial = new THREE.MeshLambertMaterial({
            color: 0xff0000,
            wireframe: false
        });

        const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

        // 添加到场景
        scene.add(cube);

        // 添加球体
        const sphereGeometry = new THREE.SphereGeometry(1, 10, 10);
        // 创建球体材质
        const sphereMatrial = new THREE.MeshLambertMaterial({
            color: 0x00ff00,
            wireframe: false
        })
        const sphere = new THREE.Mesh(sphereGeometry, sphereMatrial);

        sphere.position.x = 3;
        sphere.position.y = 1;

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

        // 添加平面，用来接收阴影
        const planeGeometry = new THREE.PlaneGeometry(20, 30);
        const planeMaterial = new THREE.MeshBasicMaterial({
            color: 0x999999
        });
        const plane = new THREE.Mesh(planeGeometry, planeMaterial);

        plane.rotateZ(20);
        plane.position.z = -10;
        plane.position.x = 3;

        scene.add(plane);

        // 添加环境光
        const ambientLight = new THREE.AmbientLight(0x000000);
        scene.add(ambientLight);

        // 添加灯光
        const hemisphereLight = new THREE.HemisphereLight(0xff00ff, 0x00ff00);
        hemisphereLight.position.set(-10, 10, 30);
        scene.add(hemisphereLight);

        // 产生阴影
        cube.castShadow = true;
        sphere.castShadow = true;

        // 接收阴影
        plane.receiveShadow = true;
        renderer.shadowMapEnabled = true;
        
        initControls(hemisphereLight);

        const animation = () => {
            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;

            hemisphereLight.position.z -= 0.1;
 
            // 渲染
            renderer.render(scene, camera);
            requestAnimationFrame(animation);
        }

        animation();
    </script>
</body>

</html>

半球光

总结

本篇文章我们讲解了光源的基本使用，包括聚光灯、环境光、点光源、平行光和半球光。我们首先熟悉了GUI工具，然后经过逻辑封装使用在这一些列光源中。

更多内容扩展请大家自行查阅 => three.js官方文档，真心推荐读一读！！

好啦，本篇文章到这里就要和大家说再见啦，祝你这篇文章阅读愉快，你下篇文章的阅读愉快留着我下篇文章再祝！

参考资料：

  1. Three.js 官方文档
  2. WebGL+Three.js 入门与实战【作者：慕课网_yancy】

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1607905.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

阿里云服务器怎么更换暴露的IP

阿里云服务器怎么更换暴露的IP

很多客户阿里云服务器被攻击IP暴露&#xff0c;又不想迁移数据换服务器&#xff0c;其实阿里云服务器可以更换IP&#xff0c;今天就来和大家说说流程&#xff0c;云服务器创建成功后6小时内可以免费更换公网IP地址三次&#xff0c;超过6小时候就只能通过换绑弹性公网IP的方式来…
阅读更多...
探索人工智能绘图的奇妙世界

探索人工智能绘图的奇妙世界

探索人工智能绘图的奇妙世界 人工智能绘图的基本原理机器之美&#xff1a;AI绘图作品AI绘图对艺术创作的影响未来展望与挑战图书推荐&#x1f449;AI绘画教程&#xff1a;Midjourney使用方法与技巧从入门到精通内容简介获取方式&#x1f449;搜索之道&#xff1a;信息素养与终身…
阅读更多...
访问云平台中linux系统图形化界面，登录就出现黑屏的问题解决（ubuntu图形界面）

访问云平台中linux系统图形化界面，登录就出现黑屏的问题解决（ubuntu图形界面）

目录 一、问题-图形化界面访问黑屏 二、系统环境 &#xff08;一&#xff09;网络结构示意图 &#xff08;二&#xff09;内部机器版本 三、分析 四、解决过程 &#xff08;一&#xff09;通过MobaXterm远程访问图形化界面(未成功) 1、连接方法 2、连接结果 &#xf…
阅读更多...
【新版】系统架构设计师 - 知识点 - 结构化开发方法

【新版】系统架构设计师 - 知识点 - 结构化开发方法

个人总结&#xff0c;仅供参考&#xff0c;欢迎加好友一起讨论 文章目录 架构 - 知识点 - 结构化开发方法结构化开发方法结构化分析结构化设计 数据流图和数据字典模块内聚类型与耦合类型 架构 - 知识点 - 结构化开发方法 结构化开发方法 分析阶段 工具&#xff1a;数据流图、…
阅读更多...
VUE项目使用.env配置多种环境以及如何加载环境

VUE项目使用.env配置多种环境以及如何加载环境

第一步&#xff0c;创建多个环境配置文件 Vue CLI 项目默认使用 .env 文件来定义环境变量。你可以通过创建不同的 .env 文件来为不同环境设置不同的环境变量&#xff0c;例如&#xff1a; .env —— 所有模式共用.env.local —— 所有模式共用&#xff0c;但不会被 git 提交&…
阅读更多...
算法模板-线段树+懒标记

算法模板-线段树+懒标记

视频连接&#xff1a;C02【模板】线段树懒标记 Luogu P3372 线段树 1_哔哩哔哩_bilibili 题目链接&#xff1a;P3372 【模板】线段树 1 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) P3374 【模板】树状数组 1 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 算法思路 递…
阅读更多...
四大战略合作重磅签署，九章云极DataCanvas公司为全球智算生态注能

四大战略合作重磅签署，九章云极DataCanvas公司为全球智算生态注能

4月18日&#xff0c;备受瞩目的“2024九章云极DataCanvas智算操作系统新品发布会”上&#xff0c;九章云极DataCanvas公司携手新华出版社、曙光信息产业股份有限公司&#xff08;简称“中科曙光”&#xff09;、黄山旅游发展股份有限公司&#xff08;简称“黄山旅游”&#xff…
阅读更多...
51单片机串口输出问题（第一个字符重复，自动循环输出第一个字符）

51单片机串口输出问题（第一个字符重复，自动循环输出第一个字符）

遇到的问题描述 51单片机使用串口发送数据时出现只循环发送字符串的第一个字符的情况。就算发送的是第一个字符也有时候一直发送。 串口函数代码 参考串口发送注意 #include <reg52.h> //此文件中定义了单片机的一些特殊功能寄存器void UsartInit() {SCON0X50; /…
阅读更多...
在Spring Boot实战中碰到的拦截器与过滤器是什么？

在Spring Boot实战中碰到的拦截器与过滤器是什么？

在Spring Boot实战中&#xff0c;拦截器&#xff08;Interceptors&#xff09;和过滤器&#xff08;Filters&#xff09;是两个常用的概念&#xff0c;它们用于在应用程序中实现一些通用的逻辑&#xff0c;如日志记录、权限验证、请求参数处理等。虽然它们都可以用于对请求进行…
阅读更多...
Navicat连接postgresql时出现‘datlastsysoid does not exist‘报错的问题

Navicat连接postgresql时出现‘datlastsysoid does not exist‘报错的问题

连接报错 解决方案 解决方法1&#xff1a;升级navicat 解决方法2&#xff1a;降级pgsql 解决方法3&#xff1a;修改dll 使用3解决 实操演示 1、 打开 Navicat 安装目录&#xff0c;找到libcc.dll文件 2、备份libcc.dll文件&#xff0c;将其复制并粘贴或者修改副本为任何其他名…
阅读更多...
L2-045 堆宝塔

L2-045 堆宝塔

L2-045 堆宝塔 分数 25 全屏浏览 切换布局 作者 陈越 单位 浙江大学 堆宝塔游戏是让小朋友根据抓到的彩虹圈的直径大小&#xff0c;按照从大到小的顺序堆起宝塔。但彩虹圈不一定是按照直径的大小顺序抓到的。聪明宝宝采取的策略如下&#xff1a; 首先准备两根柱子&#xff…
阅读更多...
Linux：进程调度

Linux：进程调度

Linux&#xff1a;进程调度 进程优先级查看优先级调整优先级 Linux 2.6 内核进程调度队列 进程优先级 查看优先级 在Linux中&#xff0c;进程是有优先级的&#xff0c;我们可以通过指令ps -la来查看&#xff1a; 其中PRI表示priority优先级&#xff0c;在Linux中&#xff0c;…
阅读更多...
[openGL] 高级光照-Gamma矫正与衰减

[openGL] 高级光照-Gamma矫正与衰减

目录 一 衰减 二 衰减公式 三 使用场景 四 代码实现 4.1 部分代码 4.2 未校验的效果 4.3 Gamma校验后的效果 4.4 总结 本章节源码 点击此处 一 衰减 在之前平行光和投光物的部分中&#xff0c;了解了光源的衰减&#xff0c;对于平行光来说是不需要衰减的&#xff0c…
阅读更多...
中霖教育：二建考试中六个专业分别有什么特点？

中霖教育：二建考试中六个专业分别有什么特点？

建筑实务 《建筑实务》技术部分多以选择题为主&#xff0c;主要是对各种数据的考查;管理部分以案例题为主&#xff0c;旨在考查大家的综合能力&#xff0c;也是分值占比比较多的部分。进度控制的网络图和流水施工每年必考其一;质量管理主要结合技术部分命题;安全管理和合同管理…
阅读更多...
正式发布的Spring AI，能让Java喝上AI赛道的汤吗

正式发布的Spring AI，能让Java喝上AI赛道的汤吗

作者:鱼仔 博客首页: https://codeease.top 公众号:Java鱼仔 前言 最近几年AI发展实在太快了&#xff0c;仿佛只要半年没关注&#xff0c;一个新的大模型所产生的效果就能超越你的想象。Java在AI这条路上一直没什么好的发展&#xff0c;不过Spring最近出来了一个新的模块叫做S…
阅读更多...
高可用集群——keepalived

高可用集群——keepalived

目录 1 高可用的概念 2 心跳监测与漂移 IP 地址 3 Keepalived服务介绍 4 Keepalived故障切换转移原理介绍 5 Keepalived 实现 Nginx 的高可用集群 5.1 项目背景 5.2 项目环境 5.3 项目部署 5.3.1 web01\web02配置&#xff1a; 5.3.2nginx负载均衡配置 5.3.3 主调度服…
阅读更多...
全开源小狐狸Ai系统 小狐狸ai付费创作系统 ChatGPT智能机器人2.7.6免授权版

全开源小狐狸Ai系统 小狐狸ai付费创作系统 ChatGPT智能机器人2.7.6免授权版

内容目录 一、详细介绍二、效果展示1.部分代码2.效果图展示 三、学习资料下载 一、详细介绍 测试环境&#xff1a;Linux系统CentOS7.6、宝塔、PHP7.4、MySQL5.6&#xff0c;根目录public&#xff0c;伪静态thinkPHP&#xff0c;开启ssl证书 具有文章改写、广告营销文案、编程…
阅读更多...
商务品牌解决方案企业网站模板 Bootstrap5

商务品牌解决方案企业网站模板 Bootstrap5

目录 一.前言 二.展示 三.下载链接 一.前言 这个网站包含以下内容&#xff1a; 导航栏&#xff1a;主页&#xff08;Home&#xff09;、关于&#xff08;About&#xff09;、服务&#xff08;Services&#xff09;、博客&#xff08;Blog&#xff09;等页面链接。主页部分…
阅读更多...
基于Java+SpringBoot+Vue前后端分离仓库管理系统

基于Java+SpringBoot+Vue前后端分离仓库管理系统

基于JavaSpringBootVue前后端分离仓库管理系统 &#x1f345; 作者主页 央顺技术团队 &#x1f345; 欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; &#x1f345; 文末获取源码联系方式 &#x1f4dd; &#x1f345; 查看下方微信号获取联系方式 承接各种定制系统 &#…
阅读更多...
【机器学习】《机器学习建模基础》笔记

【机器学习】《机器学习建模基础》笔记

文章目录 单元0 前言单元1 数学建模与机器学习学习目标&#xff08;一&#xff09;什么是模型&#xff08;二&#xff09;数学模型的分类&#xff08;三&#xff09;数学建模的一般步骤&#xff08;四&#xff09;机器学习的概念 【我选择这本书的理由】 这本书比较简单&#x…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023