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

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

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/bicheng/63099.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

支持向量机（SVM）的解析与应用：从封闭解到时代演变 （中英双语）

支持向量机（SVM）的解析与应用：从封闭解到时代演变 （中英双语）

中文版 支持向量机&#xff08;SVM&#xff09;的解析与应用&#xff1a;从封闭解到时代演变 什么是支持向量机&#xff08;SVM&#xff09;&#xff1f; 支持向量机&#xff08;Support Vector Machine, SVM&#xff09;是一种经典的监督学习算法&#xff0c;用于解决分类和…
阅读更多...
HTML5系列（5）-- SVG 集成详解

HTML5系列（5）-- SVG 集成详解

前端技术探索系列&#xff1a;HTML5 SVG 集成详解 &#x1f3a8; 开篇寄语 &#x1f44b; 前端开发者们&#xff0c; 在前五篇文章中&#xff0c;我们探讨了 HTML5 的多个特性。今天&#xff0c;让我们深入了解 SVG 的魅力&#xff0c;看看如何创建可缩放的矢量图形。 一、…
阅读更多...
变点问题的公式推导

变点问题的公式推导

背景与关键定义 变点检测问题 变点检测的目标是在给定的观测序列 y 1 , y 2 , … , y T y_1, y_2, \dots, y_T y1​,y2​,…,yT​ 中&#xff0c;找到一个或多个点&#xff08;变点&#xff09;&#xff0c;使得每段子序列&#xff08;即变点划分的区间&#xff09;能被一个较…
阅读更多...
使用 useMemo 和 React.memo 优化 React 组件渲染

使用 useMemo 和 React.memo 优化 React 组件渲染

在 React 中&#xff0c;性能优化是一个重要的主题&#xff0c;特别是在复杂的组件树中。本文将演示如何在同一个父组件中使用 useMemo 和 React.memo 来优化子组件的渲染。 1. 组件结构 创建一个父组件&#xff0c;包含两个子组件&#xff1a; MemoChild&#xff1a;使用 R…
阅读更多...
解决github网络慢的问题

解决github网络慢的问题

前言 本文采用替换host的方式来加速github的git请求&#xff0c;主要我自己用来备份的懒人方式&#xff0c;不然每次都要手动修改hosts文件&#xff0c;skrskrskr… 一、获取到可用的ip 先到这个网站查询到低延迟的ip 站长工具&#xff1a;https://ping.chinaz.com/ 第2步&…
阅读更多...
vue3【实战】多页签【组件封装】PageTabs (含右键快捷菜单组件封装 Contextmenu -- 关闭其他页签，关闭所有页签)

vue3【实战】多页签【组件封装】PageTabs (含右键快捷菜单组件封装 Contextmenu -- 关闭其他页签，关闭所有页签)

效果预览 技术方案 vue3 ( vite | TS | vueUse | AutoImport | pinia) Element Plus UnoCSS 技术要点 需开启 pinia 持久化右键菜单组件借助了 Element Plus 的样式 代码实现 src/components/PageTabs.vue <script setup lang"ts"> import { usePageTabsSto…
阅读更多...
Scala的正则表达式

Scala的正则表达式

package hfdobject Test35_3 {def main(args: Array[String]): Unit {println("a\tb")//定义一个规则 正则表达式//1. .表示除了换行之外的其他的任意单个字符//2. \d等于[0-9] 匹配一个数字//3. \D除了\d之外的其他的任意字符&#xff0c;表示非数字//4. \w等价于[…
阅读更多...
java的几种排序算法（详细）

java的几种排序算法（详细）

冒泡排序&#xff08;Bubble Sort&#xff09; 基本原理&#xff1a; 冒泡排序是一种简单的比较排序算法。它重复地走访要排序的数列&#xff0c;一次比较两个元素&#xff0c;如果它们的顺序错误就把它们交换过来。走访数列的工作是重复地进行直到没有再需要交换&#xff0c;也…
阅读更多...
vue项目env文件的使用（vue cli2和vue cli3）

vue项目env文件的使用（vue cli2和vue cli3）

Vue CLI 2 环境 在 Vue CLI 2 中&#xff0c;需要安装 dotenv 包来加载和使用环境变量。 步骤&#xff1a; 安装 dotenv&#xff1a;首先安装 dotenv 包 npm install dotenv --save创建 .env 文件&#xff1a;在项目的根目录下创建一个 .env 文件&#xff0c;并在其中定义你的…
阅读更多...
全面解析 Transformer：改变深度学习格局的神经网络架构

全面解析 Transformer：改变深度学习格局的神经网络架构

目录 一、什么是 Transformer&#xff1f; 二、Transformer 的结构解析 1. 编码器&#xff08;Encoder&#xff09; 2. 解码器&#xff08;Decoder&#xff09; 3. Transformer 模型结构图 三、核心技术&#xff1a;注意力机制与多头注意力 1. 注意力机制 2. 多头注意力&…
阅读更多...
使用YOLO系列txt目标检测标签的滑窗切割：批量处理图像和标签的实用工具

使用YOLO系列txt目标检测标签的滑窗切割：批量处理图像和标签的实用工具

使用YOLO系列txt目标检测标签的滑窗切割&#xff1a;批量处理图像和标签的实用工具 使用YOLO的TXT目标检测标签的滑窗切割&#xff1a;批量处理图像和标签的实用工具背景1. 代码概述2. 滑窗切割算法原理滑窗切割步骤&#xff1a;示例&#xff1a; 3. **代码实现**1. **加载标签…
阅读更多...
Java ArrayList 详解

Java ArrayList 详解

Java ArrayList 详解 ArrayList 是 Java 集合框架&#xff08;Collection Framework&#xff09;中最常用的类之一&#xff0c;是一种基于动态数组的数据结构&#xff0c;属于 List 接口的实现类。它允许存储重复的元素&#xff0c;有序&#xff0c;支持随机访问&#xff0c;且…
阅读更多...
springboot/ssm线上教育培训办公系统Java代码web项目在线课程作业源码

springboot/ssm线上教育培训办公系统Java代码web项目在线课程作业源码

springboot/ssm线上教育培训办公系统Java代码web项目在线课程作业源码 基于springboot(可改ssm)htmlvue项目 开发语言&#xff1a;Java 框架&#xff1a;springboot/可改ssm vue JDK版本&#xff1a;JDK1.8&#xff08;或11&#xff09; 服务器&#xff1a;tomcat 数据库&…
阅读更多...
Rust学习笔记_13——枚举

Rust学习笔记_13——枚举

Rust学习笔记_10——守卫 Rust学习笔记_11——函数 Rust学习笔记_12——闭包 枚举 文章目录 枚举1. 定义1.1 无值变体1.2 有值变体1.3 枚举与泛型的结合 2. 使用2.1 和匹配模式一起使用2.2 枚举作为类型别名 3. 常用枚举类型 在Rust编程语言中&#xff0c;枚举&#xff08;enum…
阅读更多...
容器运行应用及Docker命令

容器运行应用及Docker命令

文章目录 一、使用容器运行Nginx应用1_使用docker run命令运行Nginx应用1 观察下载容器镜像过程2 观察容器运行情况 2_访问容器中运行的Nginx服务1 确认容器IP地址2 容器网络说明3 使用curl命令访问 二、Docker命令1_Docker命令获取帮助方法2_Docker官网提供的命令说明3_docker…
阅读更多...
深入浅出：php-学习入门全攻略

深入浅出：php-学习入门全攻略

文章目录 1. 为什么选择 PHP&#xff1f;2. 安装 PHP 环境2.1 Windows 系统安装步骤 1&#xff1a;下载 PHP步骤 2&#xff1a;解压并配置步骤 3&#xff1a;配置环境变量步骤 4&#xff1a;验证安装 2.2 Mac 系统安装步骤 1&#xff1a;使用 Homebrew 安装步骤 2&#xff1a;验…
阅读更多...
【热门主题】000075 探索嵌入式硬件设计的奥秘

【热门主题】000075 探索嵌入式硬件设计的奥秘

前言&#xff1a;哈喽&#xff0c;大家好&#xff0c;今天给大家分享一篇文章&#xff01;并提供具体代码帮助大家深入理解&#xff0c;彻底掌握&#xff01;创作不易&#xff0c;如果能帮助到大家或者给大家一些灵感和启发&#xff0c;欢迎收藏关注哦 &#x1f495; 目录 【热…
阅读更多...
数据分析（一）： 掌握STDF 掌握金钥匙-码农切入半导体的捷径

数据分析（一）： 掌握STDF 掌握金钥匙-码农切入半导体的捷径

中国的半导体行业必然崛起&#xff01;看清这个大势&#xff0c;就会有很多机会。 今天&#xff0c;我们一起来了解一下半导体行业的一朵金花&#xff1a;STDF。 实际上这只是一种文件格式&#xff0c;但是当你熟练掌握解析这种文件的时候&#xff0c;你就已经打开在这个基础…
阅读更多...
PostgreSQLt二进制安装-contos7

PostgreSQLt二进制安装-contos7

1、安装依赖 yum install -y gcc readline readline-devel zlib-devel net-tools perl wget numactl libicu-devel bison flex openssl-devel pam pam-devel libxml2 libxml2-devel libxslt libxslt-devel openldap openldap-devel 2、创建目录 mkdir -p /data/postgresql/{…
阅读更多...
Latex转word（docx）或者说PDF转word 一个相对靠谱的方式

Latex转word（docx）或者说PDF转word 一个相对靠谱的方式

0. 前言 投文章过程中总会有各种各样的要求&#xff0c;其中提供word格式的手稿往往是令我头疼的一件事。尤其在多公式的文章中&#xff0c;其中公式转换是一个头疼的地方&#xff0c;还有很多图表&#xff0c;格式等等&#xff0c;想想就让人头疼欲裂。实践中摸索出一条相对靠…
阅读更多...
最新文章

Copyright @ 2022~2023