webgl_effects_stereo

ThreeJS 官方案例学习(webgl_effects_stereo)

1.效果图

在这里插入图片描述

2.源码

<template><div><div id="container"></div></div>
</template>
<script>
import * as THREE from 'three';
// 导入控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
// 引入房间环境,创建一个室内环境
import { RoomEnvironment } from 'three/examples/jsm/environments/RoomEnvironment.js';
// 导入性能监视器
import Stats from 'three/examples/jsm/libs/stats.module.js';
// 导入gltf载入库、模型加载器
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
// 引入模型解压器
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader'
//GUI界面
import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js';
import gsap from 'gsap';
//双屏渲染插件
import { StereoEffect } from 'three/examples/jsm/effects/StereoEffect.js';//创建环境贴图(全景图)
const path = '/textures/cube/Park3Med/'
const format = '.jpg'
const urls = [path + 'px' + format, path + 'nx' + format,path + 'py' + format, path + 'ny' + format,path + 'pz' + format, path + 'nz' + format
]
const textureCube = new THREE.CubeTextureLoader().load(urls);
export default {data() {return {container: null, //界面需要渲染的容器scene: null,	// 场景对象camera: null, //相机对象renderer: null, //渲染器对象controller: null,	// 相机控件对象stats: null,// 性能监听器mixer: null,//动画混合器model: null,//导入的模型clock: new THREE.Clock(),// 创建一个clock对象,用于跟踪时间spheres: [],//小球集合// 鼠标移动位置mouseX: 0,mouseY: 0,// 窗口位移windowHalfX: 0,windowHalfY: 0,effect: null,//3D渲染对象};},mounted() {this.init()this.animate()  //如果引入了模型并存在动画,可在模型引入成功后加载动画window.addEventListener("resize", this.onWindowSize)window.addEventListener('mousemove', this.onDocumentMouseMove);},beforeUnmount() {console.log('beforeUnmount===============');// 组件销毁时置空this.container = nullthis.scene = nullthis.camera = nullthis.renderer = nullthis.controller = nullthis.stats = nullthis.mixer = nullthis.model = null//导入的模型},methods: {/*** @description 初始化*/init() {this.container = document.getElementById('container')this.windowHalfX = this.container.clientWidth / 2;this.windowHalfY = this.container.clientHeight / 2;this.setScene()this.setCamera()this.setRenderer()this.setEffect()this.setController()this.addHelper()this.setPMREMGenerator()this.setLight()this.setMesh()this.addStatus()},/*** @description 创建场景*/setScene() {// 创建场景对象Scenethis.scene = new THREE.Scene()// 设置场景背景// this.scene.background = new THREE.Color(0xbfe3dd);this.scene.background = textureCube;},/*** @description 创建相机*/setCamera() {// 第二参数就是 长度和宽度比 默认采用浏览器  返回以像素为单位的窗口的内部宽度和高度this.camera = new THREE.PerspectiveCamera(60, this.container.clientWidth / this.container.clientHeight, 1, 100000)// 设置相机位置this.camera.position.set(0, 0, 3200)// 设置摄像头宽高比例this.camera.aspect = this.container.clientWidth / this.container.clientHeight;// 设置摄像头投影矩阵this.camera.updateProjectionMatrix();// 设置相机视线方向this.camera.lookAt(new THREE.Vector3(0, 0, 0))// 0, 0, 0 this.scene.position// 将相机加入场景this.scene.add(this.camera)},/*** @description 创建渲染器*/setRenderer() {// 初始化渲染器this.renderer = new THREE.WebGLRenderer({antialias: true,// 设置抗锯齿logarithmicDepthBuffer: true,  // 是否使用对数深度缓存})// 设置渲染器宽高this.renderer.setSize(this.container.clientWidth, this.container.clientHeight);// 设置渲染器的像素比this.renderer.setPixelRatio(window.devicePixelRatio);// 是否需要对对象排序// this.renderer.sortObjects = false;// 将渲染器添加到页面this.container.appendChild(this.renderer.domElement);},/*** @description 创建双屏渲染器*/setEffect() {// 初始化渲染器this.effect = new StereoEffect(this.renderer)// 设置渲染器宽高this.effect.setSize(this.container.clientWidth, this.container.clientHeight);},/*** @description 添加创建控制器*/setController() {this.controller = new OrbitControls(this.camera, this.renderer.domElement);// 控制缩放范围// this.controller.minDistance = 1;// this.controller.maxDistance = 5;//是否开启右键拖拽// this.controller.enablePan = false;// 阻尼(惯性)this.controller.enableDamping = true; //启用阻尼(惯性)this.controller.dampingFactor = 0.04; //阻尼惯性有多大// this.controller.autoRotate = true; //自动围绕目标旋转// this.controller.minAzimuthAngle = -Math.PI / 3; //能够水平旋转的角度下限。如果设置,其有效值范围为[-2 * Math.PI,2 * Math.PI],且旋转角度的上限和下限差值小于2 * Math.PI。默认值为无穷大。// this.controller.maxAzimuthAngle = Math.PI / 3;//水平旋转的角度上限,其有效值范围为[-2 * Math.PI,2 * Math.PI],默认值为无穷大// this.controller.minPolarAngle = 1; //能够垂直旋转的角度的下限,范围是0到Math.PI,其默认值为0。// this.controller.maxPolarAngle = Math.PI - 0.1; //能够垂直旋转的角度的上限,范围是0到Math.PI,其默认值为Math.PI。// 修改相机的lookAt是不会影响THREE.OrbitControls的target的// 由于设置了控制器,因此只能改变控制器的target以改变相机的lookAt方向// this.controller.target.set(0, 0.5, 0); //控制器的焦点},/*** @description 创建辅助坐标轴*/addHelper() {// 模拟相机视锥体的辅助对象let helper = new THREE.CameraHelper(this.camera);// this.scene.add(helper);//创建辅助坐标轴、轴辅助 (每一个轴的长度)let axisHelper = new THREE.AxesHelper(150);  // 红线是X轴,绿线是Y轴,蓝线是Z轴this.scene.add(axisHelper)// 坐标格辅助对象let gridHelper = new THREE.GridHelper(100, 30, 0x2C2C2C, 0x888888);this.scene.add(gridHelper);},/*** @description 给场景添加环境光效果*/setPMREMGenerator() {// 预过滤的Mipmapped辐射环境贴图const pmremGenerator = new THREE.PMREMGenerator(this.renderer);this.scene.environment = pmremGenerator.fromScene(new RoomEnvironment(this.renderer), 0.04).texture;},/*** @description 设置光源*/setLight() {// 环境光const ambientLight = new THREE.AmbientLight(0x404040, 4);// this.scene.add(ambientLight);// 平行光const directionalLight = new THREE.DirectionalLight(0xffffff, 1.0);// this.scene.add(directionalLight);// 点光源 - 照模型const test = new THREE.PointLight("#ffffff", 10, 2);// test.position.set(0, 0, 0);// this.scene.add(test);//点光源 - 辅助对象const testHelperMap = new THREE.PointLightHelper(test);// this.scene.add(testHelperMap);},/*** @description 创建性能监听器*/addStatus() {// 创建一个性能监听器this.stats = new Stats();// 将性能监听器添加到容器中this.container.appendChild(this.stats.dom);},/*** @description 添加创建模型*/setMesh() {// 创建模型// THREE.js 中环境贴图的映射模式有哪些?// THREE.CubeReflectionMapping:该映射模式将环境贴图作为一个立方体贴图,将六个面分别映射到对应的立方体面上,以模拟立方体环境映射和反射效果。// THREE.CubeRefractionMapping:该映射模式与 THREE.CubeReflectionMapping 类似,但是它模拟的是折射效果,即将环境贴图中的物体看作透明的,经过物体的折射后反射到表面上。// THREE.EquirectangularReflectionMapping:该映射模式将环境贴图作为一个全景图片,将图片映射到球体或半球体上,以模拟球形环境映射和反射效果。// THREE.EquirectangularRefractionMapping:该映射模式与 THREE.EquirectangularReflectionMapping 类似,但是模拟的是折射效果,即将环境贴图中的物体看作透明的,经过物体的折射后反射到表面上。// THREE.SphericalReflectionMapping:该映射模式将环境贴图映射到一个球形贴图上,以模拟球形环境映射和反射效果。与 THREE.EquirectangularReflectionMapping 相比,该映射模式需要使用一个球形贴图,因此对图像质量的要求较高,但可以实现更加真实的球形反射效果。textureCube.mapping = THREE.CubeRefractionMapping;//图像将如何应用到物体(对象)上const geometry = new THREE.SphereGeometry(100, 32, 16);const material = new THREE.MeshBasicMaterial({color: 0xffffff,envMap: textureCube,//环境贴图refractionRatio: 0.95,//空气的折射率(IOR)(约为1)除以材质的折射率。它与环境映射模式THREE.CubeRefractionMapping 一起使用})// 随机生成500个小球for (let i = 0; i < 500; i++) {const mesh = new THREE.Mesh(geometry, material)mesh.position.x = Math.random() * 10000 - 5000//[-5,5]mesh.position.y = Math.random() * 10000 - 5000mesh.position.z = Math.random() * 10000 - 5000mesh.scale.x = mesh.scale.y = mesh.scale.z = Math.random() * 3 + 1//[1,4]this.scene.add(mesh)this.spheres.push(mesh)}},/*** @description 监听屏幕的大小改变,修改渲染器的宽高,相机的比例*/// 窗口变化onWindowSize() {this.windowHalfX = this.container.clientWidth / 2;this.windowHalfY = this.container.clientHeight / 2;// 更新摄像头this.camera.aspect = this.container.clientWidth / this.container.clientHeight;// 更新摄像机的投影矩阵this.camera.updateProjectionMatrix();//更新渲染器// this.renderer.setSize(this.container.clientWidth, this.container.clientHeight);// 设置渲染器的像素比// this.renderer.setPixelRatio(window.devicePixelRatio)// 更新3D渲染器this.effect.setSize(this.container.clientWidth, this.container.clientHeight);},/*** @description 监听 mousemove 窗口事件*/onDocumentMouseMove(event) {this.mouseX = (event.clientX - this.windowHalfX) * 10;this.mouseY = (event.clientY - this.windowHalfY) * 10;},/*** @description 动画执行函数*/animate() {// camera聚焦const timer = 0.0001 * Date.now();this.camera.position.x += (this.mouseX - this.camera.position.x) * .05;this.camera.position.y += (- this.mouseY - this.camera.position.y) * .05;this.camera.lookAt(this.scene.position);// 小球位置随机for (let i = 0; i < this.spheres.length; i++) {const sphere = this.spheres[i];sphere.position.x = 5000 * Math.cos(timer + i);sphere.position.y = 5000 * Math.sin(timer + i * 1.1);}const delta = this.clock.getDelta();// mixer 动画更新if (this.mixer) {this.mixer.update(delta);}// 引擎自动更新渲染器requestAnimationFrame(this.animate);//update()函数内会执行camera.lookAt(x, y, z)this.controller.update(delta);// 更新性能监听器this.stats.update();// 重新渲染场景// this.renderer.render(this.scene, this.camera);this.effect.render(this.scene, this.camera);},},
};
</script>
<style>
#container {position: absolute;width: 100%;height: 100%;
}
</style>.lookAt(x, y, z)this.controller.update(delta);// 更新性能监听器this.stats.update();// 重新渲染场景// this.renderer.render(this.scene, this.camera);this.effect.render(this.scene, this.camera);},},
};
</script>
<style>
#container {position: absolute;width: 100%;height: 100%;
}
</style>

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

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

相关文章

碳课堂|一文梳理国际碳标准发展历程

在全球气候行动的浪潮中&#xff0c;国际碳标准作为衡量和指导组织与产品环境影响的重要工具&#xff0c;其发展历程不仅标志着环境保护意识的觉醒&#xff0c;也反映了全球合作对抗气候变化的决心。从产品碳足迹的评估到组织碳排放的监控&#xff0c;再到碳中和目标的追求&…

天润酸奶爆改饭盒?为什么听劝营销“硬控”消费者如此有效

不知道大家会不会经常逛超市&#xff1f;有没有发现酸奶货架上有一道异于其它品牌的包装&#xff0c;它就是新疆天润酸奶&#xff0c;酷似饭盒的外包装对于当代倡导实用主义的年轻人来讲&#xff0c;这一发现无疑是直接“创进心巴”&#xff0c;不少网友表示它直接解决了带饭人…

HiveQL性能调优-概览

一、铺垫 1、HiveQL 在执行时会转化为各种计算引擎的能够运行的算子&#xff0c;这里以mr引擎为切入点&#xff0c;要想让HiveQL 的效率更高&#xff0c;就要理解HiveQL 是如何转化为MapReduce任务的 2、hive是基于hadoop的&#xff0c;分布式引擎采用mr、spark、tze&#x…

前端面试题(二)答案版

面试形式&#xff1a;线上面试&#xff08;不露脸&#xff09;&#xff1a;时长40分钟 面试评价&#xff1a;由易到难&#xff0c;由细到全&#xff0c;比较不错 面试官&#xff1a;项目经理 面试官提问&#xff08;面试题&#xff09;&#xff1a; 1、聊聊最近写的这个项目…

WordPress--批量关闭 Pingback 和 Trackback

原文网址&#xff1a;WordPress--批量关闭 Pingback 和 Trackback_IT利刃出鞘的博客-CSDN博客 简介 本文介绍WordPress如何批量关闭 Pingback 和 Trackback。 新发布文章默认关闭 在设置> 讨论中关闭如下两项&#xff1a; 关闭已经发布的文章 UPDATE wp_posts SET ping…

三石峰汽车生产厂的设备振动检测项目案例

汽车生产厂的设备振动检测项目 ----天津三石峰科技&#xff08;http://www.sange-cbm.com&#xff09; 汽车产线有很多传动设备需要长期在线运行&#xff0c;会出现老化、疲劳、磨损等问题&#xff0c;为了避免意外停机造成损失&#xff0c;需要加装一些健康监测设备&#xf…

第34届健博会亮点揭秘:行心科技与段氏常春堂携手共创医康养新生态

随着《“健康中国2030”规划纲要》的持续推进&#xff0c;健康服务业已成为推动经济社会持续发展的重要力量。在即将到来的2024年&#xff0c;第34届健博会暨中国大健康产业文化节&#xff08;以下简称“大健康博览会”&#xff09;将在广州保利世贸博览馆盛大开幕。本届展会汇…

武汉科技大学,计算机考研全面改考408,24计算机专硕复试线仅298分!武汉科技大学计算机考研考情分析!

武汉科技大学&#xff08;Wuhan University of Science and Technology&#xff09;简称“武科大”&#xff0c;坐落于湖北省武汉市&#xff0c;是湖北省人民政府、教育部和六家国家特大型企业共建高校&#xff0c;是湖北省“双一流”建设重点高校&#xff0c;入选国家“中西部…

我的名字叫大数据: 第7章 我的自拍展

7.1 生活瞬间:通过数据图像呈现 数据健身达人们!在经过一系列的辛勤锻炼后,是时候来看看我的“自拍展”了。通过数据图像,我们不仅可以更直观地了解数据,还能将复杂的信息以简单而美观的方式呈现出来。在这一节中,我将带你领略各种数据图像的魅力,从色彩缤纷的条形图到…

亮数据代理IP助力高效数据采集

文章目录 &#x1f4d1;前言一、爬虫数据采集痛点二、代理IP解决爬虫痛点2.1 为什么可以2.2 本篇采用的代理IP 四、零代码获取数据4.1 前置背景4.2 亮数据浏览器自动抓取数据4.3 使用步骤&#xff1a; 五、数据集5.1 免费样本5.2 定制数据集 &#x1f324;️个人小结 &#x1f…

正点原子[第二期]Linux之ARM(MX6U)裸机篇学习笔记-24.5,6 SPI驱动实验-ICM20608 ADC采样值

前言&#xff1a; 本文是根据哔哩哔哩网站上“正点原子[第二期]Linux之ARM&#xff08;MX6U&#xff09;裸机篇”视频的学习笔记&#xff0c;在这里会记录下正点原子 I.MX6ULL 开发板的配套视频教程所作的实验和学习笔记内容。本文大量引用了正点原子教学视频和链接中的内容。…

如何扫描照片?分享推荐这三款软件!

在数字化时代&#xff0c;将纸质照片转化为电子版已成为一种常见需求。无论是为了保存珍贵的回忆&#xff0c;还是为了方便分享和编辑&#xff0c;照片扫描软件都发挥着不可替代的作用。今天&#xff0c;我将为大家推荐三款优秀的照片扫描软件&#xff0c;帮助大家轻松完成照片…

GB28181安防视频融合汇聚平台EasyCVR如何实现视频画面自定义标签?

安防视频融合汇聚平台EasyCVR兼容性强&#xff0c;可支持Windows系统、Linux系统以及国产化操作系统等&#xff0c;平台既具备传统安防视频监控的能力&#xff0c;也具备接入AI智能分析的能力&#xff0c;可拓展性强、视频能力灵活&#xff0c;能对外分发RTMP、RTSP、HTTP-FLV、…

Camtasia Studio2024永久免费版及最新版本功能讲解

在当前数字化时代&#xff0c;视频内容的制作与编辑变得愈发重要。无论是企业宣传、在线教育还是个人Vlog制作&#xff0c;一款功能强大且易于上手的视频编辑软件成为了刚需。Camtasia Studio作为市场上备受欢迎的视频编辑与屏幕录像工具&#xff0c;凭借其强大的功能与用户友好…

芒果YOLOv8改进169:即插即用 | 秩引导的块设计核心CIB结构,设计一种秩引导的块设计方案,旨在通过紧凑型架构设计减少被显示为冗余的阶段的复杂性

💡🚀🚀🚀本博客 秩引导的块设计,设计了一种秩引导的块设计方案,旨在通过紧凑型架构设计减少被显示为冗余的阶段的复杂性 :内含源代码改进 适用于 YOLOv8 按步骤操作运行改进后的代码即可 文章目录 即插即用|秩引导的块设计|最新改进 YOLOv8 代码改进论文理论YOLO…

GA/T 1400视频汇聚平台EasyCVR级联后,平台显示无通道是什么原因?

国标GB28181安防视频监控/视频集中存储/云存储/磁盘阵列EasyCVR平台部署轻快&#xff0c;可支持的主流标准协议有GA/T 1400、国标GB28181、RTSP/Onvif、RTMP等&#xff0c;以及支持厂家私有协议与SDK接入&#xff0c;包括海康Ehome、海大宇等设备的SDK等。 有用户反馈&#xff…

289M→259M得物包体积治理实践

一、前言 iOS应用的包体积大小是衡量得物性能的重要指标&#xff0c;过大包体积会降低用户对应用的下载意愿&#xff0c;还会增加用户的下载等待时间以及用户手机的存储空间&#xff0c;本文重点介绍在包体积治理中的新思路以及原理与实践。 二、原理介绍 Macho产物测试 我…

【Java毕业设计】基于Java的教师考勤管理系统的设计与实现

文章目录 摘 要ABSTRACT目 录1 概述1.1 研究背景及意义1.2 国内外研究现状1.3 拟研究内容1.4 系统开发技术1.4.1 vue技术1.4.2 B/S结构1.4.3 Spring Boot框架1.4.4 MySQL数据库1.4.5 MVC模式 2 系统需求分析2.1 可行性分析2.2 功能需求分析 3 系统设计3.1 功能结构设计3.2 系统…

打造国产软硬件一体化解决方案 YashanDB与宏杉科技完成多项兼容互认证

近日&#xff0c;深圳计算科学研究院崖山数据库系统YashanDB与宏杉科技系列存储、系列服务器与数据库一体机等多款产品顺利完成兼容性互认证。经严格测试&#xff0c;双方产品完全兼容&#xff0c;稳定运行&#xff0c;共同提供高效、稳定、安全的国产软硬件一体化解决方案&…

pw备份问题

1、手动build&#xff0c;dn gs_ctl build -D /database/panweidb/data 或 gs_ctl build -D /database/panweidb/data -b full 2、拉起2节点cm cm_ctl start -n 2 3、启动cm_server服务 cm_ctl start 4、 netstat -anop|grep 17700 5、