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

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

news 2025/12/12 6:53:18

👨‍⚕️ 主页： 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来查看共有属性。
方法：

  1. update ( renderer : WebGLRenderer, scene : Scene ) : null renderer
    – 当前的WebGL渲染器 scene – 当前的场景 这个方法用来更新renderTarget（渲染目标对象）。
  2. 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相机创建反光效果

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

编程日记 2024/11/29 8:52:11

Linux网络——IO模型和多路转接

通常所谓的IO&#xff0c;其本质就是等待通信和进行通信&#xff0c;即IO 等 拷贝。 那么想要做到高效的IO&#xff0c;就要在单位时间内&#xff0c;减少“等”的比重。 一.五种IO模型 阻塞 IO: 在内核将数据准备好之前, 系统调用会一直等待. 所有的套接字, 默认都是阻塞方…...

编程日记 2024/11/29 8:51:09

【计网】自定义序列化反序列化(二) —— 实现网络版计算器【上】

&#x1f30e; 实现网络版计算器【上】 文章目录&#xff1a; 实现网络版计算器【上】 自定义协议       制定自定义协议 Jsoncpp序列化反序列化       Json::Value类       Jsoncpp序列化       Jsoncpp反序列化 自定义协议序列化反序列化      …...

编程日记 2024/11/29 8:48:06

数据结构2：顺序表

目录 1.线性表 2.顺序表 2.1概念及结构 2.2接口实现 1.线性表 线性表是n个具有相同特性的数据元素的有限序列。线性表是一种在实际中广泛使用的数据结构&#xff0c;常见的线性表&#xff1a;顺序表、链表、栈、队列、字符串 线性表在逻辑上是线性结构&#xff0c;也就说…...

编程日记 2024/11/29 8:46:59

python学习——元组

在 Python 中&#xff0c;元组&#xff08;tuple&#xff09;是一种内置的数据类型&#xff0c;用于存储不可变的有序元素集合。以下是关于 Python 元组的一些关键点&#xff1a; 文章目录 定义元组1. 使用圆括号 ()2. 使用 tuple() 函数3. 使用单个元素的元组4. 不使用圆括号…...

编程日记 2024/11/29 8:45:56

apache实现绑定多个虚拟主机访问服务

1个网卡绑定多个ip的命令 ip address add 192.168.45.140/24 dev ens33 ip address add 192.168.45.141/24 dev ens33 在linux服务器上&#xff0c;添加多个站点资料&#xff0c;递归创建三个文件目录 分别在三个文件夹下&#xff0c;建立测试页面 修改apache的配置文件http.…...

编程日记 2024/11/29 8:44:55

无需插件，如何以二维码网址直抵3D互动新世界？

随着Web技术的飞速发展&#xff0c;一个无需额外插件&#xff0c;仅凭二维码或网址即可直接访问的三维互动时代已经悄然来临。这一变革&#xff0c;得益于WebGL技术与先进web3D引擎的完美融合&#xff0c;它们共同构建了51建模网这样一个既便捷又高效的在线三维互动平台&#x…...

编程日记 2024/11/29 8:41:52

系统思考—感恩自己

生命中&#xff0c;真正值得我们铭记与感恩的&#xff0c;不是路途上的苦楚与风雨&#xff0c;而是那个在风雨中依然清醒、勇敢前行的自己&#xff0c;和那些一路同行、相互扶持的伙伴们。 感恩自己&#xff0c;感恩每一个与我们携手并进的人&#xff0c;也期待更多志同道合的…...

编程日记 2024/11/29 8:37:45

Java多线程详解①①（全程干货！！！） 实现简单的线程池 || 定时器 || 简单实现定时器 || 时间轮实现定时器

这里是Themberfue 上一节讲了 线程池 线程池中的拒绝策略 等相关内容 实现简单的线程池 一个线程池最核心的方法就是 submit&#xff0c;通过 submit 提交 Runnable 任务来通知线程池来执行 Runnable 任务 我们简单实现一个特定线程数量的线程池&#xff0c;这些线程应该在…...

编程日记 2024/11/29 8:36:43

DAMODEL丹摩｜部署FLUX.1+ComfyUI实战教程

本文仅做测评体验&#xff0c;非广告。 文章目录 1. FLUX.1简介2. 实战2. 1 创建资源2. 1 ComfyUI的部署操作2. 3 部署FLUX.1 3. 测试5. 释放资源4. 结语 1. FLUX.1简介 FLUX.1是由黑森林实验室&#xff08;Black Forest Labs&#xff09;开发的开源AI图像生成模型。它拥有12…...

编程日记 2024/11/29 8:35:40

请求(request)

目录 前言 request概述 request的使用 获取前端传递的数据 实例 请求转发 特点 语法 实例 实例1 实例2 【关联实例1】 域对象 组成 作用范围&#xff1a; 生命周期&#xff1a; 使用场景&#xff1a; 使用步骤 存储数据对象 获得数据对象 移除域中的键值…...

编程日记 2024/11/29 8:33:38

关于VNC连接时自动断联的问题

在服务器端打开VNC Server的选项设置对话框&#xff0c;点左边的“Expert”&#xff08;专家&#xff09;&#xff0c;然后找到“IdleTimeout”&#xff0c;将数值设置为0&#xff0c;点OK关闭对话框。搞定。 注意,服务端有两个vnc服务,这俩都要设置ide timeout为0才行 附件是v…...

编程日记 2024/11/29 8:32:37

C语言strtok()函数用法详解！

strtok 是 C 标准库中的字符串分割函数&#xff0c;用于将一个字符串拆分成多个部分&#xff08;token&#xff09;&#xff0c;以某些字符&#xff08;称为分隔符&#xff09;为界限。 函数原型 char *strtok(char *str, const char *delim);参数&#xff1a; str&#xff1a…...

编程日记 2024/11/29 8:31:36

【docker 拉取镜像超时问题】

问题描述 在centosStream8上安装docker&#xff0c;使用命令sudo docker run hello-world 后出现以下错误&#xff1a; Error response from daemon: Get "https://registry-1.docker.io/v2/": net/http: request canceled while waiting for connection (Client.Ti…...

编程日记 2024/11/29 8:27:32

模拟手机办卡项目（移动大厅）--结合面向对象、JDBC、MYSQL、dao层模式，使用JAVA控制台实现

目录 1. 项目需求 2. 项目使用的技术 3.项目需求分析 3.1 实体类和接口 4.项目结构 5.业务实现 5.1 登录 5.1.1 实现步骤 5.1.2 原生代码问题 ​编辑 5.1.3 解决方法 1.说明&#xff1a; 2. ResultSetHandler结果集处理 5.1.4 代码 5.1.5 实现后的效果图 登录成功​…...

编程日记 2024/11/29 8:26:31

机器学习—大语言模型：推动AI新时代的引擎

云边有个稻草人-CSDN博客 目录 引言 一、大语言模型的基本原理 1. 什么是大语言模型&#xff1f; 2. Transformer 架构 3. 模型训练 二、大语言模型的应用场景 1. 文本生成 2. 问答系统 3. 编码助手 4. 多语言翻译 三、大语言模型的最新进展 1. GPT-4 2. 开源模型 …...

编程日记 2024/11/29 8:20:24

C++：探索哈希表秘密之哈希桶实现哈希

文章目录 前言一、链地址法概念二、哈希表扩容三、哈希桶插入逻辑四、析构函数五、删除逻辑六、查找七、链地址法代码实现总结 前言 前面我们用开放定址法代码实现了哈希表&#xff1a; C&#xff1a;揭秘哈希&#xff1a;提升查找效率的终极技巧_1 对于开放定址法来说&#…...

编程日记 2024/11/29 8:15:15

具身智能高校实训解决方案——从AI大模型+机器人到通用具身智能

一、 行业背景 在具身智能的发展历程中&#xff0c;AI 大模型的出现成为了关键的推动力量。这些大模型具有海量的参数和强大的语言理解、知识表示能力&#xff0c;能够为机器人的行为决策提供更丰富的信息和更智能的指导。然而&#xff0c;单纯的大模型在面对复杂多变的现实…...

编程日记 2024/11/29 8:14:07

【消息序列】详解(8)：探秘物联网中设备广播服务

目录 一、概述 1.1. 定义与特点 1.2. 工作原理 1.3. 应用场景 1.4. 技术优势 二、截断寻呼&#xff08;Truncated Page&#xff09;流程 2.1. 截断寻呼的流程 2.2. 示例代码 2.3. 注意事项 三、无连接外围广播过程 3.1. 设备 A 启动无连接外围设备广播 3.2. 示例代…...

编程日记 2024/11/29 8:13:04

【RL Base】强化学习核心算法：深度Q网络（DQN）算法

&#x1f4e2;本篇文章是博主强化学习&#xff08;RL&#xff09;领域学习时&#xff0c;用于个人学习、研究或者欣赏使用&#xff0c;并基于博主对相关等领域的一些理解而记录的学习摘录和笔记&#xff0c;若有不当和侵权之处&#xff0c;指出后将会立即改正&#xff0c;还望谅…...

编程日记 2024/11/29 8:12:02

零门槛NAS搭建：WinNAS如何让普通电脑秒变私有云？

一、核心优势&#xff1a;专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发&#xff0c;是一款收费低廉但功能全面的Windows NAS工具&#xff0c;主打“无学习成本部署” 。与其他NAS软件相比&#xff0c;其优势在于&#xff1a; 无需硬件改造&#xff1a;将任意W…...

编程新知 2025/9/22 15:46:39

基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述 通过动态调整节点通信的能量开销&#xff0c;平衡网络负载&#xff0c;延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...

编程新知 2025/12/9 11:10:10

【Java学习笔记】Arrays类

Arrays 类 1. 导入包&#xff1a;import java.util.Arrays 2. 常用方法一览表 方法描述Arrays.toString()返回数组的字符串形式Arrays.sort()排序&#xff08;自然排序和定制排序&#xff09;Arrays.binarySearch()通过二分搜索法进行查找&#xff08;前提&#xff1a;数组是…...

编程新知 2025/12/3 9:38:15

Typeerror: cannot read properties of undefined (reading ‘XXX‘)

最近需要在离线机器上运行软件&#xff0c;所以得把软件用docker打包起来&#xff0c;大部分功能都没问题&#xff0c;出了一个奇怪的事情。同样的代码&#xff0c;在本机上用vscode可以运行起来&#xff0c;但是打包之后在docker里出现了问题。使用的是dialog组件&#xff0c;…...

编程新知 2025/9/24 3:05:06

20个超级好用的 CSS 动画库

分享 20 个最佳 CSS 动画库。 它们中的大多数将生成纯 CSS 代码&#xff0c;而不需要任何外部库。 1.Animate.css 一个开箱即用型的跨浏览器动画库&#xff0c;可供你在项目中使用。 2.Magic Animations CSS3 一组简单的动画&#xff0c;可以包含在你的网页或应用项目中。 3.An…...

编程新知 2025/12/10 1:29:00

纯 Java 项目（非 SpringBoot）集成 Mybatis-Plus 和 Mybatis-Plus-Join

纯 Java 项目&#xff08;非 SpringBoot&#xff09;集成 Mybatis-Plus 和 Mybatis-Plus-Join 1、依赖1.1、依赖版本1.2、pom.xml 2、代码2.1、SqlSession 构造器2.2、MybatisPlus代码生成器2.3、获取 config.yml 配置2.3.1、config.yml2.3.2、项目配置类 2.4、ftl 模板2.4.1、…...

编程新知 2025/9/26 12:26:35

虚拟电厂发展三大趋势：市场化、技术主导、车网互联

市场化&#xff1a;从政策驱动到多元盈利 政策全面赋能 2025年4月&#xff0c;国家发改委、能源局发布《关于加快推进虚拟电厂发展的指导意见》&#xff0c;首次明确虚拟电厂为“独立市场主体”&#xff0c;提出硬性目标&#xff1a;2027年全国调节能力≥2000万千瓦&#xff0…...

编程新知 2025/8/3 1:06:36

MySQL 主从同步异常处理

阅读原文&#xff1a;https://www.xiaozaoshu.top/articles/mysql-m-s-update-pk MySQL 做双主&#xff0c;遇到的这个错误&#xff1a; Could not execute Update_rows event on table ... Error_code: 1032是 MySQL 主从复制时的经典错误之一&#xff0c;通常表示&#xff…...

编程新知 2025/11/7 10:02:17

DeepSeek源码深度解析 × 华为仓颉语言编程精粹——从MoE架构到全场景开发生态

前言 在人工智能技术飞速发展的今天&#xff0c;深度学习与大模型技术已成为推动行业变革的核心驱动力&#xff0c;而高效、灵活的开发工具与编程语言则为技术创新提供了重要支撑。本书以两大前沿技术领域为核心&#xff0c;系统性地呈现了两部深度技术著作的精华&#xff1a;…...

编程新知 2025/12/8 17:52:04

6个月Python学习计划 Day 16 - 面向对象编程（OOP）基础

第三周 Day 3 &#x1f3af; 今日目标 理解类&#xff08;class&#xff09;和对象&#xff08;object&#xff09;的关系学会定义类的属性、方法和构造函数&#xff08;init&#xff09;掌握对象的创建与使用初识封装、继承和多态的基本概念&#xff08;预告&#xff09; &a…...

编程新知 2025/11/12 9:47:25