03 使用three.js开发全景漫游制作单张球形全景

简介

一般网页中使用的全景图为两种，一种是由六张正方形图片组成的，另一种就是一整张的宽高比为2比1的全景图片。前面，第一节的案例就是一个六张正方形。今天我就实现一整张的案例文件引入。

实现思路

一张全景图都是这样的

这是一张three.js官方的全景图片。我们通过这张全景图实现全景查看。
首先我们需要一个球体的网格

var geometry = new THREE.SphereBufferGeometry( 500, 60, 40 );

然后对网格进行x轴反转，使所有的面点向内。

geometry.scale( - 1, 1, 1 );

如果不进行这段代码执行的话，那就相当于制作地球了。而我们需要的是从球内去看球，所以，将面的显示朝向都朝向中心。
然后我们将纹理图片加载，生成纹理，供网格使用，并添加到场景中

        var material = new THREE.MeshBasicMaterial( {map: new THREE.TextureLoader().load( '2294472375_24a3b8ef46_o.jpg' ) //加载一整张纹理图片} );mesh = new THREE.Mesh( geometry, material );scene.add( mesh );

最后设置好相机为球的中心点，我们置身于了全景当中了。

如果进行缩小，我们还是能看出来这是一个球

我们现在已经实现最简单的全景图查看了。撒花撒花~~~

案例代码

现在贴出全部代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">html, body {margin: 0;height: 100%;}canvas {display: block;}</style>
</head>
<body onload="draw();">
</body>
<script src="https://johnson2heng.github.io/three.js-demo/lib/three.js"></script>
<script src="https://johnson2heng.github.io/three.js-demo/lib/js/controls/OrbitControls.js"></script>
<script src="https://johnson2heng.github.io/three.js-demo/lib/js/libs/stats.min.js"></script>
<script src="https://johnson2heng.github.io/three.js-demo/lib/js/libs/dat.gui.min.js"></script>
<script>var renderer;function initRender() {renderer = new THREE.WebGLRenderer({antialias: true});//renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0)); //设置背景颜色renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);}var camera;function initCamera() {camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);camera.target = new THREE.Vector3( 0, 100, 0 );}var scene;function initScene() {scene = new THREE.Scene();}var light;function initLight() {}function initModel() {//轴辅助 （每一个轴的长度）var object = new THREE.AxesHelper(500);//scene.add(object);//声明一个球体var geometry = new THREE.SphereBufferGeometry( 500, 60, 40 );// 反转X轴上的几何图形，使所有的面点向内。geometry.scale( - 1, 1, 1 );//声明球体纹理var material = new THREE.MeshBasicMaterial( {map: new THREE.TextureLoader().load( '2294472375_24a3b8ef46_o.jpg' ) //加载一整张纹理图片} );mesh = new THREE.Mesh( geometry, material );scene.add( mesh );}//初始化性能插件var stats;function initStats() {stats = new Stats();document.body.appendChild(stats.dom);}//用户交互插件 鼠标左键按住旋转，右键按住平移，滚轮缩放var controls;function initControls() {controls = new THREE.OrbitControls(camera, renderer.domElement);// 如果使用animate方法时，将此函数删除//controls.addEventListener( 'change', render );// 使动画循环使用时阻尼或自转 意思是否有惯性controls.enableDamping = true;//动态阻尼系数 就是鼠标拖拽旋转灵敏度//controls.dampingFactor = 0.25;//是否可以缩放controls.enableZoom = true;//是否自动旋转controls.autoRotate = false;//设置相机距离原点的最远距离controls.minDistance = 20;//设置相机距离原点的最远距离controls.maxDistance = 10000;//是否开启右键拖拽controls.enablePan = true;}//生成gui设置配置项var gui;function initGui() {//声明一个保存需求修改的相关数据的对象gui = {};var datGui = new dat.GUI();//将设置属性添加到gui当中，gui.add(对象，属性，最小值，最大值）}function render() {renderer.render(scene, camera);}//窗口变动触发的函数function onWindowResize() {camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();render();renderer.setSize(window.innerWidth, window.innerHeight);}function animate() {//更新控制器controls.update();render();//更新性能插件stats.update();requestAnimationFrame(animate);}function draw() {initRender();initScene();initCamera();initLight();initModel();initControls();initStats();initGui();animate();window.onresize = onWindowResize;}
</script>
</html>

03 使用three.js开发全景漫游制作单张球形全景相关推荐

全景漫游软件|全景漫游制作软件|三维全景软件|
krpano-GDI是一款360全景漫游制作的软件,具有强大的功能!包括: 热点添加,场景漫游,场景快速切换,场景视频,智能主播,集成360环物功能,平面地图,雷达等,后期会提供更多精彩的皮肤,全景漫 ...
3D步进式全景漫游解决方案，虚拟全景解决方案，一步一景全景解决方案
经过长期研发,我司正式推出3D步进式虚拟展厅解决方案,赋能行业从业人员,更好的推动步进式体验走进千家万户.目前虚拟全景漫游,大部分还是点位跳转方式,少部分公司具有步进式能力.为了行业进一步提高服务能力 ...
720vr全景怎么制作？720vr全景装修效果图介绍
720vr全景是视角逾越人正常视角的图像.全景其实就是一种对周围景象以某种几何关系进行映射形成的平面图片,只有在借助全景播放器的矫正处理后才能成为720vr全景.我们常常听到很多朋友提到360vr全景 ...
java版VR全景漫游制作平台 - 1介绍
@[TOC](java版在线VR制作平台 – 铁牛VR云平台) 铁牛VR云平台 VR云平台是一个在线VR全景开发平台.平台的初衷是为各种VR全景创业企业提供技术支撑,搭建正规可靠的VR平台,给企业降本 ...
three.js制作全景漫游展示
three.js制作全景漫游展示什么是全景漫游展示,就是720云的那种,还有各种街景那种.可以在一个点上下左右观看周围的场景. 做全景漫游比较好的工具是:krpano ,国内外很多全景软件和网站平台 ...
Three.js打造H5里的“3D全景漫游”秘籍
近来风生水起的VR虚拟现实技术,抽空想起年初完成的"星球计划"项目,总结篇文章与各位分享一下制作基于Html5的3D全景漫游秘籍. QQ物联与深圳市天文台合作,在手Q"发 ...
html5 3d场景设计,打造H5里的“3D全景漫游”秘籍－腾讯ISUX
原标题:打造H5里的"3D全景漫游"秘籍 - 腾讯ISUX 近来风生水起的VR虚拟现实技术,抽空想起年初完成的"星球计划"项目,总结篇文章与各位分享一下制作基于 ...
打造H5里的“3D全景漫游”秘籍
近来风生水起的VR虚拟现实技术,抽空想起年初完成的"星球计划"项目,总结篇文章与各位分享一下制作基于Html5的3D全景漫游秘籍. QQ物联与深圳市天文台合作,在手Q"发 ...
自带3D全景漫游神技能的H5是如何炼成的
如今基于HTML5的各式移动互动页面(即常说的H5)加入了越来越多的新技术,比如VR虚拟现实现实,就是最近风口上的大热门H5技术,下面分享一下如何基于HTML5来实现这一效果. QQ物联与深圳市天文台 ...

03 使用three.js开发全景漫游制作单张球形全景

简介

实现思路

案例代码

03 使用three.js开发全景漫游制作单张球形全景相关推荐

最新文章

热门文章

03 使用three.js开发全景漫游 制作单张球形全景

简介

实现思路

案例代码

03 使用three.js开发全景漫游 制作单张球形全景相关推荐

最新文章

热门文章

03 使用three.js开发全景漫游制作单张球形全景

03 使用three.js开发全景漫游制作单张球形全景相关推荐