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

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

news 2026/2/8 13:15:14

👨‍⚕️ 主页： 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

【HarmonyOS 5.0】DevEco Testing：鸿蒙应用质量保障的终极武器

——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的​​一体化测试平台​​&#xff0c;覆盖应用全生命周期测试需求&#xff0c;主要提供五大核心能力&#xff1a; ​​测试类型​​​​检测目标​​​​关键指标​​功能体验基…...

编程新知 2026/1/28 8:17:53

DAY 47

三、通道注意力 3.1 通道注意力的定义 # 新增&#xff1a;通道注意力模块&#xff08;SE模块&#xff09; class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...

编程新知 2026/2/4 23:29:22

【第二十一章 SDIO接口(SDIO)】

第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...

编程新知 2026/2/1 13:28:03

家政维修平台实战20：权限设计

目录 1 获取工人信息2 搭建工人入口3 权限判断总结 目前我们已经搭建好了基础的用户体系&#xff0c;主要是分成几个表&#xff0c;用户表我们是记录用户的基础信息&#xff0c;包括手机、昵称、头像。而工人和员工各有各的表。那么就有一个问题&#xff0c;不同的角色&#xf…...

编程新知 2026/2/1 22:23:58

智能在线客服平台：数字化时代企业连接用户的 AI 中枢

随着互联网技术的飞速发展&#xff0c;消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁&#xff0c;不仅优化了客户体验&#xff0c;还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用&#xff0c;并…...

编程新知 2026/2/4 17:51:19

【JavaSE】绘图与事件入门学习笔记

-Java绘图坐标体系 坐标体系-介绍 坐标原点位于左上角&#xff0c;以像素为单位。 在Java坐标系中,第一个是x坐标,表示当前位置为水平方向&#xff0c;距离坐标原点x个像素;第二个是y坐标&#xff0c;表示当前位置为垂直方向&#xff0c;距离坐标原点y个像素。 坐标体系-像素 …...

编程新知 2025/12/19 20:46:15

Unity | AmplifyShaderEditor插件基础（第七集：平面波动shader）

目录 一、&#x1f44b;&#x1f3fb;前言 二、&#x1f608;sinx波动的基本原理 三、&#x1f608;波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、&#x1f30a;波动优化…...

编程新知 2026/2/6 22:55:12

视频行为标注工具BehaviLabel（源码+使用介绍+Windows.Exe版本）

前言&#xff1a; 最近在做行为检测相关的模型&#xff0c;用的是时空图卷积网络&#xff08;STGCN&#xff09;&#xff0c;但原有kinetic-400数据集数据质量较低&#xff0c;需要进行细粒度的标注&#xff0c;同时粗略搜了下已有开源工具基本都集中于图像分割这块&#xff0c…...

编程新知 2026/2/6 5:04:18

AI病理诊断七剑下天山，医疗未来触手可及

一、病理诊断困局&#xff1a;刀尖上的医学艺术 1.1 金标准背后的隐痛 病理诊断被誉为"诊断的诊断"&#xff0c;医生需通过显微镜观察组织切片&#xff0c;在细胞迷宫中捕捉癌变信号。某省病理质控报告显示&#xff0c;基层医院误诊率达12%-15%&#xff0c;专家会诊…...

编程新知 2026/2/6 20:53:34

Java求职者面试指南：Spring、Spring Boot、MyBatis框架与计算机基础问题解析

Java求职者面试指南&#xff1a;Spring、Spring Boot、MyBatis框架与计算机基础问题解析 一、第一轮提问&#xff08;基础概念问题&#xff09; 1. 请解释Spring框架的核心容器是什么&#xff1f;它在Spring中起到什么作用&#xff1f; Spring框架的核心容器是IoC容器&#…...

编程新知 2025/10/4 21:24:40