Three.js杂记(十二)—— VR全景效果制作·中
文章目录
- 序
- 正文开始
- 引入threeJs
- 材料收集
- 实现原理
- 实现步骤
- 基础的全景完成
- 完整Vue代码
- 总结
序
在web的前端发展过程中,对于视觉化的要求已经越来越高
有关于VR全景的效果也同样可以在网页中实现了,不用戴上VR设备,你也可以在网页上体会一把“身临其境”的感觉
全景视觉
之前的我ThreeJS系列博客中也曾经写过一篇关于如何制作全景效果的文章,不过只有上半部分的素材采集**(虽然这很重要)**
这是我ThreeJs系列地址,如果对页面3D感兴趣的同学可以过去学习:https://blog.csdn.net/qq_36171287/category_10641247.html
之前对于VR介绍过的文章是(效果还可以):
《Three.js杂记(七)—— 全景效果制作·上(含python爬虫偷碎图,canvas重组图片)》
正文开始
因为距离上一次的全景效果制作文章已经过去很久了,所以本次就换一个全景场景来演示吧,原理都是一样的。
本次项目使用vue cli搭建,所以就不像之前script导入了
引入threeJs
首先是threeJS的库,这是肯定要安装或者script导入的
本次我在vue项目中安装导入,方法:
npm安装three.js依赖
npm install three --save-dev
yarn安装three.js依赖
yarn add three --dev
在main.js中引入:
import * as THREE from 'three';
Vue.use(THREE)
或者使用时直接导入:
const THREE = require('three')
运行项目,打开页面后在控制台输入__THREE__,可以看到THREE的版本号
材料收集
这一部分内容是为了收集全景需要的前后左右上下六个面的图片,具体操作在《Three.js杂记(七)—— 全景效果制作·上(含python爬虫偷碎图,canvas重组图片)》中已经包含了,这里我就不重复叙述了
最终收集到的图片如下:
实现原理
全景图的实现原理:通过创造一个球体/正方体,并在其表面贴上专门的背景图,然后将相机放在球体/正方体的中心,监听手指拖动/陀螺仪移动来改变相机的面向,从而实现全景图
我使用的是建立正方体的方法,所以需要六个面,而摄像头被放在正方体的中央,六面衔接的需要很好,所以对图片素材的要求较高,或者自己拍摄下来进行裁剪也可以。
实现步骤
第一步,先初始化THREE的场景
data中添加:
data() {return {scene: null, //场景camera: null, //摄像机render:null, //渲染器controls:null, //鼠标控制};
},
添加初始化方法:
// 初始化THREE需要的场景
init() {this.scene = new THREE.Scene(); this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);this.render = new THREE.WebGLRenderer({antialias: true});this.render.setPixelRatio(window.devicePixelRatio); //设置设备像素比。通常用于避免HiDPI设备上绘图模糊this.render.setSize(window.innerWidth, window.innerHeight) //设置THREE场景大小为整个页面var app = document.getElementById("threedemo"); app.appendChild(this.render.domElement); //添加场景到DOM中this.camera.position.set(200, 0, 0); //摄像头摆放位置
}
这样设置好了之后,页面就会全部变成黑色
第二步,然后创建场景贴图
这里就是把之前的图片覆盖到场景之上,让场景的background成为CubeTextureLoader立方体
CubeTextureLoader:加载CubeTexture的一个类。 内部使用ImageLoader来加载文件
initImg() {// 创建场景贴图this.scene.background = new THREE.CubeTextureLoader().setPath( '../RESULT/' ).load( [ 'w04.png', 'w05.png', 'w06.png', 'w02.png', 'w01.png', 'w03.png' ] );
},
第三步,因为THREE是在canvas画布上面的,所以要设定时时更新
更新方法:
animate() {this.controls.update();this.render.render(this.scene, this.camera);window.requestAnimationFrame(this.animate);
}
第四步,因为是全景效果,鼠标应当可以拖动视角
但是这需要THREE.OrbitControls的支持
OrbitControls
Orbit controls allow the camera to orbit around a target.
To use this, as with all files in the /examples directory, you will have to include the file seperately in your HTML.
这里使用npm或者yarn进行下载
命令:npm install three-orbitcontrols
使用方式:
const OrbitControls = require('three-orbitcontrols')// 鼠标控件 设置在init方法中
this.controls = new OrbitControls(this.camera, this.render.domElement); //创建控件对象
基础的全景完成
通过以上步骤,基础的全景效果就已经完成了,让我们康康完成的结果如何:
完整Vue代码
<template><div id="threedemo"></div>
</template><script>
const THREE = require('three')
const OrbitControls = require('three-orbitcontrols')
export default {name: "threedemo",props: {},data() {return {scene: null, //场景camera: null, //摄像机render:null, //渲染器controls:null, //鼠标控制};},mounted() {this.init();this.initImg();this.animate();},watch: {},methods: {// 初始化THREE需要的场景init() {this.scene = new THREE.Scene(); this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);this.render = new THREE.WebGLRenderer({antialias: true});this.render.setPixelRatio(window.devicePixelRatio); //设置设备像素比。通常用于避免HiDPI设备上绘图模糊this.render.setSize(window.innerWidth, window.innerHeight) //设置THREE场景大小为整个页面var app = document.getElementById("threedemo"); app.appendChild(this.render.domElement); //添加场景到DOM中this.camera.position.set(200, 0, 0); //摄像头摆放位置// 鼠标控件this.controls = new OrbitControls(this.camera, this.render.domElement); //创建控件对象},initImg() {// 创建场景贴图this.scene.background = new THREE.CubeTextureLoader().setPath( '../RESULT/' ).load( [ 'w04.png', 'w05.png', 'w06.png', 'w02.png', 'w01.png', 'w03.png' ] );},animate() {this.controls.update();this.render.render(this.scene, this.camera);window.requestAnimationFrame(this.animate);}},components: {},computed: {},
};
</script>
<style scoped>#threedemo {overflow: hidden;}
</style>
总结
本次的VR实例其实属于看起来高大上,但是实际操作比较简单的那种
如果对于ThreeJS有过相关性学习的,那么上手起来非常简单
所以大家不要觉得VR这样的效果实现就很难,其实自己简单操作也可以完成,不妨自己试一下吧
各位请不要忘记一件事,可以在文章下方留下你们的足迹
Three.js杂记(十二)—— VR全景效果制作·中相关推荐
- 720°VR全景网站制作
720°VR全景网站制作 一.简介 最近市场上的VR看房.VR车展搞得火热.通过业余时间和几位感兴趣的伙伴一起深入研究了下.在此记录,希望对需要的人有所帮助. 二.前期准备工作 1. 用于制作VR全景 ...
- VR全景的制作与拍摄
随着互联网的发展,全景技术也是在急速的发展,VR虚拟的体验也是越来越多的.VR全景技术也已经应用到了现在市场的很多行业,比如说2020疫情期间恒大推出的VR看房,汽车之家的VR看车等等.全景图成为了新 ...
- 720°VR全景网站制作-多场景
一.准备 两张或两张以上全景图片,复制到krpano-1.19-pr13目录下,我这里拿两张全景图片作为演示 二.开始生成多场景的720°VR全景网站 1.按住键盘的ctrl键(左下角第一个键),点击 ...
- 学习VR技术要学哪些内容?VR全景如何制作?
提起VR相当大家而言都不陌生,VR伴随着科技的发展,进入到人们的日常生活中,不少人都对VR技术很关注,不少公司或者企业也开始逐渐发展VR的技术,如果现在对VR技术能够有所了解的话,那么在后期便能够掌握 ...
- 伤脑筋十二块游戏程序设计制作
伤脑筋十二块游戏程序制作 大家都玩过手机的小游戏吧.我是编程爱好者,喜欢动脑筋研究一些算法,编程做出小游戏程序,很有趣很有成就感.在学习VB6编程时就编制过钻石棋和伤脑筋十二块那样的游戏,都是标准Wi ...
- C语言编程>第二十二周 ① 下列给定程序中,函数fun的功能是:找出一个大于给定整数n且紧随n的素数,并作为函数值返回。
例题:下列给定程序中,函数fun的功能是:找出一个大于给定整数n且紧随n的素数,并作为函数值返回. 例如,输入 整数为32,则输出的数素数为37". 注意:不要改动main函数,不能增行或删 ...
- 全新VR全景可视化制作小程序系统源码+公众号功能模块1.0.28
正文: 最新VR全景可视化制作小程序系统+公众号功能模块源码1.0.28,功能非常强大,有兴趣自行去体验吧. 1.0.28–全景更新日志: 新增全局开关,支持全景背景MP3跟场景解说同时存在 功能优化 ...
- 家居vr全景展示制作提高客户转化
VR全景制作得到了越来越多商企的运用,可以把企业的真实信息进行全方位的展示,把企业的规模,产品,形象,活动等方面1:1的呈现给客户,让客户身临其境,体验式的了解企业的全貌.这是VR全景的优势,未来会成 ...
- WP8.1学习系列(第十二章)——全景控件Panorama开发指南
2014/6/18 适用于:Windows Phone 8 和 Windows Phone Silverlight 8.1 | Windows Phone OS 7.1 全景体验是本机 Windows ...
最新文章
- Mindmanager 甘特图杠上Mindmanager 鱼骨图
- springmvc常见问题汇总
- IE6/IE7下:inline-block不兼容的问题
- (转)iOS里面Frameworks介绍
- CF1338D:Nested Rubber Bands(树形dp)
- django+layUI表格序号自动增加
- 苹果失策?新iPhone捆绑Apple TV+或会致硬件利润率下滑
- 《学习OpenCV3》第2章 OpenCV初探
- 爬虫项目——m3u8后缀的电影
- 爬虫实例4 爬取网络小说
- Live2d vue 插件 将live2d引入vue工程 在网页上添加live2d模型
- Qt知识回顾(九)——2D绘画
- 题目:离骚-原文和译文少了一行,你能写程序识别并找出来吗
- YOLOAir库使用(二)
- dmg文件 linux,Linux通过命令行建立dmg文件的方法(2)
- Shader初级(纹理坐标篇)
- 【小峰の题单】网络流经典题目
- 基于STM32单片机的远程智能浇花花盆GSM短信浇水补光方案原理图程序设计
- 奔驰S400商务型升级前排通风座椅系统,夏天必备的功能
- week15作业A ZJM 与霍格沃兹
热门文章
- irobot 的app开发过程中遇见的一些问题总结
- 如何将高电压和低电压结合在一起设计?
- 人生就是不断自我颠覆——《颠覆者》读书心得
- 你不知道的下划线属性-text-decoration
- Sin7Y 团队全面分析——Zendoo 协议白皮书
- 星球日报 | 虚拟货币挖矿被国家“淘汰”
- C/C++ 控制台输出彩色文本(改变局部字体的颜色)
- AI会议的总结(by南大周志华)
- getSharedPreferences 与 getPreferences 与getDefaultSharedPreferences的区别
- 李国文山东建筑大学计算机学院,刘萌-计算机科学与技术学院