简介

我们实现全景的方法就是将全景图片获取成功后直接替换掉material.map的img对象，然后再告知three.js它的material.map更新了，然后就实现了场景图的替换。

简单示例

    setInterval(function () {var material = mesh.material;index++;if(index >= 4) index = 1;material.map = loader.load( "00"+index+".jpg" );material.map.needsUpdate = true;},8000);

上面就是一个定时器，每八秒执行一次。首先获取到mesh的material，然后给material.map重新获取图片，然后告诉three.js模型的map需要更新，就实现了当前的效果。

案例代码

<!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() {}var mesh,loader=new THREE.TextureLoader();function initModel() {//轴辅助 （每一个轴的长度）var helper = new THREE.AxesHelper(500);scene.add(helper);//声明一个球体var geometry = new THREE.SphereBufferGeometry( 500, 60, 40 );// 反转X轴上的几何图形，使所有的面点向内。geometry.scale( - 1, 1, 1 );//声明球体纹理var material = new THREE.MeshBasicMaterial( {map: loader.load( 'pano.jpg' ) //加载一整张纹理图片} );mesh = new THREE.Mesh( geometry, material );scene.add( mesh );console.log(scene);}//初始化性能插件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;}var index = 0;setInterval(function () {var material = mesh.material;index++;if(index >= 4) index = 1;material.map = loader.load( "00"+index+".jpg" );material.map.needsUpdate = true;},8000);
</script>
</html>

04 使用three.js开发全景漫游全景图切换的实现相关推荐

03 使用three.js开发全景漫游制作单张球形全景
简介一般网页中使用的全景图为两种,一种是由六张正方形图片组成的,另一种就是一整张的宽高比为2比1的全景图片.前面,第一节的案例就是一个六张正方形.今天我就实现一整张的案例文件引入. 实现思路一张全 ...
three.js制作全景漫游展示
three.js制作全景漫游展示什么是全景漫游展示,就是720云的那种,还有各种街景那种.可以在一个点上下左右观看周围的场景. 做全景漫游比较好的工具是:krpano ,国内外很多全景软件和网站平台 ...
three.js开发全景视频播放器的现实方法
业余弄弄three.js.想用three.js实现播放全景视频.研究了一段.搜索很多资料.感觉这一遍很棒.搜藏分享下. 原理:将video标签拉伸显示在three.js场景的一个球模型上,用相机在中间 ...
Three.js打造H5里的“3D全景漫游”秘籍
近来风生水起的VR虚拟现实技术,抽空想起年初完成的"星球计划"项目,总结篇文章与各位分享一下制作基于Html5的3D全景漫游秘籍. QQ物联与深圳市天文台合作,在手Q"发 ...
教你一招，如何将vr网站中的360全景图图片和全景漫游文件下载到本地电脑
如果你打开vr全景平台,看到好的作品想将360全景图片下载保存到本地,直接右键另存是下载不下来的,因为上传的图片已经过服务器端碎片化处理,在浏览器端访问时通过js脚本动态的加载碎片组合成全景漫游的效果 ...
教你如何将360全景图免费下载到本地，并生成全景漫游
前两天公司有个项目需要下载网上的360全景图素材,找了半天,翻遍了各个vr网站和相关教程,没有一个能免费下载的全景图的方法和工具.后来问了下朋友,给推荐了个软件,据说可以免费下载360全景图,于是搜索 ...
3D步进式全景漫游解决方案，虚拟全景解决方案，一步一景全景解决方案
经过长期研发,我司正式推出3D步进式虚拟展厅解决方案,赋能行业从业人员,更好的推动步进式体验走进千家万户.目前虚拟全景漫游,大部分还是点位跳转方式,少部分公司具有步进式能力.为了行业进一步提高服务能力 ...
使用threejs实现3D全景漫游
最近发现谷歌相机蛮好玩儿的,可以通过拍摄多幅照片将其合成一张全景图,于是我在宿舍中拍摄了宿舍内和阳台的两张全景图,并使用threejs实现了全景漫游. 只是一个简单的全景场景浏览比较简单,就是创建一个 ...
html5 3d场景设计,打造H5里的“3D全景漫游”秘籍－腾讯ISUX
原标题:打造H5里的"3D全景漫游"秘籍 - 腾讯ISUX 近来风生水起的VR虚拟现实技术,抽空想起年初完成的"星球计划"项目,总结篇文章与各位分享一下制作基于 ...

04 使用three.js开发全景漫游全景图切换的实现

简介

简单示例

案例代码

04 使用three.js开发全景漫游全景图切换的实现相关推荐

最新文章

热门文章

04 使用three.js开发全景漫游 全景图切换的实现

简介

简单示例

案例代码

04 使用three.js开发全景漫游 全景图切换的实现相关推荐

最新文章

热门文章

04 使用three.js开发全景漫游全景图切换的实现

04 使用three.js开发全景漫游全景图切换的实现相关推荐