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

学习threejs，设置envMap环境贴图创建反光效果

news 文章来源：https://blog.csdn.net/qq_28419035/article/details/144077523 2025/1/6 9:41:40

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

文章目录

  • 一、🍀前言
    • 1.1 ☘️THREE.CubeTextureLoader 立方体纹理贴图
    • 1.2 ☘️环境贴图（envMap）
  • 二、🍀设置envMap环境贴图创建反光效果
    • 1. ☘️实现思路
    • 2. ☘️代码样例

一、🍀前言

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

1.1 ☘️THREE.CubeTextureLoader 立方体纹理贴图

通常使用THREE.CubeTextureLoader加载六张图片，作为立方体纹理贴图，并将其用作场景的背景。
构造函数：
CubeTextureLoader( manager : LoadingManager )
manager — 加载器使用的loadingManager。默认为THREE.DefaultLoadingManager
常用属性：

  1. crossOrigin : String
    如果设置了，在开始加载前， 将为图片分配 crossOrigin 属性，其值为 crossOrigin， 默认为"anonymous"。
  2. manager：LoadingManager
    加载器正在使用的loadingManager。默认为DefaultLoadingManager。
  3. path：String
    加载加载的文件的基本路径。 请参考.setPath。默认为undefined。
    方法：
    在这里插入图片描述

1.2 ☘️环境贴图（envMap）

envMap（环境贴图）‌是一种用于模拟环境反射光照的3D技术，常用于增强场景的真实感。它通过将环境图像映射到物体的表面，使物体能够反射周围的环境，从而模拟出更加真实的视觉效果。

二、🍀设置envMap环境贴图创建反光效果

1. ☘️实现思路

  • 1、初始化renderer渲染器
  • 2、初始化Scene三维场景scene，创建THREE.CubeTextureLoader立方体纹理加载器cubeTextureLoader，加载cubeTextureLoader的六个方位的图片获取纹理对象cubeTexture，scene背景background设置为cubeTexture。
  • 3、初始化camera相机，定义相机位置 camera.position.set。
  • 4、初始化THREE.AmbientLight环境光源，scene场景加入环境光源，初始化THREE.DirectionalLight平行光源，设置平行光源位置，设置平行光源投影，scene添加平行光源。
  • 5、加载几何模型：创建THREE.AxesHelper坐标辅助工具helper，创建THREE.SphereBufferGeometry球体几何体geometry。使用scene.background作为envMap环境贴图，创建THREE.MeshLambertMaterial漫反射材质sphereMaterial。传入geometry和geometry创建THREE.Mesh网格对象sphereMesh。scene场景中添加helper和sphereMesh。
  • 6、加入controls、gui控制，加入stats监控器，监控帧数信息。

2. ☘️代码样例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>learn55(使用设置ENVMAP环境贴图创建反光效果)</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/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, sphereMesh, sphereMaterialvar initRender = () => {renderer = new THREE.WebGLRenderer({antialias: true})renderer.setPixelRatio(window.devicePixelRatio)renderer.setSize(window.innerWidth, window.innerHeight)renderer.setClearColor(0xeeeeee)renderer.shadowMap.enabled = truedocument.body.appendChild(renderer.domElement)}var initCamera = () => {camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 200)camera.position.set(0, 12, 15)}var initScene = () => {scene = new THREE.Scene()var cubeTextureLoader = new THREE.CubeTextureLoader()cubeTextureLoader.setPath('data/texture/skybox/')// 六张图片分别是朝前的（posz）、朝后的（negz）、朝上的（posy）、朝下的（negy）、朝右的（posx）和朝左的（negx）var cubeTexture = cubeTextureLoader.load(['px.jpg', 'nx.jpg','py.jpg', 'ny.jpg','pz.jpg', 'nz.jpg'])scene.background = cubeTexture}var initGui = () => {gui = {}var datGui = new dat.GUI()}var initLight = () => {scene.add(new THREE.AmbientLight(0xffffff))light = new THREE.DirectionalLight(0xffffff)light.position.set(0, 20, -20)light.castShadow = truescene.add(light)}var initModel = () => {var helper = new THREE.AxesHelper(50)scene.add(helper)var geometry = new THREE.SphereBufferGeometry(5, 100, 50)sphereMaterial = new THREE.MeshLambertMaterial({envMap: scene.background})sphereMesh = new THREE.Mesh(geometry, sphereMaterial)scene.add(sphereMesh)}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.innerHeightcamera.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()initControls()initStats()animate()window.onresize = onWindowResize}
</script>
</html>

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

相关文章：

学习threejs，设置envMap环境贴图创建反光效果

&#x1f468;‍⚕️ 主页&#xff1a; gis分享者 &#x1f468;‍⚕️ 感谢各位大佬 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍⚕️ 收录于专栏&#xff1a;threejs gis工程师 文章目录 一、&#x1f340;前言1.1 ☘️THREE.CubeTextureLoader 立…...

编程日记 2024/12/2 21:21:51

go语言里的mkdir mkdirall有什么区别？

在Go语言中&#xff0c;os.Mkdir 和 os.MkdirAll 都是用来创建目录的函数&#xff0c;但它们之间存在一些关键的区别。 ### os.Mkdir - **功能**&#xff1a;os.Mkdir 用于创建一个单一的目录。如果该目录已经存在&#xff0c;则会返回一个错误。 - **参数**&#xff1a; - na…...

编程日记 2024/12/2 21:19:46

使用Python OpenCV实现图像形状检测

目录 一、环境准备 二、读取和预处理图像 读取图像 灰度化 滤波去噪 三、边缘检测 四、查找轮廓 五、绘制轮廓 六、形状分类 七、显示结果 八、完整代码示例 九、总结 图像形状检测是计算机视觉领域中的一项关键技术，广泛应用于工业自动化、机器人视觉、医学图像处…...

编程日记 2024/12/2 21:15:41

继上一篇,设置弹框次数以及自适应图片弹框,部分机型(vivo)老手机不显示的问题

上一篇写的本来测试好多型号都无事, 今天下午公司的战斗机vivo横空冒出… 晕 弹框直接显示都出不来了,现在还有用这种老的机型的,但是没办法咯~ 前端遇到这种兼容性的问题就要勇于解决 主要解决了这几点: // 添加图片加载事件 <imgv-if"imageUrl":src"image…...

编程日记 2024/12/2 21:12:37

基于RISC-V 的代理内核实验（使用ub虚拟机安装基本环境）

1.安装支撑软件 第一步&#xff0c;安装依赖库 RISC-V交叉编译器的执行仍然需要一些本地支撑软件包&#xff0c;可使用以下命令安装&#xff1a; $ sudo apt-get install autoconf automake autotools-dev curl libmpc-dev libmpfr-dev libgmp-dev gawk build-essential bis…...

编程日记 2024/12/2 21:08:33

【MMKV】HarmonyOS中的优秀轻量化存储方式

MMKV 引言 在移动应用开发的世界里&#xff0c;数据存储和管理是至关重要的一环。随着技术的不断进步&#xff0c;开发者们对于高性能、轻量级、易用的数据存储解决方案的需求日益增长。MMKV&#xff08;Memory Mapped Key-Value&#xff09;正是这样一个开源的高性能key-val…...

编程日记 2024/12/2 21:05:31

docker安装hadoop环境

一、使用docker搭建基础镜像 1、拉取centos系统镜像 # 我这里使用centos7为例子 docker pull centos:7 2、创建一个dockerfiler文件&#xff0c;用来构建自定义一个有ssh功能的centos镜像 # 基础镜像 FROM centos:7 # 作者 #MAINTAINER hadoop ADD Centos-7.repo /etc/yum.re…...

编程日记 2024/12/2 21:00:24

开源多媒体处理工具ffmpeg是什么?如何安装?使用ffmpeg将M3U8格式转换为MP4

目录 一、FFmpeg是什么二、安装FFmpeg&#xff08;windows&#xff09;三、将M3U8格式转换为MP4格式 一、FFmpeg是什么 FFmpeg是一款非常强大的开源多媒体处理工具&#xff0c;它几乎可以处理所有类型的视频、音频、字幕以及相关的元数据。 FFmpeg的主要用途包括但不限于&…...

编程日记 2024/12/2 20:59:22

算法刷题Day5: BM52 数组中只出现一次的两个数字

描述&#xff1a; 一个整型数组里除了两个数字只出现一次&#xff0c;其他的数字都出现了两次。请写程序找出这两个只出现一次的数字。 要求&#xff1a;空间复杂度 O(1)&#xff0c;时间复杂度O(n)。 题目传送门 is here 思路&#xff1a; 方法一&#xff1a;最简单的思路就…...

编程日记 2024/12/2 20:58:21

55 基于单片机的方波频率可调

目录 一、主要功能 二、硬件资源 三、程序编程 四、实现现象 一、主要功能 采用STC89C52单片机最小系统&#xff0c;设计DAC0832、放大器、与示波器显示方波&#xff0c;四位数码管显示频率&#xff0c;两个按键可调。 二、硬件资源 基于KEIL5编写C代码&#xff0c;PROT…...

编程日记 2024/12/2 20:57:19

23.useUnload

在 Web 应用开发中，处理页面卸载（unload）事件是一个重要但常常被忽视的方面。无论是提醒用户保存未保存的更改，还是执行一些清理操作，都需要在用户即将离开页面时进行处理。useUnload 钩子提供了一种简洁的方式来在 React 组件中处理 beforeunload 事件，使得在用户试图关…...

编程日记 2024/12/2 20:47:10

linux环境搭建

1、**连接外网** ssh在192.168.4.x上运行sudo ip link set ens160 down ssh切换到192.168.3.x(外网ip)&#xff0c;运行sudo ip route add default via 192.168.2.1 dev ens192 onlink //连接外网 使用完外网后 ssh在192.168.3.x上运行sudo ip link set ens160 up ssh在1…...

编程日记 2024/12/2 20:45:08

《C++与生物医学的智能融合：医疗变革新引擎》

在当今科技飞速发展的时代&#xff0c;人工智能正以前所未有的深度和广度渗透到各个领域&#xff0c;为传统行业带来革新与突破。其中&#xff0c;将 C与生物学、医学等领域知识相结合&#xff0c;开发用于处理生物医学数据、辅助疾病诊断和治疗的人工智能应用&#xff0c;成为…...

编程日记 2024/12/2 20:44:06

Matlab 绘制雷达图像完全案例和官方教程（亲测）

首先上官方教程链接 polarplothttps://ww2.mathworks.cn/help/matlab/ref/polarplot.html 上实例 % 定义角度向量和径向向量 theta linspace(0, 2*pi, 5); r1 [1, 2, 1.5, 2.5, 1]; r2 [2, 1, 2.5, 1.5, 2];% 绘制两个雷达图 polarplot(theta, r1, r-, LineWidth, 2); hold …...

编程日记 2024/12/2 20:43:05

Lua的环境与热更

一、global_State,lua_State与G表 Lua支持多线程环境&#xff0c;使用 lua_State 结构来表示一个独立的 Lua 线程&#xff08;或协程&#xff09;。每个线程都需要一个独立的全局环境。而lua_State 中的l_G指针&#xff0c;指向一个global_State结构&#xff0c;这个就是我们常…...

编程日记 2024/12/2 20:42:02

HTML CSS JS基础考试题与答案

一、选择题&#xff08;2分/题&#xff09; 1&#xff0e;下面标签中&#xff0c;用来显示段落的标签是&#xff08; d &#xff09;。 A、<h1> B、<br /> C、<img /> D、<p> 2. 网页中的图片文件位于html文件的下一级文件夹img中&#xff0c;…...

编程日记 2024/12/2 20:36:57

若依解析（一）登录认证流程

JWTSpringSecurity 6.X 实现登录 JWT token只包含uuid ,token 解析uuid&#xff0c;然后某个常量加UUID 从Redis缓存查询用户信息 流程图如下 感谢若依&#xff0c;感谢开源&#xff0c;能有这么好系统供我学习。 设计数据库&#xff0c;部门表&#xff0c;用户表&#xff0c…...

编程日记 2024/12/2 20:34:56

Redis设计与实现第17章 -- 集群 总结1（节点 槽指派）

集群通过分片sharding来进行数据共享&#xff0c;并提供复制和故障转移功能。 17.1 节点 一个Redis集群通常由多个节点node组成&#xff0c;刚开始每个节点都是相互独立的&#xff0c;必须将各个独立的节点连接起来&#xff0c;才能构成一个包含多个节点的集群。通过CLUSTER …...

编程日记 2024/12/2 20:33:54

汽车控制软件下载移动管家手机控车一键启动app

移动管家手机控制汽车系统是一款实现车辆远程智能控制的应用程序‌。通过下载并安装特定的APP&#xff0c;用户可以轻松实现以下功能&#xff1a;‌远程启动与熄火‌&#xff1a;无论身处何地&#xff0c;只要有网络&#xff0c;即可远程启动或熄火车辆&#xff0c;提前预冷或预…...

编程日记 2024/12/2 20:28:49

推荐几个可以免费下载网站模板的资源站

推荐几个可以免费下载网站模板的资源站&#xff0c;上面有免费的wordpress模板和帝国CMS模板可以下载。 模板帝 Mobandi.com 模板帝是一个提供丰富网站模板资源的平台&#xff0c;旨在帮助用户快速构建和美化自己的网站。无论是个人博客、企业官网还是电子商务平台&#xff…...

编程日记 2024/12/2 20:23:43

H3C OSPF实验

实验拓扑 实验需求 按照图示配置 IP 地址按照图示分区域配置 OSPF &#xff0c;实现全网互通为了路由结构稳定&#xff0c;要求路由器使用环回口作为 Router-id&#xff0c;ABR 的环回口宣告进骨干区域 实验解法 一、配置IP地址 [R1]int l0 [R1-LoopBack0]ip add 1.1.1.1 32 […...

编程日记 2024/12/2 20:19:36

Vue框架开发一个简单的购物车（Vue.js）

让我们利用所学知识来开发一个简单的购物车 &#xff08;记得暴露属性和方法&#xff01;&#xff01;&#xff01;&#xff09; 首先来看一下最基本的一个html框架 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"&…...

编程日记 2024/12/2 20:16:32

Windows Terminal Solarized Dark 配色方案调整

起因 Widnows 10/11 下面自带的 Terminal 还是比较方便的&#xff0c;因为不需要安装额外的 Terminal 软件。 我喜欢 Solarized Dark 配色方案&#xff0c;虽然有人批评这个配色方案比较老&#xff0c;但我觉得它比较优雅&#xff0c;尤其对外这种眼神比较差的人&#xff0c;比…...

编程日记 2024/12/2 20:15:29

PyTorch张量运算与自动微分

PyTorch张量运算与自动微分 PyTorch由Facebook人工智能研究院于2017年推出&#xff0c;具有强大的GPU加速张量计算功能&#xff0c;并且能够自动进行微分计算&#xff0c;从而可以使用基于梯度的方法对模型参数进行优化&#xff0c;大部分研究人员、公司机构、数据比赛都使用P…...

编程日记 2024/12/2 20:08:22

【从零开始的LeetCode-算法】3264. K 次乘运算后的最终数组 I

给你一个整数数组 nums &#xff0c;一个整数 k 和一个整数 multiplier 。 你需要对 nums 执行 k 次操作&#xff0c;每次操作中&#xff1a; 找到 nums 中的 最小 值 x &#xff0c;如果存在多个最小值&#xff0c;选择最 前面 的一个。将 x 替换为 x * multiplier 。 请你…...

编程日记 2024/12/2 20:03:14

【Linux】gdb / cgdb 调试 + 进度条

&#x1f33b;个人主页&#xff1a;路飞雪吖~ &#x1f320;专栏&#xff1a;Linux 目录 一、Linux调试器-gdb &#x1f31f;开始使用 &#x1f320;小贴士&#xff1a; &#x1f31f;gdb指令 &#x1f320;小贴士&#xff1a; ✨watch 监视 ✨打条件断点 二、小程序----进…...

编程日记 2024/12/2 20:01:11

Jenkins Nginx Vue项目自动化部署

目录 一、环境准备 1.1 Jenkins搭建 1.2 NVM和Nodejs安装 1.3 Nginx安装 二、Jenkins配置 2.1 相关插件安装 2.2 全局工具安装 2.3 环境变量配置 2.4 邮箱配置&#xff08;构建后发送邮件&#xff09; 2.5 任务配置 三、Nginx配置 3.1 配置路由转发 四、部署项目 …...

编程日记 2024/12/2 20:00:10

视频汇聚平台Liveweb国标GB28181视频平台监控中心设计

在现代安防视频监控领域&#xff0c;Liveweb视频汇聚平台以其卓越的兼容性和灵活的拓展能力&#xff0c;为用户提供了一套全面的解决方案。该平台不仅能够实现视频的远程监控、录像、存储与回放等基础功能&#xff0c;还涵盖了视频转码、视频快照、告警、云台控制、语音对讲以及…...

编程日记 2024/12/2 19:53:03

文件比较和文件流

文件比较和文件流 一、文本比较工具 diff1.基本用法1.1输出格式 2.常用选项 二、文件流1.文件的打开模式2.文件流的分类ifstreamofstreamfstrem区别 3.文件流的函数1. 构造函数2. is_open 用于判断文件是否打开3. open4. getline5. close6. get()7. read8. write9. put10. gcou…...

编程日记 2024/12/2 19:50:00

【2024最新】基于Springboot+Vue的就业信息管理系统Lw+PPT

作者&#xff1a;计算机搬砖家 开发技术&#xff1a;SpringBoot、php、Python、小程序、SSM、Vue、MySQL、JSP、ElementUI等&#xff0c;“文末源码”。 专栏推荐&#xff1a;SpringBoot项目源码、Vue项目源码、SSM项目源码、微信小程序源码 精品专栏&#xff1a;Java精选实战项…...

编程日记 2024/12/2 19:48:57

怎么用易语言做网站/一个具体网站的seo优化

JSON是一种便于操作使用的轻量级数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。官方网站&#xff1a;http://www.json.org。 很多时候我们需要组装字符串为json对象&#xff0c;首先要组合字符串&#xff0c;然后转换为json对象&#xff0c;如下面的例子&#xf…...

编程日记 2025/1/6 8:47:45

网站开发国际化/青岛百度快速排名优化

NAT 在IP地址空间中&#xff0c;A,B,C三类单播地址中&#xff0c;各有一部分地址&#xff0c;他们被称为私有地址&#xff08;或私网IP地址&#xff09;&#xff0c;其余的都成为公有地址&#xff08;公有IP地址&#xff09;。 私有地址: A&#xff1a;10.0.0.0-10.255.255.255…...

编程日记 2025/1/6 3:43:01

本地网站建设/搜索引擎营销分类

HTML画布canvascanvas 元素用于在网页上绘制图形。canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成&#xff1a;Your browser does not support the canvas element.var cdocument.getElementById("myCanvas");var cxtc.getContext(&quo…...

编程日记 2025/1/6 0:41:23

wordpress 苏醒 cosy/品牌推广百度seo

Matlab 正则表达式1 引言2 单个字符匹配2.1 元字符2.2 特殊字符3 字符串匹配3.1 多次匹配3.2 零宽断言/环顾断言&#xff08;左顾右盼&#xff09;——利用上下文匹配3.3 逻辑条件匹配4 标记(tokens)匹配5 动态正则表达式6 搜索标志7 多行字符串与多正则表达式7.1 多字符串与单…...

编程日记 2025/1/5 21:16:22

溧水区住房和城乡建设厅网站/百度竞价排名推广

我使用的 Tomcat 是 8&#xff0c;而我使用的 web.xml 是 4.0 的&#xff0c;因此该成 3.0 即可&#xff0c;修改后的 web.xml 如下&#xff1a; <?xml version"1.0" encoding"UTF-8"?> <web-app xmlns"http://xmlns.jcp.org/xml/ns/java…...

编程日记 2025/1/5 20:25:32

南京时事重大新闻/免费推广seo

在物联网的开发中&#xff0c;使用MQTT应该是最为常见的方法。MQTT作为开源的协议&#xff0c;在GitHub上面有很多&#xff0c;在Unity里面使用的首选&#xff0c;M2Mqtt(GitHub地址&#xff1a;https://github.com/gpvigano/M2MqttUnity)打开工程文件后&#xff0c;可以查看De…...

编程日记 2025/1/5 16:47:58