three.js 全景看房

代码参考了官方的
https://threejs.org

<!DOCTYPE html>
<html><head><title>全景看房</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"><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><!-- 引入本地js --><!-- Three.js-master包下载 http://www.yanhuangxueyuan.com/links.html --><script src="js/three.js"></script><script src="js/CSS3DRenderer.js"></script><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();//图片数组var sides = [{ //正面图url: 'picture/front.jpg',position: [ -512, 0, 0 ], //位置rotation: [ 0, Math.PI / 2, 0 ]  //旋转角度},{ //背面图url: 'picture/back.jpg',position: [ 512, 0, 0 ],rotation: [ 0, -Math.PI / 2, 0 ]},{ //顶部图url: 'picture/top.jpg',position: [ 0,  512, 0 ],rotation: [ Math.PI/2, 0, -Math.PI/2 ] //图片拼接不完美的时候调整这里},{ //底部图url: 'picture/bottom.jpg',position: [ 0, -512, 0 ],rotation: [ - Math.PI / 2, 0, Math.PI/2 ] //图片拼接不完美的时候调整这里},{ //右边图url: 'picture/right.jpg',position: [ 0, 0,  512 ],rotation: [ 0, Math.PI, 0 ]},{ //左边图url: 'picture/left.jpg',position: [ 0, 0, -512 ],rotation: [ 0, 0, 0 ]}];//循环贴图for ( var i = 0; i < sides.length; i ++ ) {                   var side = sides[ i ];                 var element = document.createElement( 'img' );element.width = 1026; element.src = side.url;var object = new THREE.CSS3DObject( element );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( 'wheel', onDocumentMouseWheel, false );document.addEventListener( 'touchstart', onDocumentTouchStart, false );document.addEventListener( 'touchmove', onDocumentTouchMove, false );//双击事件document.addEventListener( 'dblclick', onMouseDbClick, 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 ) {var fov = camera.fov + event.deltaY * 0.05;camera.fov = THREE.Math.clamp( fov, 10, 75 );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 onMouseDbClick( ) {let fullScreenElement = document.fullscreenElement;if (!fullScreenElement){//进入全屏renderer.domElement.requestFullscreen();} else {//退出全屏document.exitFullscreen();}}function animate() {requestAnimationFrame( animate );  //循环执行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>

天空盒是一个包含了整个场景的立方体，它包含周围环境的6个图像。

所有图片的尺寸是 2048X2048

图片来自：https://juejin.cn/post/7112696052884439070

2020-07-20 更新，以下是更简单的代码实现全景看房

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>全景图</title><style>body {margin: 0;overflow: hidden;}</style><script src="./js/three.js"></script><script src="./js/OrbitControls.js"></script>
</head><body><script>//尺寸const width = window.innerWidth;const height = window.innerHeight;//场景const scene = new THREE.Scene();//相机const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);camera.position.set(0,0,-200); //相机位置，想看图片的某个地方是在此处修改camera.lookAt(scene.position);//轨道控制器const controls = new THREE.OrbitControls(camera);//渲染器const renderer = new THREE.WebGLRenderer();renderer.setSize(width, height);document.body.appendChild(renderer.domElement)create();render();function create() {let urls = ['./picture/left.jpg','./picture/right.jpg','./picture/top.jpg','./picture/bottom.jpg','./picture/front.jpg','./picture/back.jpg'];let cubeTexture = new THREE.CubeTextureLoader().load(urls);scene.background = cubeTexture;//窗口缩放事件window.addEventListener( 'resize', onWindowResize, false );  }function render() {renderer.render(scene, camera);requestAnimationFrame(render);}function onWindowResize() {camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize( window.innerWidth, window.innerHeight );}   </script>
</body>
</html>

three.js 全景看房相关推荐

three相机在模型上_一步步带你实现web全景看房——three.js
1. 基本概念在THREEjs中,渲染一个3d世界的必要因素是场景(scene).相机(camera).渲染器(renderer).渲染出一个3d世界后,可以往里面增加各种各样的物体.光源等,形成一 ...
threejs实现3d全景看房
背景随着电商时代的发展,网上购物的方式已经成为主流,良好的购物体验已经显得极为重要.展示给用户的视觉效果便不能仅仅局限于2D视觉效果,全方位的3D立体展示效果能让用户对商品进行 360度无死角的认识 ...
三种前端实现VR全景看房的方案！说不定哪天就用得上！(收藏)
前言事情是这样的,前几天我接到一个外包工头的新需求,某品牌要搭建一个在线VR展厅,用户可以在手机上通过陀螺仪或者拖动来360度全景参观展厅,这个VR展厅里会有一些信息点,点击之后可以呈现更多信息(视 ...
3d怎么把两个面拼接在一起_vr全景看房用什么软件做的？3D看房是怎么拍摄的？...
以往"看房跑断腿"的时代在vr全景看房出现后就得到了很大的解决,如今疫情和"宅经济"的双重影响下,各行各业不得不寻求线上转型:而vr全景对于房地产等行业便是一个 ...
全景看房vr全景展示,获得360度全景式视角实时交互体验
当在马路边收到地产广告传单,相信大部分人会直接无视或者扔掉,相比地产商付出大量的物料和人力成本来说,收效甚微,难以产生高收益.VR全景沉浸式看房体验以全新的体验式选房购房,打造差异化的服务体验,有效截 ...
VR全景看房的具体优势有哪些
"从西走到东.看房累断腿"."开车3小时,看房8分钟"......无论您是买房还是租房,都可能面临时间不够.交通不便.房源真实性等因素,让原本兴奋的看房行动,变 ...
VR全景看房线上3D住宅商品房鉴赏
VR全景看房又称:VR看房.360度/720度全景VR看房.全景3D数字沙盘.3D建模全景看房等等,其实都是全景看房."VR三维全景"是一种可以创建和体验虚拟VR三维空间的计算机3 ...
VR全景说：VR全景看房新体验？如何玩儿转VR房产
近年来,新型技术可谓是层出不穷(VR全景.AI.大数据等),其中最受人们期待,也大有发展前景的就数VR技术了,为什么这么说呢? 因为VR在经历了2016年的高热度后,VR种类更是层出不穷,如VR游戏. ...
vr全景看房是怎么做的？vr全景看房平台有哪些？
随着互联网时代的迅速发展,如今VR技术已经渗透到了各行各业,房地产行业也不例外.VR全景看房在房地产行业中普遍使用,VR技术的出现,帮助房产行业打开"新世界的大门",让购房者进入一 ...

three.js 全景看房

three.js 全景看房相关推荐

最新文章

热门文章