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

学习threejs，使用CubeCamera相机创建反光效果

news 来源：原创 2025/5/9 6:52:02

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

文章目录

一、🍀前言
- 1.1 ☘️CubeCamera 立方体相机
二、🍀使用CubeCamera相机创建反光效果
- 1. ☘️实现思路
- 2. ☘️代码样例

一、🍀前言

本文详细介绍如何基于threejs在三维场景中使用CubeCamera相机创建反光效果，亲测可用。希望能帮助到您。一起学习，加油！加油！

1.1 ☘️CubeCamera 立方体相机

CubeCamera立方体相机是一种特殊的相机，它能够捕获周围环境，生成立方体贴图，并将其应用到材质上。它通常用于反射和折射效果，例如镜面反射和玻璃表面的折射。
创建6个摄像机，并将它们所拍摄的场景渲染到WebGLRenderTargetCube上。
构造函数：
CubeCamera( near : Number, far : Number, cubeResolution : Number )
near – 远剪切面的距离
far – 近剪切面的距离
cubeResolution – 设置立方体边缘的长度
构造一个包含6个PerspectiveCameras（透视摄像机）的立方摄像机，并将其拍摄的场景渲染到一个WebGLRenderTargetCube上。
属性：
其基类Object3D来查看共有属性。
方法：

update ( renderer : WebGLRenderer, scene : Scene ) : null renderer
– 当前的WebGL渲染器 scene – 当前的场景这个方法用来更新renderTarget（渲染目标对象）。
clear ( renderer : WebGLRenderer, color : Boolean, depth : Boolean,
stencil : Boolean ) : null 这个方法用来来清除renderTarget的颜色、深度和/或模板缓冲区。
颜色缓冲区设置为渲染器当前的“清除”色。参数默认值均为true。

二、🍀使用CubeCamera相机创建反光效果

1. ☘️实现思路

1、初始化renderer渲染器
2、初始化Scene三维场景scene，创建THREE.CubeTextureLoader立方体纹理加载器cubeTextureLoader，加载cubeTextureLoader的六个方位的图片获取纹理对象cubeTexture，scene背景background设置为cubeTexture。
3、初始化THREE.PerspectiveCamera相机camera，定义camera相机位置。创建THREE.CubeCamera立方体相机cubeCamera，scene场景中加入立方体相机cubeCamera。
4、初始化THREE.AmbientLight环境光源，scene场景加入环境光源，初始化THREE.DirectionalLight平行光源，设置平行光源位置，设置平行光源投影，scene添加平行光源。
5、加载几何模型：创建THREE.AxesHelper坐标辅助工具helper，scene场景加入helper。创建THREE.SphereBufferGeometry球体几何体geometry，创建THREE.MeshBasicMaterial基本材质material，material的环境贴图使用立方体相机的 cubeCamera.renderTarget.texture，传入geometry和material作为参数创建球体THREE.Mesh网格对象sphereMesh，scene场景加入sphereMesh。创建THREE.MeshPhongMaterial光亮材质cubeMaterial，使用普通‘disturb.jpg’贴图，创建立方体网格对象cubeMesh和甜甜圈网格对象torusMesh，都是用cubeMaterial材质，设置各自位置，scene场景加入cubeMesh和torusMesh。
6、加入controls控制，加入stats监控器，监控帧数信息。

2. ☘️代码样例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>learn56(使用CUBECAMERA相机创建反光效果)</title><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/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, material, cubeMesh, torusMesh, cubeCameravar 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)//CubeCamera（near：Number，far：Number，cubeResolution：Number）//近 - 近裁剪距离。//远 - 裁剪距离//cubeResolution - 设置立方体边缘的长度。//可以通过renderTarget对象获取生成的立方体纹理。//创建一个获取环境贴图的cubeCameracubeCamera = new THREE.CubeCamera(0.1, 1000, 256)scene.add(cubeCamera)}var initScene = () => {var cubeTextureLoader = new THREE.CubeTextureLoader()cubeTextureLoader.setPath('data/texture/skybox/')var cubeTexture = cubeTextureLoader.load(['px.jpg', 'nx.jpg','py.jpg', 'ny.jpg','pz.jpg', 'nz.jpg'])scene = new THREE.Scene()scene.background = cubeTexture}var initGui = () => {gui = {}}var initLight = () => {scene.add(new THREE.AmbientLight(0x444444))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(2, 100, 50)material = new THREE.MeshBasicMaterial({envMap: cubeCamera.renderTarget.texture})var cubeMaterial = new THREE.MeshPhongMaterial({map: new THREE.TextureLoader().load('data/texture/disturb.jpg')})var sphereMesh = new THREE.Mesh(geometry, material)scene.add(sphereMesh)// 添加立方体cubeMesh = new THREE.Mesh(new THREE.BoxGeometry(2, 2, 2), cubeMaterial)cubeMesh.position.set(-5, 0, 0)scene.add(cubeMesh)// 添加甜甜圈torusMesh = new THREE.Mesh(new THREE.TorusGeometry(2, 1, 16, 100), cubeMaterial)torusMesh.position.set(8, 0, 0)scene.add(torusMesh)}var  initStats = () => {stats = new Stats()document.body.appendChild(stats.dom)}var initControls = () => {controls = new THREE.OrbitControls(camera, renderer.domElement)controls.enableDamping = true}var render = () => {cubeCamera.update(renderer, scene)cubeMesh.rotation.x += 0.01cubeMesh.position.y += 0.01torusMesh.rotation.x += 0.01torusMesh.position.y += 0.01renderer.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()initRender()initScene()initCamera()initLight()initModel()initStats()initControls()animate()window.onresize = onWindowResize}
</script>
</html>

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

学习threejs，使用CubeCamera相机创建反光效果

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

编程日记 2025/5/9 6:52:02

#渗透测试#红蓝攻防#HW#漏洞挖掘#漏洞复现01-笑脸漏洞（vsftpd）

免责声明本教程仅为合法的教学目的而准备，严禁用于任何形式的违法犯罪活动及其他商业行为，在使用本教程前，您应确保该行为符合当地的法律法规，继续阅读即表示您需自行承担所有操作的后果，如有异议，请立即停…...

编程日记 2025/5/9 6:38:25

使用nginx请求转发时前端报跨域问题解决

当其他接口都没有问题，后端也进行了跨域的配置时，此时问题应该就出现在nginx中我发现当上传文件大小小于1m时并不会发生错误，所以我们应该配置一下nginx允许上传文件的大小在nginx.conf中添加在nginx目录下重启nginx即可 （Wi…...

编程日记 2025/5/9 5:57:58

贪心算法入门（二）

第1题越野跑查看测评数据信息为了能在下一次跑步比赛中有好的发挥，桐桐在一条山路上开始了她的训练。桐桐希望能在每次训练中跑得尽可能远，不过她也知道农场中的一条规定：独自进山的时间不得超过M秒(1 < M < 10,000,000)。整条…...

编程日记 2025/5/9 0:17:03

欧拉函数——acwing

题目一：欧拉函数 873. 欧拉函数 - AcWing题库分析（欧拉函数相关知识点） 互质数不了解可以参考之前笔记，以便更好了解： 数论—快速幂，欧几里得及其扩展，逆元，单位元_数论单位元函…...

编程日记 2025/5/9 6:22:05

Spring集成Mybatis的实现

实现步骤大纲第一步：准备数据库表使用t_act表（账户表） 第二步：IDEA中创建一个模块，并引入依赖 spring-contextspring-jdbcmysql驱动mybatismybatis-spring：mybatis提供的与spring框架集成的依赖德鲁伊连…...

编程日记 2025/5/9 6:04:48

Redis中的分布式锁（步步为营）

分布式锁概述分布式锁指的是，所有服务中的所有线程都去获取同一把锁，但只有一个线程可以成功的获得锁，其他没有获得锁的线程必须全部等待，直到持有锁的线程释放锁。分布式锁是可以跨越多个实例，多个进程的锁分布…...

编程日记 2025/5/9 6:24:51

Linux下的三种 IO 复用

目录一、Select 1、函数 API 2、使用限制 3、使用 Demo 二、Poll 三、epoll 0、实现原理 1、函数 API 2、简单代码模板 3、LT/ET 使用过程 （1）LT 水平触发 （2）ET边沿触发 4、使用 Demo 四、参考链接一、Select 在…...

编程日记 2025/5/9 6:40:07

微服务即时通讯系统的实现（服务端）----（2）

目录 1. 语音识别子服务的实现1.1 功能设计1.2 模块划分1.3 模块功能示意图1.4 接口的实现 2. 文件存储子服务的实现2.1 功能设计2.2 模块划分2.3 模块功能示意图2.4 接口的实现 3. 用户管理子服务的实现3.1 功能设计3.2 模块划分3.3 功能模块示意图3.4 数据管理3.4.1 关系数据…...

编程日记 2025/5/9 6:31:10

数据库原理-期末复习基础知识第二弹

1、数据的逻辑独立性是指外模式/模式映像当模式改变的时候，由数据库管理员对各个外模式/模式的映像做出相应改变，使外模式保持不变。由于应用程序是按照外模式进行编写的，故应用程序不必修改，保证了数据与程序的逻辑独立性。 …...

编程日记 2025/5/5 17:27:10

智能云在线编辑网站（完结篇）

开始及初步计划 1.前端tiptip编辑器框架vue3 2.后端Pythonflaskmysql 3.大模型调用：飞桨系列（ppasr） 前言：以此篇谨记从软件杯到天津生成式ai答辩过程及结束。『如蚍蜉见青天，双肩难挑日月』，感叹世事多…...

编程日记 2025/5/9 6:11:38

多源传感器构建机器人的Gazebo模型

构建包含GNSS、IMU、LiDAR、Camera传感器的Gazebo模型涉及多个步骤，包括设置工作环境、创建URDF文件、安装必要的Gazebo插件和依赖项。以下是一个详细的步骤指南，帮助你开始构建这个Gazebo模型。 1. 设置工作环境首先，确保你已经安装了ROS…...

编程日记 2025/4/28 12:32:41

linux中top 命令返回数据解释

当您在 Linux 终端中运行 top 命令时，它会显示一个动态更新的系统状态视图，其中包括许多有关系统性能的数据。下面是对 top 命令返回数据的详细解释：标题栏 top - 22:46:12 up 2 days, 3:14, 1 user, load average: 0.05, 0.07, 0.09 22:46:12：当前时间。up 2 days, 3:14…...

编程日记 2025/5/9 5:59:09

【Vue3】【Naive UI】＜NDropdown＞标签

【Vue3】【Naive UI】标签基本设置自定义渲染交互事件其他属性【VUE3】【Naive UI】＜NCard＞ 标签【VUE3】【Naive UI】＜n-button＞ 标签【VUE3】【Naive UI】＜a＞ 标签【VUE3】【Naive UI】&#xff1c…...

编程日记 2025/5/9 6:00:31

ADS学习笔记 7. 超外差接收机设计

基于ADS2023 update2 更多ADS学习笔记：ADS学习笔记 1. 功率放大器设计ADS学习笔记 2. 低噪声放大器设计ADS学习笔记 3. 功分器设计ADS学习笔记 4. 微带分支定向耦合器设计ADS学习笔记 5. 微带天线设计ADS学习笔记 6. 射频发射机设计目录 -1、射频接收机性能指标…...

编程日记 2025/5/9 6:15:57

新型大语言模型的预训练与后训练范式，阿里Qwen

前言：大型语言模型（LLMs）的发展历程可以说是非常长，从早期的GPT模型一路走到了今天这些复杂的、公开权重的大型语言模型。最初，LLM的训练过程只关注预训练，但后来逐步扩展到了包括预训练和后训练在内的完整…...

编程日记 2025/5/7 4:54:41

k8s 1.28 二进制安装与部署

第一步 ：配置Linux服务器 #借助梯子工具 192.168.196.100 1C8G kube-apiserver、kube-controller-manager、kube-scheduler、etcd、kubectl、haproxy、keepalived 192.168.196.101 1C8G kube-apiserver、kube-controller-manager、kube-scheduler、etcd、kubectl、…...

编程日记 2025/5/4 10:35:24

Ubuntu 常用解压与压缩命令

.zip文件 unzip FileName.zip # 解压 zip DirName.zip DirName # 将DirName本身压缩 zip -r DirName.zip DirName # 压缩，递归处理，将指定目录下的所有文件和子目录一起压缩 zip DirName.zip DirName 行为： 只压缩 DirName 目录本身&#xff…...

编程日记 2025/5/9 5:52:58

使用ECharts创建带百分比标注的环形图

在数据可视化领域，环形图是一种非常有效的图表类型，它能够清晰地展示各部分与整体的关系。今天，我们将通过ECharts来创建一个带百分比标注的环形图，并详细解释如何实现这一效果。 1. 数据准备首先，我们定义了一些基础…...

编程日记 2025/5/9 6:20:43

lvs虚拟服务器之LVS-NAT模式

一.集群二.LVS:虚拟服务器:工作在传输层,解决高并发三.LVS-NAT一.集群1.概念:集群就是一组计算机集群核心：任务调度集群目的提高性能,降低成本,提高可扩展性,增强可靠性集群分类HA：高可用集群（High Availability Cluster）:避免单…...

编程日记 2025/5/9 6:17:38

虚拟机添加硬盘驱动,Windows 系统添加 VirtIO 驱动（Windows ISO 安装镜像添加驱动）

为什么要在 ISO 镜像里添加驱动？而不是在进系统以后装驱动？一切都是形势所迫。如果你也是爱折腾的人，那么这也会成为一个有用的方案之一。　　最近，因为在给公司研究部署 OpenStack，在制作初始镜像（也就是…...

编程日记 2025/5/6 8:22:16

20241128解决Ubuntu20.04安装libesd0-dev异常的问题

20241128解决Ubuntu20.04安装libesd0-dev异常的问题 2024/11/28 16:36 缘起：中科创达的高通CM6125开发板的Android10的编译环境需要。安装异常：rootrootrootroot-X99-Turbo:~$ rootrootrootroot-X99-Turbo:~$ sudo apt-get install libesd0-dev Readi…...

编程日记 2025/5/9 6:01:54

Linux命令进阶·如何切换root以及回退、sudo命令、用户/用户组管理，以及解决创建用户不显示问题和Ubuntu不显示用户名只显示“$“符号问题

目录 1. root用户（超级管理员） 1.1 用于账户切换的系统命令——su 1.2 退回上一个用户命令——exit 1.3 普通命令临时授权root身份执行——sudo 1.3.1 为普通用户配置sudo认证 2. 用户/用户组管理 2.1 用户组管理 2.2 用户管理 2.2.1 …...

编程日记 2025/5/7 15:05:12

基于链表的基础笔试/面试题

1. 反转链表问题描述：反转一个单向链表。示例： 输入：1 → 2 → 3 → 4 → 5 输出：5 → 4 → 3 → 2 → 1 class ListNode {int val;ListNode next;ListNode(int x) {val x;} }public class LinkedList {public ListNode …...

编程日记 2025/5/1 22:33:01

文件比较和文件流

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

编程日记 2025/5/9 6:08:53

unity如何让一个物体拥有按钮功能

在 Unity 中，要让一个物体（例如一个 3D 模型、UI 元素或其他对象）变成一个按钮，你需要为它添加交互功能。这通常意味着让物体能够响应点击事件，像 UI 按钮那样触发某些行为。对于 3D 物体，可以通过射线检测…...

编程日记 2025/5/9 6:12:59

【RISC-V CPU Debug 专栏 1 -- RISC-V debug 规范】

文章目录 RISC-V Debug调试用例支持的功能限制和不包括的内容RISC-V 调试架构的主要组件用户与调试主机调试翻译器调试传输硬件调试传输模块（DTM）调试模块（DM）调试功能触发模块版本介绍RISC-V Debug RISC-V 调试规范为 RISC-V 处理器提供了一套标准化的调试接口和功能，旨…...

编程日记 2025/4/23 7:26:13

【论文阅读】Federated learning backdoor attack detection with persistence diagram

目的：检测联邦学习环境下，上传上来的模型是不是恶意的。 1、将一个模型转换为|L|个PD,（其中|L|为层数） 如何将每一层转换成一个PD？ 为了评估第𝑗层的激活值，我们需要𝑐个输入来获…...

编程日记 2025/5/5 10:41:09

IDEA Maven 打包找不到程序包错误或找不到符号,报错“程序包不存在“

参考文章：https://blog.csdn.net/yueeryuanyi/article/details/14211090 问题：IDEA Maven 打包找不到程序包错误或找不到符号,报错“程序包不存在“编译都没问题解决思路 – >【清除缓存】 1. 强制刷新Maven缓存选择 Maven 标签，Exe…...

编程日记 2025/5/9 6:26:13

MySQL数据库做题笔记

题目链接https://leetcode.cn/problems/invalid-tweets-ii/description/https://leetcode.cn/problems/invalid-tweets-ii/description/ # Write your MySQL query statement below SELECT tweet_id FROM Tweets where LENGTH(content)>140 OR (length(content)-length(rep…...