当前位置： 首页 > article >正文

学习threejs，使用设置lightMap光照贴图创建阴影效果

article 2024/11/27 6:07:24

👨‍⚕️ 主页： gis分享者
👨‍⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅!
👨‍⚕️ 收录于专栏：threejs gis工程师

文章目录

  • 一、🍀前言
    • 1.1 ☘️THREE.MeshLambertMaterial漫反射材质
    • 1.2 ☘️光照贴图（Lightmap）
  • 二、🍀使用设置lightMap光照贴图创建阴影效果
    • 1. ☘️实现思路
    • 2. ☘️代码样例

一、🍀前言

本文详细介绍如何基于threejs在三维场景中设置lightMap光照贴图创建阴影效果，亲测可用。希望能帮助到您。一起学习，加油！加油！

1.1 ☘️THREE.MeshLambertMaterial漫反射材质

THREE.MeshLambertMaterial 是 Three.js 中的一种材质类型，用于模拟物体表面的漫反射效果。这种材质遵循 Lambertian 反射模型，这意味着它会均匀地将接收到的光照散射到各个方向，从而产生较为自然的光照效果。THREE.MeshLambertMaterial 适用于需要模拟漫反射材质的场景，如墙面、木头、纸张等非金属材料。
常用属性：
THREE.MeshLambertMaterial 继承自 THREE.Material，并具有一些特定的属性，可以用来控制材质的外观：
color：材质的颜色，默认为白色（0xffffff）。可以是一个整数，表示十六进制颜色值。
map：基础颜色贴图，可以用来替代材质的颜色。可以是一个 THREE.Texture 对象。
alphaMap：透明度贴图，可以用来定义材质的透明度。可以是一个 THREE.Texture 对象。
emissive：自发光颜色，默认为黑色（0x000000）。即使在没有光源的情况下，也会显示这个颜色。
emissiveMap：自发光贴图，可以用来定义自发光的颜色。可以是一个 THREE.Texture 对象。
specular：高光颜色，默认为白色（0x111111），但在 THREE.MeshLambertMaterial 中不会生效。
shininess：高光强度，默认为 30，但在 THREE.MeshLambertMaterial 中不会生效。
opacity：材质的全局透明度，默认为 1（不透明）。
transparent：是否开启透明模式，默认为 false。如果设置为 true，则需要设置 opacity 或者使用 alphaMap。
side：指定材质在哪一面渲染，可以是 THREE.FrontSide（正面）、THREE.BackSide（背面）或 THREE.DoubleSide（双面）。
wireframe：是否启用线框模式，默认为 false。
visible：是否渲染该材质，默认为 true。
depthTest：是否进行深度测试，默认为 true。
depthWrite：是否写入深度缓冲区，默认为 true。
blending：混合模式，默认为 THREE.NormalBlending。可以设置为 THREE.AdditiveBlending、THREE.SubtractiveBlending 等。
vertexColors：是否启用顶点颜色，默认为 THREE.NoColors。可以设置为 THREE.VertexBasicColors、THREE.VertexColors 或 THREE.FaceColors。
flatShading：是否使用平滑着色，默认为 false。如果设置为 true，则每个面片都将使用平均法线。
envMap：环境贴图，可以用来模拟环境光照。可以是一个 THREE.Texture 对象。
reflectivity：环境光反射率，默认为 1。
refractionRatio：折射率，默认为 0.98。
combine：环境贴图的组合方式，默认为 THREE.MixOperation。

1.2 ☘️光照贴图（Lightmap）

光照贴图（Lightmap）是计算机图形学中用于存储场景中光照信息的纹理贴图。它们通常用于预计算静态光照，以提高实时渲染的性能。光照贴图的数据格式和解析方法可能因具体的渲染引擎和工具而异，但一般来说，光照贴图的数据格式和解析方法可以概括如下：
数据格式
光照贴图通常存储为图像文件，常见的格式包括：
PNG：无损压缩格式，适合存储高质量的光照信息。
JPEG：有损压缩格式，文件较小，但可能会丢失一些细节。
HDR：高动态范围图像格式，适合存储高精度的光照信息。
EXR：一种常用于电影和视觉特效的高动态范围图像格式。
光照贴图的每个像素通常存储光照信息，可能包括以下内容：
RGB值：表示光照的颜色和强度。
Alpha通道：有时用于存储额外的信息，如光照的透明度或遮挡信息。

二、🍀使用设置lightMap光照贴图创建阴影效果

1. ☘️实现思路

  • 1、初始化renderer渲染器
  • 2、初始化Scene三维场景
  • 3、初始化camera相机，定义相机位置 camera.position.set。
  • 4、初始化THREE.AmbientLight环境光源，scene场景加入环境光源，初始化THREE.DirectionalLight平行光源，设置平行光源位置，设置平行光源投影，scene添加平行光源。
  • 5、加载几何模型：创建THREE.AxesHelper坐标辅助工具，创建THREE.PlaneGeometry平面几何体groundGeom，scene场景中加入坐标辅助工具。创建光照纹理贴图lightMap和地板贴图map，传入lightMap和map参数创建THREE.MeshLambertMaterial漫反射材质material，传入groundGeom和material参数创建THREE.Mesh网格对象groudMesh，设置groudMesh的旋转角度，scene场景中加入groudMesh对象。
  • 6、加入controls、gui控制（控制创建的两个立方体是否显示、以及光照贴图的光照强度，具体实现参考下面代码样例），加入stats监控器，监控帧数信息。

2. ☘️代码样例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>learn54(使用设置LIGHTMAP光照贴图创建阴影效果，不能随着模型位置变化而变化)</title>
    <!--<script src="lib/threejs/127/three.js-master/build/three.js"></script>
    <script src="lib/threejs/127/three.js-master/examples/js/controls/OrbitControls.js"></script>-->
    <script src="lib/threejs/91/three.js"></script>
    <script src="https://johnson2heng.github.io/three.js-demo/lib/js/controls/OrbitControls.js"></script>
    <script src="lib/threejs/127/three.js-master/examples/js/libs/stats.min.js"></script>
    <script src="lib/threejs/127/three.js-master/examples/js/libs/dat.gui.min.js"></script>
    <script src="lib/js/Detector.js"></script>
</head>
<style type="text/css">
    html, body {
        margin: 0;
        height: 100%;
    }

    canvas {
        display: block;
    }
</style>
<body onload="draw()">
</body>
<script>
  var renderer, camera, scene, gui, light, stats, controls, mesh, material
  var initRender = () => {
    renderer = new THREE.WebGLRenderer({antialias: true})
    renderer.setPixelRatio(window.devicePixelRatio)
    renderer.setSize(window.innerWidth, window.innerHeight)
    renderer.setClearColor(0xeeeeee)
    renderer.shadowMap.enabled = true
    document.body.appendChild(renderer.domElement)
  }
  var initScene = () => {
    scene = new THREE.Scene()
    scene.backgroundColor = new THREE.Color(0xa0a0a0)
    scene.fog = new THREE.Fog(0xa0a0a0, 50, 500)
  }
  var initCamera = () => {
    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 200)
    camera.position.set(0, 12, 15)
  }
  var initGui = () => {
    gui = {
      showBox: () => {
        var material = new THREE.MeshPhongMaterial({color: 0x00ffff})

        // 创建大的立方体
        var geometry = new THREE.BoxGeometry(1.2, 1.2, 1.2)
        var cubeBig = new THREE.Mesh(geometry, material)
        cubeBig.position.y += 0.6
        scene.add(cubeBig)

        var geometrySm = new THREE.BoxGeometry(0.7, 0.7, 0.7)
        var cubeSm = new THREE.Mesh(geometrySm, material)
        cubeSm.position.set(-1.4, 0.35, 0)
        scene.add(cubeSm)
      },
      lightMapIntensity: 1
    }
    var datGui = new dat.GUI()
    datGui.add(gui, 'showBox')
    datGui.add(gui, 'lightMapIntensity', 0, 5).onChange(e => {
      material.lightMapIntensity = e
    })
  }
  var initLight = () => {
    scene.add(new THREE.AmbientLight(0x444444))
    light = new THREE.DirectionalLight(0xffffff)
    light.position.set(-20, 20, -20)
    light.castShadow = true
    scene.add(light)
  }
  var initModel = () => {
    var helper = new THREE.AxesHelper(50)
    scene.add(helper)

    var groundGeom = new THREE.PlaneGeometry(10, 10, 1, 1)
    var lightMap = new THREE.TextureLoader().load('data/texture/lightMap/lm-1.png')
    var map = new THREE.TextureLoader().load('data/texture/lightMap/floor-wood.jpg')
    material = new THREE.MeshLambertMaterial({
      color: 0x777777,
      lightMap: lightMap,
      map: map
    })
    groundGeom.faceVertexUvs[1] = groundGeom.faceVertexUvs[0]

    var groudMesh = new THREE.Mesh(groundGeom, material)
    groudMesh.rotation.x = -0.5 * Math.PI
    scene.add(groudMesh)
  }
  var initStats = () => {
    stats = new Stats()
    document.body.appendChild(stats.dom)
  }
  var initControls = () => {
    controls = new THREE.OrbitControls(camera, renderer.domElement)
    controls.enableDamping = true
  }
  var render = () => {
    renderer.render(scene, camera)
  }
  var onWindowResize = () => {
    camera.aspect = window.innerWidth / window.innerHeight
    camera.updateProjectionMatrix()
    renderer.setSize(window.innerWidth, window.innerHeight)
  }
  var animate = () => {
    render()
    stats.update()
    controls.update()
    requestAnimationFrame(animate)
  }
  var draw = () => {
    if(!Detector.webgl)Detector.addGetWebGLMessage()
    initGui()
    initRender()
    initScene()
    initCamera()
    initLight()
    initModel()
    initStats()
    initControls()

    animate()
    window.onresize = onWindowResize
  }
</script>
</html>

效果如下：
在这里插入图片描述


http://www.kler.cn/a/410973.html

相关文章：

  • 【自动化Selenium】Python 网页自动化测试脚本(上)
  • Python毕业设计选题：基于django+vue的期货交易模拟系统的设计与实现
  • django authentication 登录注册
  • Matlab 深度学习 PINN测试与学习
  • QT 跨平台实现 SSDP通信 支持多网卡
  • 网络安全学习77天(记录)
  • QT QRadioButton控件 全面详解
  • 【西瓜书】剪枝与样本值处理——预剪枝、后剪枝、连续值、缺失值
  • python深度学习机器学习编程序接单服务代码指导编写脚本调试爬虫
  • docker 通过Dockerfile自定义的镜像部署Springboot项目
  • 一个专为云原生环境设计的高性能分布式文件系统
  • C嘎嘎探索篇：栈与队列的交响：C++中的结构艺术
  • 华为鸿蒙内核成为HarmonyOS NEXT流畅安全新基座
  • QML学习 —— 34、视频媒体播放器（附源码）
  • 8K超高清相机+双光谱融合技术
  • 二代三代社保卡读卡器串口命令协议，适用于单片机等嵌入式系统使用
  • WordCloud参数的用法：
  • 【VRChat 全身动捕】VIVE 手柄改 tracker 定位器教程，低成本光学动捕解决方案（持续更新中2024.11.26）
  • docker如何安装mysql8
  • 香橙派--安装RKMPP、x264、libdrm、FFmpeg（支持rkmpp）以及opencv（支持带rkmpp的ffmpeg）（适用于RK3588平台）
  • C语言数据结构学习：循环队列
  • GreatSQL 运行时内存太高，超过90%怎么办
  • 带有悬浮窗功能的Android应用
  • 极狐GitLab 17.6 正式发布几十项与 DevSecOps 相关的功能【三】
  • 第 35 章 - Go语言 容器化应用
  • 分布式查询处理优化之数据分片