学习threejs，使用HemisphereLight半球光

gis分享者2025-02-14 8:26

👨‍⚕️ 主页： gis分享者

👨‍⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅!

👨‍⚕️ 收录于专栏：threejs gis工程师

文章目录

一、🍀前言

本文详细介绍如何基于threejs在三维场景中使用HemisphereLight半球光，亲测可用。希望能帮助到您。一起学习，加油！加油！

1.1 ☘️THREE.HemisphereLight

THREE.HemisphereLight 半球光，颜色是从天空到地面两个颜色之间的渐变，与物体材质的颜色作叠加后得到最终的颜色效果。一个点受到的光照颜色是由所在平面的朝向（法向量）决定的 ------ 面向正上方就受到天空的光照颜色，面向正下方就受到地面的光照颜色，其他角度则是两个颜色渐变区间的颜色。
半球光不能投射阴影。

构造函数：

THREE.HemisphereLight( skyColor : Integer, groundColor : Integer, intensity : Float )

  • skyColor - (可选参数) 天空中发出光线的颜色。 缺省值 0xffffff。
  • groundColor - (可选参数) 地面发出光线的颜色。 缺省值 0xffffff。
  • intensity - (可选参数) 光照强度。 缺省值 1。

创建一个半球光。

属性：

.color : Color

光源的颜色。如果构造的时候没有传递，默认会创建一个新的 Color 并设置为白色。

.intensity : Float

光照的强度，或者说能量。 在 physically correct 模式下, color 和强度 的乘积被解析为以坎德拉（candela）为单位的发光强度。 默认值 - 1.0

.isLight : Boolean

只读标志，用于检查给定对象是否为 Light 类型。

.castShadow : Boolean

该参数在构造时被设置为 undefined 因为半球光不能投射阴影。

.groundColor : Float

在构造时传递的地面发出光线的颜色。 默认会创建 Color 并设置为白色（0xffffff）。

.isHemisphereLight : Boolean

只读标志，用于检查给定对象是否为 HemisphereLight 类型。

.position : Vector3

假如这个值设置等于 Object3D.DefaultUp (0, 1, 0),那么光线将会从上往下照射。

方法：
.copy ( source : HemisphereLight ) : this

从source复制 color, intensity 和 groundColor 的值到当前半球光对象中。

.toJSON ( meta : Object ) : Object

以JSON格式返回光数据。

meta -- 包含有元数据的对象，例如该对象的材质、纹理或图片。 将该light对象转换为 three.js JSON Object/Scene format（three.js JSON 物体/场景格式）。

二、🍀使用HemisphereLight半球光

1. ☘️实现思路

  • 1、初始化renderer渲染器
  • 2、初始化Scene三维场景scene，设置场景Fog云雾效果
  • 3、初始化camera相机，定义相机位置 camera.position.set，设置相机方向camera.lookAt。
  • 4、创建THREE.HemisphereLight半球光光源hemiLight，设置环境光hemiLight位置信息，scene场景加入环境光源hemiLight。创建THREE.SpotLight聚光灯光源spotLight0，设置光源位置和方向，scene场景加入spotLight0。创建THREE.DirectionalLight平行光源dirLight，设置平行光源位置、投影信息、方向，scene添加平行光源dirLight。
  • 5、加载几何模型：创建二维平面网格对象plane，plane使用'grasslight-big.jpg'草地贴图，设置plane的旋转角度，scene场景加入plane。创建立方体网格对象cube，设置cube的位置和投影，scene场景加入cube。创建球体网格对象sphere，设置sphere的位置和投影，scene场景加入sphere。定义render方法，实现立方体cube旋转，球体sphere跳动的方法。具体代码参考下面代码样例。
  • 6、加入gui控件，控制半球光hemiLight的天空颜色、地面颜色、光强等信息。加入stats监控器，监控帧数信息。

2. ☘️代码样例

html 复制代码 
<!DOCTYPE html>

<html>

<head>
    <title>学习threejs，使用HemisphereLight半球光</title>
    <script type="text/javascript" src="../libs/three.js"></script>
    <script type="text/javascript" src="../libs/stats.js"></script>
    <script type="text/javascript" src="../libs/dat.gui.js"></script>
    <style>
        body {
            /* set margin to 0 and overflow to hidden, to go fullscreen */
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>

<div id="Stats-output">
</div>
<!-- Div which will hold the Output -->
<div id="WebGL-output">
</div>

<!-- js 代码 -->
<script type="text/javascript">

    // 初始化
    function init() {

        var stats = initStats();

        // 创建三维场景并设置场景云雾
        var scene = new THREE.Scene();
        scene.fog = new THREE.Fog(0xaaaaaa, 0.010, 200);

        // 创建相机
        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);


        // 创建渲染器并设置大小
        var renderer = new THREE.WebGLRenderer();

        renderer.setClearColor(new THREE.Color(0xaaaaff, 1.0));
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.shadowMapEnabled = true;


        // 创建二维草地平面
        var textureGrass = THREE.ImageUtils.loadTexture("../assets/textures/ground/grasslight-big.jpg");
        textureGrass.wrapS = THREE.RepeatWrapping;
        textureGrass.wrapT = THREE.RepeatWrapping;
        textureGrass.repeat.set(4, 4);


        var planeGeometry = new THREE.PlaneGeometry(1000, 200, 20, 20);
        var planeMaterial = new THREE.MeshLambertMaterial({map: textureGrass});
//        var planeMaterial = new THREE.MeshLambertMaterial();
        var plane = new THREE.Mesh(planeGeometry, planeMaterial);
        plane.receiveShadow = true;

        // 设置草地旋转角度和位置
        plane.rotation.x = -0.5 * Math.PI;
        plane.position.x = 15;
        plane.position.y = 0;
        plane.position.z = 0;

        // 三维场景添加草地
        scene.add(plane);

        // 创建立方体
        var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
        var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xff3333});
        var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
        cube.castShadow = true;

        // 设置立方体位置
        cube.position.x = -4;
        cube.position.y = 3;
        cube.position.z = 0;

        // 三维场景加入立方体
        scene.add(cube);
		
		// 创建球体
        var sphereGeometry = new THREE.SphereGeometry(4, 25, 25);
        var sphereMaterial = new THREE.MeshLambertMaterial({color: 0x7777ff});
        var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);

        // 设置球体位置和投影
        sphere.position.x = 10;
        sphere.position.y = 5;
        sphere.position.z = 10;
        sphere.castShadow = true;

        // 三维场景添加球体
        scene.add(sphere);

        // 设置相机位置和角度
        camera.position.x = -20;
        camera.position.y = 15;
        camera.position.z = 45;
//        camera.position.x = -120;
//        camera.position.y = 165;
//        camera.position.z = 145;
        camera.lookAt(new THREE.Vector3(10, 0, 0));


        // 添加聚光灯光源，设置聚光灯光源位置和方向
        var spotLight0 = new THREE.SpotLight(0xcccccc);
        spotLight0.position.set(-40, 60, -10);
        spotLight0.lookAt(plane);
        scene.add(spotLight0);


        var target = new THREE.Object3D();
        target.position = new THREE.Vector3(5, 0, 0);

        var hemiLight = new THREE.HemisphereLight(0x0000ff, 0x00ff00, 0.6);
        hemiLight.position.set(0, 500, 0);
        scene.add(hemiLight);


        var pointColor = "#ffffff";
//    var dirLight = new THREE.SpotLight( pointColor);
        var dirLight = new THREE.DirectionalLight(pointColor);
        dirLight.position.set(30, 10, -50);
        dirLight.castShadow = true;
//        dirLight.shadowCameraNear = 0.1;
//        dirLight.shadowCameraFar = 100;
//        dirLight.shadowCameraFov = 50;
        dirLight.target = plane;
        dirLight.shadowCameraNear = 0.1;
        dirLight.shadowCameraFar = 200;
        dirLight.shadowCameraLeft = -50;
        dirLight.shadowCameraRight = 50;
        dirLight.shadowCameraTop = 50;
        dirLight.shadowCameraBottom = -50;
        dirLight.shadowMapWidth = 2048;
        dirLight.shadowMapHeight = 2048;


        scene.add(dirLight);


        // 渲染器绑定页面元素
        document.getElementById("WebGL-output").appendChild(renderer.domElement);

        var step = 0;

        var invert = 1;
        var phase = 0;

        var controls = new function () {
            this.rotationSpeed = 0.03;
            this.bouncingSpeed = 0.03;

            this.hemisphere = true;
            this.color = 0x00ff00;
            this.skyColor = 0x0000ff;
            this.intensity = 0.6;

        };

        var gui = new dat.GUI();

        gui.add(controls, 'hemisphere').onChange(function (e) {

            if (!e) {
                hemiLight.intensity = 0;
            } else {
                hemiLight.intensity = controls.intensity;
            }
        });
        gui.addColor(controls, 'color').onChange(function (e) {
            hemiLight.groundColor = new THREE.Color(e);
        });
        gui.addColor(controls, 'skyColor').onChange(function (e) {
            hemiLight.color = new THREE.Color(e);
        });
        gui.add(controls, 'intensity', 0, 5).onChange(function (e) {
            hemiLight.intensity = e;
        });

        render();

        function render() {
            stats.update();
            // 立方体渲染动画
            cube.rotation.x += controls.rotationSpeed;
            cube.rotation.y += controls.rotationSpeed;
            cube.rotation.z += controls.rotationSpeed;

            // 球体渲染动画
            step += controls.bouncingSpeed;
            sphere.position.x = 20 + ( 10 * (Math.cos(step)));
            sphere.position.y = 2 + ( 10 * Math.abs(Math.sin(step)));

            requestAnimationFrame(render);
            renderer.render(scene, camera);
        }

        function initStats() {

            var stats = new Stats();

            stats.setMode(0);

            stats.domElement.style.position = 'absolute';
            stats.domElement.style.left = '0px';
            stats.domElement.style.top = '0px';

            document.getElementById("Stats-output").appendChild(stats.domElement);

            return stats;
        }
    }
    window.onload = init;
</script>
</body>
</html>

效果如下：

相关推荐
gis分享者8 天前
学习threejs，使用MeshFaceMaterial面材质容器
threejs·facematerial·面材质容器·不同面不同材质·替代方案
gis分享者8 天前
学习threejs，使用MeshLambertMaterial漫反射材质
材质·threejs·漫反射·lambertmaterial
gis分享者18 天前
学习threejs，Animation、Core、CustomBlendingEquation、Renderer常量汇总
threejs·core·animation·常量·renderer·equation
gis分享者20 天前
学习threejs，使用LineBasicMaterial基础线材质
threejs·line·basicmaterial·线材质·gosper·高斯帕曲线
gis分享者25 天前
学习threejs，使用ShaderMaterial自定义着色器材质
材质·threejs·着色器·shadermaterial
资深前端之路1 个月前
threejs 安装教程
vue.js·threejs
伶俜Monster1 个月前
Threejs 光照教程，为 3D 场景注入灵魂
前端·3d·webgl·threejs
gis分享者1 个月前
学习threejs，Materials常量汇总
threejs·常量·materials
热门推荐
01RAG 实践- Ollama+RagFlow 部署本地知识库02如何在WPS和Word/Excel中直接使用DeepSeek功能03DeepSeek各版本说明与优缺点分析04本地化部署AI知识库：基于Ollama+DeepSeek+AnythingLLM保姆级教程05本地部署DeepSeek教程（Mac版本）06从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑07苍穹外卖面试总结08FreeCAD傻瓜教程之创建参数化几何图形-螺旋体、平面、球体、椭球体、圆柱体、圆锥体、棱柱、椭圆09DeepSeek R1本地化部署 Ollama + Chatbox 打造最强 AI 工具10LLaMA-Factory DeepSeek-R1 模型 微调基础教程