利用threejs实现3D全景图

threejs下载位置：http://www.threejs.org
我在Facebook上看到Facebook实现了3D全景图，然后，一直很好奇，最后，我发现threejs里面有一个库竟然可以实现，一下我贴出代码：


<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"><title>three.js css3d - panorama</title><style>body {background-color: #000000;margin: 0;cursor: move;overflow: hidden;}a {color: #ffffff;}#info {position: absolute;width: 100%;color: #ffffff;padding: 5px;font-family: Monospace;font-size: 13px;font-weight: bold;text-align: center;z-index: 1;}</style>
</head>
<body>
<script src="../build/three.min.js"></script> <!-- 此处引入threejs基础类 -->
<script src="js/renderers/CSS3DRenderer.js"></script> <!-- 此处引入CSS3Drenderer.js类 -->
<!-- 以上两个文件，在下载threejs的时候就有的，引入就好 -->
<script>var camera, scene, renderer;var geometry, material, mesh;var target = new THREE.Vector3();var lon = 90, lat = 0;var phi = 0, theta = 0;var touchX, touchY;init();animate();function init() {camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 );scene = new THREE.Scene();
/** 次数是重点说明的* 这个sides对应的是六张图位于立体坐标轴内的位置，里面的position又包含x,y,三个轴* 然后ratation是三个轴上的变换*/ var sides = [{position: [ 512, 0, 0 ], // 1rotation: [ 0, -Math.PI / 2, 0 ]},{position: [ -512, 0, 0 ], // 2rotation: [ 0, Math.PI / 2, 0 ]},{position: [ 0,  512, 0 ], // 3rotation: [ Math.PI / 2, 0, Math.PI ]},{position: [ 0, -512, 0 ], // 4rotation: [ - Math.PI / 2, 0, Math.PI ]},{position: [ 0, 0,  512 ], // 5rotation: [ 0, Math.PI, 0 ]},{position: [ 0, 0, -512 ], // 6rotation: [ 0, 0, 0 ]}];var canvas = document.createElement('canvas');var image = document.createElement('img');image.src = 'picture/360photos.jpg'; // 画图，这里引入的这张图片，是一张图上集合了6张图片image.height = 6144;image.width = 1024;canvas.width = 1024;canvas.height = 1024;// 这里有判断image.onload，这里是判断创建的image节点是否把引入的图片加载进来image.onload = function() {for ( var i = 0; i < sides.length; i ++ ) { // 由于是六张图放在一张图片上，然后这里分割六张图片var cxt = canvas.getContext("2d");cxt.drawImage(image, 0, -1024*i);var side = sides[ i ];var element = document.createElement( 'img' );element.width = 1026; // 2 pixels extra to close the gap.document.getElementsByTagName('body')[0].appendChild(canvas);var _img_url = canvas.toDataURL("image/png"); // 获取图片位置element.src = _img_url;var object = new THREE.CSS3DObject( element ); // 这里根据sides把图片放在坐标轴上进行渲染object.position.fromArray( side.position );object.rotation.fromArray( side.rotation );scene.add( object );}}renderer = new THREE.CSS3DRenderer();renderer.setSize( window.innerWidth, window.innerHeight );document.body.appendChild( renderer.domElement );//document.addEventListener( 'mousedown', onDocumentMouseDown, false );document.addEventListener( 'mousewheel', onDocumentMouseWheel, false );document.addEventListener( 'touchstart', onDocumentTouchStart, false );document.addEventListener( 'touchmove', onDocumentTouchMove, false );window.addEventListener( 'resize', onWindowResize, false );}function onWindowResize() {camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize( window.innerWidth, window.innerHeight );}function onDocumentMouseDown( event ) {event.preventDefault();document.addEventListener( 'mousemove', onDocumentMouseMove, false );document.addEventListener( 'mouseup', onDocumentMouseUp, false );}function onDocumentMouseMove( event ) {var movementX = event.movementX || event.mozMovementX || event.webkitMovementX || 0;var movementY = event.movementY || event.mozMovementY || event.webkitMovementY || 0;lon -= movementX * 0.1;lat += movementY * 0.1;}function onDocumentMouseUp( event ) {document.removeEventListener( 'mousemove', onDocumentMouseMove );document.removeEventListener( 'mouseup', onDocumentMouseUp );}function onDocumentMouseWheel( event ) {camera.fov -= event.wheelDeltaY * 0.05;camera.updateProjectionMatrix();}function onDocumentTouchStart( event ) {event.preventDefault();var touch = event.touches[ 0 ];touchX = touch.screenX;touchY = touch.screenY;}function onDocumentTouchMove( event ) {event.preventDefault();var touch = event.touches[ 0 ];lon -= ( touch.screenX - touchX ) * 0.1;lat += ( touch.screenY - touchY ) * 0.1;touchX = touch.screenX;touchY = touch.screenY;}function animate() {requestAnimationFrame( animate );lon +=  0.1;lat = Math.max( - 85, Math.min( 85, lat ) );phi = THREE.Math.degToRad( 90 - lat );theta = THREE.Math.degToRad( lon );target.x = Math.sin( phi ) * Math.cos( theta );target.y = Math.cos( phi );target.z = Math.sin( phi ) * Math.sin( theta );camera.lookAt( target );renderer.render( scene, camera );}</script>
</body>
</html>

以上，我把重要的说明点都写上了注释，然后，注意，我这里的图片是去facebook上下载下来的，我把Facebook上的图片手动进行了左右翻转实现的程序，如果不需要手动翻转，如果是渲染Facebook上的图片的话，需要把Facebook的图片用程序进行翻转再分割才能渲染出正常的图片，否则渲染出来的全景是不正常的。
我下面附上的图很大，宽度是1024像素的，然后高度是1024像素*6；原图是这张图的左右翻转。
下面，我附上图，此图来自简书上传的，可能会有盗链导致加载不出来：

利用threejs实现3D全景图相关推荐

threejs和3d各种效果的学习
写给即将开始threejs学习的自己,各种尝试,各种记忆.不要怕,灰色的年华终会过去. 一个技术学习的快慢,以及你的深刻程度,还有你的以后遇到这个东西的时候的反应速度,很大程度上,取决于你的博客的深刻 ...
3d效果图全景难制作吗？制作3d全景图的目的是什么
3d效果图对于现在的人们来说是很常见的,而且有些3d图片甚至不需要借助特殊的设备,就可以直接用肉眼就能够看到3d效果,但3d图片和3d全景图片其实是完全不一样的概念,只是很多人常常会对这两种图片混淆, ...
3d全景的市场如何？该如何做好3d全景图？
我们现在看图片或者是看电视已经不仅仅是看清楚这么简单了,随着品味的上升,我们不再以简单的标清为标准,而开始追求高清以及超清画质.图片更加接近实物,就更加让人喜欢,因此很多行业对3d全景更加青睐.在互联 ...
html怎么做成3d正方体,利用CSS3的3D效果制作正方体
学会用CSS3的3D效果制作一个正方体,有助于增强我们对3D场景的旋转和位移属性的理解.下面的动态图就是利用3D旋转位移,结合动画效果制作的.感兴趣的同学可以在完成正方体的制作基础上,再去探究一下添加 ...
使用threejs 实现3D物体展示，平移实现类似百度地图功能
为了实现类似百度地图功能使用threejs 实现3D物体,通过鼠标平移,缩放,键盘箭头按钮左右移动的功能展示. <!DOCTYPE html> <html> <head ...
基于ThreeJS实现3D模型上的室内灯光效果模拟
基于ThreeJS实现3D模型上的室内灯光效果模拟示例描述与操作指南示例效果展示实现步骤示例描述与操作指南当前示例用于展示室内灯光的多角度光影效果. 示例效果展示实现步骤第一步创建聚光 ...
利用css制作3D照片墙
利用css制作3D照片墙 <!doctype html> <html> <head> <meta charset="utf-8"> ...
Threejs实现3D场景浏览器内存消耗过高导致浏览器卡顿崩溃刷新等问题解决办法以及3D场景在手机浏览器中画质不高的原因
个人主页: 左本Web3D,更多案例预览请点击==> 在线案例个人简介:专注Web3D使用ThreeJS实现3D效果技巧和学习案例
3D全景图，全景视频，陀螺仪
3D全景图,全景视频,陀螺仪,兼容安卓,iOS demo是video-vr和img-vr两个html https://gitee.com/luoyang2333/web-vr.git

利用threejs实现3D全景图

利用threejs实现3D全景图相关推荐

最新文章

热门文章