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

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

news 2025/11/29 0:00:37

👨‍⚕️ 主页： 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
常用属性：

crossOrigin : String
如果设置了，在开始加载前，将为图片分配 crossOrigin 属性，其值为 crossOrigin，默认为"anonymous"。
manager：LoadingManager
加载器正在使用的loadingManager。默认为DefaultLoadingManager。
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环境贴图创建反光效果

👨‍⚕️ 主页： gis分享者 👨‍⚕️ 感谢各位大佬点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍⚕️ 收录于专栏：threejs gis工程师文章目录一、🍀前言1.1 ☘️THREE.CubeTextureLoader 立…...

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

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

在Go语言中，os.Mkdir 和 os.MkdirAll 都是用来创建目录的函数，但它们之间存在一些关键的区别。 ### os.Mkdir - **功能**：os.Mkdir 用于创建一个单一的目录。如果该目录已经存在，则会返回一个错误。 - **参数**： - 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.安装支撑软件第一步，安装依赖库 RISC-V交叉编译器的执行仍然需要一些本地支撑软件包，可使用以下命令安装： $ 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 引言在移动应用开发的世界里，数据存储和管理是至关重要的一环。随着技术的不断进步，开发者们对于高性能、轻量级、易用的数据存储解决方案的需求日益增长。MMKV（Memory Mapped Key-Value）正是这样一个开源的高性能key-val…...

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

docker安装hadoop环境

一、使用docker搭建基础镜像 1、拉取centos系统镜像 # 我这里使用centos7为例子 docker pull centos:7 2、创建一个dockerfiler文件，用来构建自定义一个有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（windows）三、将M3U8格式转换为MP4格式一、FFmpeg是什么 FFmpeg是一款非常强大的开源多媒体处理工具，它几乎可以处理所有类型的视频、音频、字幕以及相关的元数据。 FFmpeg的主要用途包括但不限于&…...

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

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

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

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

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

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

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

23.useUnload

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

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

1、**连接外网** ssh在192.168.4.x上运行sudo ip link set ens160 down ssh切换到192.168.3.x(外网ip)，运行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++与生物医学的智能融合：医疗变革新引擎》

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

编程日记 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支持多线程环境，使用 lua_State 结构来表示一个独立的 Lua 线程（或协程）。每个线程都需要一个独立的全局环境。而lua_State 中的l_G指针，指向一个global_State结构，这个就是我们常…...

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

HTML CSS JS基础考试题与答案

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

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

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

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

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

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

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

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

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

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

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

Android Wi-Fi 连接失败日志分析

1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分： 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析： CTR…...

编程新知 2025/9/14 19:44:52