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

three.js使用环境贴图或者加载hdr图

1、three.js使用环境贴图

1.1、效果视频

环境贴图

1.2、使用步骤(个人认为)

(1)导入引入相关方法
(2)创建场景
(3)创建相机
(4)添加物体材质
(5)添加光源
(6)渲染

1.3、代码

// 环境贴图代码
import * as THREE from 'three'//目标:使用环境贴图放在球上展示//导入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'//1、创建场景
const scene = new THREE.Scene()//2、创建相机
const camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight,0.1,1000
) // 参数分别代表,相机角度、屏幕宽高比、近端点,远端点//设置相机位置
camera.position.set(2, 2, 2)
scene.add(camera)//导入纹理
const cubeTextureLoader = new THREE.CubeTextureLoader()
//一下代码是因为物体有上下左右前后六个面,所以设置6个方向的贴图
const envMapTexture = cubeTextureLoader.load(['/static/texture/environmentMaps/1/px.jpg','/static/texture/environmentMaps/1/nx.jpg','/static/texture/environmentMaps/1/py.jpg','/static/texture/environmentMaps/1/ny.jpg','/static/texture/environmentMaps/1/pz.jpg','/static/texture/environmentMaps/1/nz.jpg',
])
//添加物体
const sphereGeometry = new THREE.SphereGeometry(1, 20, 20)
const material = new THREE.MeshStandardMaterial({metalness: 0.7, //金属度roughness: 0.1, //粗糙度,设置为0表面会非常光滑,可以折射出太阳光// envMap: envMapTexture, //环境贴图
})
const mesh = new THREE.Mesh(sphereGeometry, material)
scene.add(mesh)//给场景添加背景
scene.background = envMapTexture
//给场景中所有的物体添加默认的贴图
scene.environment = envMapTexture//添加环境光
const light = new THREE.AmbientLight(0xffffff, 0.5)
scene.add(light)//添加直线光源
const directionLight = new THREE.DirectionalLight(0xffffff, 1)
directionLight.position.set(10, 10, 10)
scene.add(directionLight)//初始化渲染器
const renderer = new THREE.WebGLRenderer()//设置渲染的尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight)//将webGL渲染的canvas添加到app中
document.getElementById('app').appendChild(renderer.domElement)//创建控制器
const controls = new OrbitControls(camera, renderer.domElement)//设置控制器阻尼,让滑动更有真实感
controls.enableDamping = true//创建坐标轴
const axesHelper = new THREE.AxesHelper(5)
scene.add(axesHelper)render()//渲染函数
function render(time) {controls.update()renderer.render(scene, camera)//下一帧渲染完毕再次执行,保证每一帧都渲染requestAnimationFrame(render)
}

2、three.js加载hdr图

2.1、效果视频

加载hdr图

2.2、代码

// three.js加载hdr图
import * as THREE from 'three'//目标:加载hdr图//导入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'//导入hdr加载器
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader'//1、创建场景
const scene = new THREE.Scene()//2、创建相机
const camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight,0.1,1000
) // 参数分别代表,相机角度、屏幕宽高比、近端点,远端点//设置相机位置
camera.position.set(2, 2, 2)
scene.add(camera)const rgbeLoader = new RGBELoader()
rgbeLoader.loadAsync('static/texture/hdr/003.hdr').then((texture) => {texture.mapping = THREE.EquirectangularReflectionMapping //正常只是一张图平铺,设置这个可以让图包围环绕整个环境scene.background = texture //设置环境贴图scene.environment = texture
})//添加物体
const sphereGeometry = new THREE.SphereGeometry(1, 20, 20)
const material = new THREE.MeshStandardMaterial({metalness: 0.7, //金属度roughness: 0.1, //粗糙度,设置为0表面会非常光滑,可以折射出太阳光
})
const mesh = new THREE.Mesh(sphereGeometry, material)
scene.add(mesh)//添加环境光
const light = new THREE.AmbientLight(0xffffff, 0.5)
scene.add(light)//添加直线光源
const directionLight = new THREE.DirectionalLight(0xffffff, 1)
directionLight.position.set(10, 10, 10)
scene.add(directionLight)//初始化渲染器
const renderer = new THREE.WebGLRenderer()//设置渲染的尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight)//将webGL渲染的canvas添加到app中
document.getElementById('app').appendChild(renderer.domElement)//创建控制器
const controls = new OrbitControls(camera, renderer.domElement)//设置控制器阻尼,让滑动更有真实感
controls.enableDamping = true//创建坐标轴
const axesHelper = new THREE.AxesHelper(5)
scene.add(axesHelper)render()//渲染函数
function render(time) {controls.update()renderer.render(scene, camera)//下一帧渲染完毕再次执行,保证每一帧都渲染requestAnimationFrame(render)
}

相关文章:

three.js使用环境贴图或者加载hdr图

1、three.js使用环境贴图 1.1、效果视频 环境贴图 1.2、使用步骤(个人认为) (1)导入引入相关方法 (2)创建场景 (3)创建相机 (4)添加物体材质 (5…...

GPT-4o多模态大模型的架构设计

GPT-4o:大模型风向,OpenAI大更新 OpenAI震撼发布两大更新!桌面版APP与全新UI的ChatGPT上线,简化用户操作,体验更自然。同时,全能模型GPT-4o惊艳亮相,跨模态即时响应,性能卓越且性价比…...

Facebook:社交世界的引领者

导语 在当今数字化时代,Facebook已经成为了人们社交生活的重要一环。然而,除了成为社交媒体的象征外,它还在不断探索并领导着社交世界的新方向。 1. 社交平台的发展者 Facebook不仅仅是一个社交平台,更是社交方式的引领者。从其…...

qt 加载字体 c++

目录 qt 加载字体 c label设置大小和字体&#xff1a; 资源配置路径失败 解决方法&#xff1a;exe相对目录&#xff1a; pro配置&#xff1a; resource.qrc qt 加载字体 c #include <QApplication> #include <QLabel> #include <QFontDatabase> #incl…...

Linux ldd和ldconfig

ldconfig ldconfig 查看默认库路径和ld.so.conf包含的库路径&#xff0c;来建立运行时动态装载的库查找路径。 ldconfig命令的用途,主要是在默认搜寻目录(/lib和/usr/lib)以及动态库配置文件/etc/ld.so.conf内所列的目录下,搜索出可共享的动态链接库(格式如前介绍,lib*.so*),…...

Python 学习flask创建项目

1、使用pycharm创建flask项目 2、运行访问地址 3、可以看到访问地址内容 4、可以增加路由&#xff0c;尝试访问获取参数...

.NET集成DeveloperSharp实现图片的裁剪、缩放、与加水印

&#x1f3c6;作者&#xff1a;科技、互联网行业优质创作者 &#x1f3c6;专注领域&#xff1a;.Net技术、软件架构、人工智能、数字化转型、DeveloperSharp、微服务、工业互联网、智能制造 &#x1f3c6;欢迎关注我&#xff08;Net数字智慧化基地&#xff09;&#xff0c;里面…...

阿里发布最强开源大模型通义千问Qwen2,国产最好用的LLM

前言 近年来&#xff0c;大模型技术发展迅速&#xff0c;开源模型的出现为AI研究和应用带来了新的活力。在这一背景下&#xff0c;阿里云通义千问团队发布了全新升级的Qwen2系列开源模型&#xff0c;为国内外开发者提供了更强大的工具和更丰富的选择。 Huggingface模型下载&am…...

探索风电机组:关键软件工具全解析

探索风电机组&#xff1a;关键软件工具全解析 随着可再生能源市场的迅猛发展&#xff0c;风电作为一种重要的可再生能源&#xff0c;其相关技术和工具也越来越受到重视。风电机组的设计、仿真、优化及运维等方面&#xff0c;都需要依靠一系列专业软件工具来实现。这些软件涵盖…...

HOW - CSS 常见效果实现

目录 渐隐渐显曲线&抛物线气泡框水波纹悬浮&漂浮长按控制进度条圆弧&圆形进度条引导蒙层随机物品掉落渐变边框光晕按钮下压反馈头像&#xff08;圆形半透明阴影&#xff09; 常见 CSS 效果实现总结。 渐隐渐显 <!DOCTYPE html> <html> <style>…...

EI/CPCI/Scopus会议论文是啥?

EI/CPCI/Scopus会议论文是啥&#xff1f; EI/CPCI/Scopus是学术圈常见的字母缩写了&#xff0c;它们并非某一种期刊或是某一种杂志&#xff0c;而是一种便捷的论文检索工具。它们之间的区别在于&#xff0c;各自涵盖的领域的不同。▌EI &#xff08;The Engineering Index&…...

【递归、搜索与回溯】穷举vs暴搜vs深搜vs回溯vs剪枝

穷举vs暴搜vs深搜vs回溯vs剪枝 1.全排列2.子集 点赞&#x1f44d;&#x1f44d;收藏&#x1f31f;&#x1f31f;关注&#x1f496;&#x1f496; 你的支持是对我最大的鼓励&#xff0c;我们一起努力吧!&#x1f603;&#x1f603; 管他什么深搜、回溯还是剪枝&#xff0c;画出决…...

celery-redbeat方案(动态定时任务、异步任务)

文章目录 为什么选择 RedBeat&#xff1f;方案坑事项记录 记一次工作上的问题 问题&#xff1a;项目上当前定时任务框架和服务端耦合&#xff0c;容易出现加载定时任务时间很长&#xff0c;影响后端服务启动&#xff0c;容易改动引发定时任务的问题。且能方便的动态的增加或删除…...

js解析成语法树以及还原

const {parse} require("babel/parser"); const traverse require("babel/traverse").default; const generator require("babel/generator").default;// 1.定义要处理的代码 const jscode function square(n) {return n * n; };// 2.使用ba…...

基于python可伸缩JSON格式列表实现

对于消息体为一个json格式列表&#xff0c;列表长度变化的代码设计&#xff0c;如下实现可供参考。 1、python语言实现(直接取值) #codingutf-8n 2 # 行项目数 productCode [11111,222222,333333] unit [H06,H07,H08] qty [6,7,8] items []for i in range(0, n):item …...

h5相机功能

h5相机功能 利用vant input file <template><div class"mb10"><divv-for"(item, index) in info.imgList":key"index"class"imgItem f32 mr20"click"preview(item, index)"><img :src"doFileUrl…...

IDEA | 安装通义灵码插件,开启智能编码旅程

安装步骤 从插件市场安装&#xff0c;点击导航-插件&#xff0c;打开应用市场&#xff0c;搜索通义灵码&#xff08;TONGYI Lingma&#xff09;&#xff0c;找到通义灵码后点击安装。 https://tongyi.aliyun.com/lingma/download 使用方式 https://help.aliyun.com/documen…...

技术人员如何克服在使用行列视(RCV)过程中遇到的挑战?

技术人员在使用行列视&#xff08;RCV&#xff09;过程中可能会遇到多种挑战&#xff0c;以下是一些建议&#xff0c;帮助他们克服这些挑战&#xff1a; 1. 深入了解系统架构和功能&#xff1a; - 熟练掌握RCV的架构设计&#xff0c;包括数据中心层、计算服务层、函数层、人机…...

手把手教你安装 Vivado2019.2(附安装包)

一、Vivado 2019.2优点 Vivado 2019.2 作为 Xilinx 公司发布的一款设计套件版本&#xff0c;具有多个显著的优点&#xff0c;以下是对其优点的详细归纳&#xff1a; 集成度高&#xff1a;开发工具丰富并行综合功能灵活的许可证策略用户友好的界面强大的仿真和验证功能丰富的文…...

Sql-labs的第一关

前言 我们在使用Sql-libs靶场进行Sql注入实验的时候&#xff0c;前提要求我们对mysql数据库结构要有一个大概的了解&#xff0c;因为mysql5.0以上的版本都会自带一个名为information_schema的数据库&#xff0c;这个数据库下面会有columns和tables两个表。 tables这个表的table…...

Docker 离线安装指南

参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性&#xff0c;不同版本的Docker对内核版本有不同要求。例如&#xff0c;Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本&#xff0c;Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…...

测试markdown--肇兴

day1&#xff1a; 1、去程&#xff1a;7:04 --11:32高铁 高铁右转上售票大厅2楼&#xff0c;穿过候车厅下一楼&#xff0c;上大巴车 &#xffe5;10/人 **2、到达&#xff1a;**12点多到达寨子&#xff0c;买门票&#xff0c;美团/抖音&#xff1a;&#xffe5;78人 3、中饭&a…...

DIY|Mac 搭建 ESP-IDF 开发环境及编译小智 AI

前一阵子在百度 AI 开发者大会上&#xff0c;看到基于小智 AI DIY 玩具的演示&#xff0c;感觉有点意思&#xff0c;想着自己也来试试。 如果只是想烧录现成的固件&#xff0c;乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外&#xff0c;还提供了基于网页版的 ESP LA…...

基于Docker Compose部署Java微服务项目

一. 创建根项目 根项目&#xff08;父项目&#xff09;主要用于依赖管理 一些需要注意的点&#xff1a; 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件&#xff0c;否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...

SpringTask-03.入门案例

一.入门案例 启动类&#xff1a; package com.sky;import lombok.extern.slf4j.Slf4j; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.cache.annotation.EnableCach…...

return this;返回的是谁

一个审批系统的示例来演示责任链模式的实现。假设公司需要处理不同金额的采购申请&#xff0c;不同级别的经理有不同的审批权限&#xff1a; // 抽象处理者&#xff1a;审批者 abstract class Approver {protected Approver successor; // 下一个处理者// 设置下一个处理者pub…...

给网站添加live2d看板娘

给网站添加live2d看板娘 参考文献&#xff1a; stevenjoezhang/live2d-widget: 把萌萌哒的看板娘抱回家 (ノ≧∇≦)ノ | Live2D widget for web platformEikanya/Live2d-model: Live2d model collectionzenghongtu/live2d-model-assets 前言 网站环境如下&#xff0c;文章也主…...

Visual Studio Code 扩展

Visual Studio Code 扩展 change-case 大小写转换EmmyLua for VSCode 调试插件Bookmarks 书签 change-case 大小写转换 https://marketplace.visualstudio.com/items?itemNamewmaurer.change-case 选中单词后&#xff0c;命令 changeCase.commands 可预览转换效果 EmmyLua…...

FTXUI::Dom 模块

DOM 模块定义了分层的 FTXUI::Element 树&#xff0c;可用于构建复杂的终端界面&#xff0c;支持响应终端尺寸变化。 namespace ftxui {...// 定义文档 定义布局盒子 Element document vbox({// 设置文本 设置加粗 设置文本颜色text("The window") | bold | color(…...

欢乐熊大话蓝牙知识17:多连接 BLE 怎么设计服务不会乱?分层思维来救场!

多连接 BLE 怎么设计服务不会乱&#xff1f;分层思维来救场&#xff01; 作者按&#xff1a; 你是不是也遇到过 BLE 多连接时&#xff0c;调试现场像网吧“掉线风暴”&#xff1f; 温度传感器连上了&#xff0c;心率带丢了&#xff1b;一边 OTA 更新&#xff0c;一边通知卡壳。…...