three.js全景漫游实践
Hello 小伙伴们,如果觉得本文还不错,记得给个 star , 小伙伴们的 star 是我持续更新的动力!GitHub 地址
简介
全景图分两种
- 由六张正方形图片组成的SkyBox
- 一整张的宽高比为2比1的全景图片。
今天我就实现一整张全景图的案例。
思路
我们超赞的设计师画的中秋全景图(利用透视网格辅助PS绘制)
let geometry = new THREE.SphereGeometry( 500, 60, 40 );
geometry.scale( -1, 1, 1 );
使用上面的全景贴图创建基础材质
let material = new THREE.MeshBasicMaterial({
map: new THREE.TextureLoader().load( 'panorama.jpg'),
depthTest: false//此参数控制是否使用像素深度来计算新像素的值
}); let mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
把相机设置为球的中心点
let camera = new THREE.PerspectiveCamera( 100, window.innerWidth / window.innerHeight, 1, 1100 );
camera.target = new THREE.Vector3( 0, 0, 0 );
camera.position.set(0, 0, 0);
陀螺仪相机控制器,实现移动端陀螺仪控制相机
let controls = new THREE.DeviceOrientationControls( camera );
此时还没有动画效果,还需要增加一个实时更新渲染动画
function animate() {
render();
requestAnimationFrame(animate);
}
function render() {
//更新控制器
controls.update();
camera.lookAt( camera.target );
renderer.render(scene, camera);
}
简单案例代码
这就简单实现了一个全景图,贴出以上的全部代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>简单的全景图</title>
<link rel="stylesheet" type="text/css" href="./css/simple-index.css">
</head>
<body>
<div id="container"></div>
<script type="text/javascript" src="./js/three.min.js"></script>
<script type="text/javascript" src="./js/DeviceOrientationControls.js"></script>
<script type="text/javascript">
class panorama{
constructor () {
this.scene = new THREE.Scene();
this.initCamera();
this.initMesh();
this.initRenderer();
this.animate();
} initCamera () {
let camera = this.camera = new THREE.PerspectiveCamera( 100, window.innerWidth / window.innerHeight, 1, 1100 );
camera.position.set(0, 0, 0); this.controls = new THREE.DeviceOrientationControls( camera );
this.controls.connect();
}
initMesh () {
let geometry = new THREE.SphereGeometry( 500, 60, 40 );
geometry.scale( -1, 1, 1 );
geometry.rotateY(-Math.PI / 2) let material = new THREE.MeshBasicMaterial({
map: new THREE.TextureLoader().load('./textures/SphericalMap.jpg')
}); let mesh = new THREE.Mesh( geometry, material );
this.scene.add( mesh );
}
initRenderer () {
let container = document.getElementById( 'container' );
let renderer = this.renderer = new THREE.WebGLRenderer({ logarithmicDepthBuffer: true });
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.sortObjects = false;
renderer.autoClear = false;
container.appendChild( renderer.domElement );
}
animate() {
this.render();
requestAnimationFrame( ()=>{this.animate()});
}
render() {
//更新控制器
this.controls.update();
this.renderer.render(this.scene, this.camera);
}
}
new panorama();
</script>
</body>
</html>
相机
直接上图,常规的全景漫游的进场效果:
左边是效果,右边是相机辅助效果。
思路分析
相机起始在球体接近顶部位置,从上往下看
let camera = new THREE.PerspectiveCamera( 150, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.set(0, 450, 0);//相机定位在y轴450
camera.target = new THREE.Vector3( 0, -500, 0 );//设置目标点
camera.lookAt( camera.target );//看向y轴负方向
相机有上往下移动到求的中心点(0, 0, 0)。同时,相机目标点从底部(0, -500, 0)转到背面(0, 0, -500)。把fov从150调整为100,效果更赞了。
new TWEEN.Tween( { y : 450, lat : 0, fov : 150 } )
.to( { y : 0, lat : 90, fov : 100 }, 2500 )
.onUpdate(function() {
camera.position.y = this.y;
let phi = THREE.Math.degToRad( this.lat );
camera.target.y = -500 * Math.cos( phi );
camera.target.z = -500 * Math.sin( phi );
camera.fov = this.fov;
camera.updateProjectionMatrix();
})
进场案例代码
DEMO: songdy.github.io/panorama/ca…
辅助理解DEMO: songdy.github.io/panorama/ca…
把简单版加入进场效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>玩转相机</title>
<link rel="stylesheet" type="text/css" href="./css/simple-index.css">
</head>
<body>
<div id="container"></div>
<script type="text/javascript" src="./js/three.min.js"></script>
<script type="text/javascript" src="./js/DeviceOrientationControls.js"></script>
<script type="text/javascript" src="./js/Tween.js"></script>
<script type="text/javascript">
class panorama{
constructor () {
this.SCREEN_WIDTH = window.innerWidth;
this.SCREEN_HEIGHT = window.innerHeight;
this.scene = new THREE.Scene();
this.initCamera();
this.initMesh();
this.initRenderer();
this.animate();
this.start();
}
initCamera () {
let aspect = this.SCREEN_WIDTH / this.SCREEN_HEIGHT;
this.camera = new THREE.PerspectiveCamera( 150, 0.5 * aspect, 1, 2000 );
this.camera.position.set(0, 450, 0);
this.camera.target = new THREE.Vector3( 0, -1, 0 ); }
initMesh () {
let geometry = new THREE.SphereGeometry( 500, 60, 40 );
geometry.scale( -1, 1, 1 );
geometry.rotateY(-Math.PI / 2)
let material = new THREE.MeshBasicMaterial({
map: new THREE.TextureLoader().load('./textures/SphericalMap.jpg')
});
this.mesh = new THREE.Mesh( geometry, material );
this.scene.add( this.mesh );
}
initRenderer () {
let container = document.getElementById( 'container' );
let renderer = this.renderer = new THREE.WebGLRenderer({ logarithmicDepthBuffer: true });
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.sortObjects = false;
renderer.autoClear = false;
container.appendChild( renderer.domElement );
}
start () {
let {camera} = this;
new TWEEN.Tween( { lat : 0, y : camera.position.y, fov : camera.fov } )
.to( { lat: 90, y : 0, fov : 100 }, 2500 )
.delay(1000)
.easing(TWEEN.Easing.Cubic.InOut)
.repeat(Infinity)
.onUpdate(function() {
let phi = THREE.Math.degToRad( this.lat );
camera.target.y = -500 * Math.cos( phi );
camera.target.z = -500 * Math.sin( phi );
camera.position.y = this.y;
camera.fov = this.fov;
camera.updateProjectionMatrix();
})
.start()
}
animate() {
this.render();
requestAnimationFrame( ()=>{this.animate()});
}
render() {
TWEEN.update();
this.camera.lookAt( this.camera.target );
this.renderer.clear();
this.renderer.render( this.scene, this.camera );
}
}
new panorama();
</script>
</body>
</html>
three.js全景漫游实践的更多相关文章
- <Three.js>(第三节)全景漫游
一.实验内容 通过上次实验,了解了Three.js创建场景的基本步骤.这一节,我们将通过Three.js实现全景漫游功能.如下图: 全景图是获取一个3D场景中的不同角度的图片,然后通过拼接.融合实现3 ...
- 打造H5里的“3D全景漫游”秘籍
近来风生水起的VR虚拟现实技术,抽空想起年初完成的“星球计划”项目,总结篇文章与各位分享一下制作基于Html5的3D全景漫游秘籍. QQ物联与深圳市天文台合作,在手Q“发现新设备”-“公共设备”里,连 ...
- 打造自己的3D全景漫游
three.js 示例: 打造H5里的"3D全景漫游"秘籍 - 腾讯ISUX QQ物联星球计划 通过pano2vr直接将鱼眼全景图生成立体空间的六个面:也可通过Photos ...
- JS编程最佳实践
最近花了一周时间把<编写可维护的js> 阅读了一遍, 现将全书提到的JS编程最佳实践总结如下, 已追来者! 1.return 之后不可直接换行, 否则会导致ASI(自动分号插入机制)会在r ...
- Atitit.angular.js 使用最佳实践 原理与常见问题解决与列表显示案例 attilax总结
Atitit.angular.js 使用最佳实践 原理与常见问题解决与列表显示案例 attilax总结 1. 本文范围 1 2. Angular的优点 1 2.1. 双向数据绑定 1 2.2. dsl ...
- Cookie和Session在Node.JS中的实践(三)
Cookie和Session在Node.JS中的实践(三) 前面作者写的COOKIE篇.SESSION篇,算是已经比较详细的说明了两者间的区别.机制.联系了.阅读时间可能稍长,因为作者本身作图也做了不 ...
- Cookie和Session在Node.JS中的实践(二)
Cookie和Session在Node.JS中的实践(二) cookie篇在作者的上一篇文章Cookie和Session在Node.JS中的实践(一)已经是写得算是比较详细了,有兴趣可以翻看,这篇是s ...
- 《Vue.js 2.x实践指南》 已出版
<Vue.js 2.x实践指南>其实在一年前就已经完稿了,只是由于疫情的缘故耽搁了很久才下厂印刷.阅读本书需要具备HTML.CSS和JS基础,本书针对的用户群体主要是:想要快速学习vue技 ...
- 轩辕展览-VR虚拟展厅设计如何实现全景漫游功能
什么是在线3d漫游?如何在VR虚拟展厅设计之中实现3d漫游功能?让我们来分享3dVR虚拟展厅的在线漫游. 实际上,在线3d漫游就是通过3d仿真场景,使用鼠标和键盘在虚拟空间之中自由漫游,它可以从高空俯 ...
随机推荐
- PHP删除目录及目录下所有文件
/** * 删除目录及目录下所有文件或删除指定文件 * @param str $path 待删除目录路径 * @param int $delDir 是否删除目录,1或true删除目录,0或false则 ...
- Cookie和Session的原理和异同
Cookie和Session的原理和异同 原理: cookie: 1.创建Cookie 当用户第一次浏览某个使用Cookie的网站时,该网站的服务器就进行如下工作: ①该用户生成一个唯一的识别码(Co ...
- C++一个类对象的大小计算
计算一个类对象的大小时的规律: 1.空类.单一继承的空类.多重继承的空类所占空间大小为:1(字节,下同): 2.一个类中,虚函数本身.成员函数(包括静态与非静态)和静态数据成员都是不占用类对象的存储空 ...
- 想不想在mac上玩PSP?我教你呀
OpenEmu for mac是一款针对OS X系统的原生开源游戏模拟器.有了它可以在Mac OS X 系统上玩GB.GBA.NDS.psP.PlayStation.超级任天堂(SNES).红白机(N ...
- python书籍推荐:Head First Python(中文版)
所属网站分类: 资源下载 > python电子书 作者:熊猫烧香 链接:http://www.pythonheidong.com/blog/article/64/ 来源:python黑洞网,专注 ...
- CentOs查看某个字符串在某个目录下的行数
如果你想在当前目录下 查找"hello,world!"字符串,可以这样: grep -rn "hello,world!" ./ ./ : 表示路径为当前目录. ...
- Sightseeing trip POJ - 1734 -Floyd 最小环
POJ - 1734 思路 : Floyd 实质 dp ,优化掉了第三维. dp [ i ] [ j ] [ k ] 指的是前k个点优化后 i -> j 的最短路. 所以我们就可以 ...
- C++ 使用 curl 进行 http 请求(GET、POST、Download)的封装
修改自网路 CommonTools.h /* * CommonTools.h * * Created on: 2018年8月2日 * Author: didi */ #include <iost ...
- 2016-3-1 Mac下使用Hexo搭建Blog
一.前期准备: 1.安装Node(必须):前往Node.js官网:https://nodejs.org/en/download/下载最新版本pkg软件,点击安装即可. 2.安装Git(必须):安装 ...
- cgi、fast-cgi、php-pfm关系
CGI是一种规定了服务器和处理进程的数据传输格式的协议 如:nginx 和 php处理进程之间的数据传输是使用cgi格式来相互传输数据 CGI 是 接到请求,fork一条进程来处理,处理完后就退出. ...