three.js 全景看房

已于 2022-07-20 10:41:53 修改
阅读量1.7k 收藏 16
点赞数 2
分类专栏： three.js 文章标签： Three.js 全景 看房 CSS3DRenderer OrbitControls
于 2022-07-13 14:27:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38946164/article/details/125761264
版权

在这里插入图片描述

代码参考了官方的
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>
菜鸟驿站2020
关注
专栏目录
【js&three.js】全景vr看房进阶版
weixin_52479803的博客
08-31 2039
【js&three.js】全景vr看房进阶版
threejs实现3d全景看房
小王的技术库
08-18 4064
作为一个threejs的初学者，针对threejs的讲解和使用较为浅显，在不断学习 threejs 的过程中，感觉还是挺有趣，看着别人炫酷的3D效果感觉好强，也感到自己的不足。我的学习方法，首先入门是在b站看了threejs journey的视频，了解threejs的运用，接下来就是多练，加深对光、材质、相机等等的理解，另外就是去模仿别人的效果。之后就是在b站上学习blender建模课程，了解模型的创建和运用。...
three.js实现3D全景看房
10-23
three.js实现3D全景看房（移动端）。 three.js的基本使用（入门阶段），全景自动展示，以及手动拖拽滑动控制房屋方向角度。
Threejs之看房案例（上）
最新发布
你华还是你华
09-17 1592
Three.js是一个基于WebGL的JavaScript3D库，它允许在网页上创建和显示3D图形。在房地产行业中，Three.js常被用于实现全景看房案例，为用户提供沉浸式的房屋浏览体验。
网页全景看房ThreeJs
qq_43422957的博客
07-06 687
最近看了看Three.js,做了个入门级的小案例--简易版的全景看房（可上下左右拖动，可滚轮调整远近，可操作面板自动转动），vue2写的，注释详细，需要学习three.js的道友可以一键复制去学习，代码看着挺多，其实不复杂。它包含了大量的内置功能和效果，如阴影、纹理映射、光照、粒子效果等，同时还支持各种3D模型和几何体的加载和渲染。threeJS的优点包括丰富的功能和灵活性、跨平台性能和兼容性以及庞大的社区支持和资源库，这些优势使得它成为开发3D图形应用程序的理想选择。本文首发于公众号【雪天前端】
【js&threeJS】入门three，并实现全景看房案例，附带全码
weixin_52479803的博客
08-22 1444
【js&threeJS】入门three，并实现全景看房案例，附带全码
three.js实现全景看房，一个简单实用的功能。
贝格前端工场的博客
03-06 720
首先，通过TextureLoader加载全景图像，并将其应用于一个球体的材质上。然后，创建了一个透视相机，并使用OrbitControls控制相机的交互。通过以上步骤，结合Three.js的功能和API，可以实现一个交互式的全景看房场景。请注意，这只是一个简单的示例代码，实际使用时可能需要根据具体需求进行定制和扩展。例如，可以添加热点和导航功能，加载房间模型，以及其他增强功能等。要实现全景看房功能，可以使用Three.js结合全景图像和交互控制来创建一个交互式的全景看房场景。
vue中利用three.js实现全景图的完整示例
01-18
通过指令下载three.js npm install three -S 第二步: 在组件中引用 import * as THREE from 'three' 第三步: html部分 <div id=container></div> js部分 [removed] import * as THREE from 'three'; var ...
three.js项目（立方体贴图实现3D全景看房）（源码+项目说明）.zip
03-09
【资源说明】 1、该资源包括项目的全部源码，下载可以直接使用！ 2、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和毕设项目...three.js项目（立方体贴图实现3D全景看房）（源码+项目说明）.zip
three.js项目（立方体贴图实现3D全景看房）（完整源码+说明）.zip
03-27
【资源说明】 1、该资源内项目代码都是经过测试运行成功，功能正常的情况下才上传的，请放心下载使用。 2、适用人群：主要针对计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、...
一步步带你实现web全景看房——three.js
weixin_45566319的博客
09-03 7041
1. 基本概念 在THREEjs中，渲染一个3d世界的必要因素是场景（scene）、相机（camera）、渲染器（renderer）。渲染出一个3d世界后，可以往里面增加各种各样的物体、光源等，形成一个3d世界： 场景:右手坐标系,一切要素都在场景里面，相当于“世界”，包括各种物质和物理变化 // 创建场景 复制代码 照相机:摄像机就相当于人眼，有摄像机才可以看见场景里面的一切物体和光源。常用...
VR看房threejs.rar
07-06
VR看房
Threejs + React 实现3D室内看房.zip
05-16
Threejs + React 实现3d室内看房 项目服务启动： 进入目录 执行yarn install 执行yarn dev Threejs + React 实现3d室内看房 项目服务启动： 进入目录 执行yarn install 执行yarn dev Threejs + React 实现3d室内看房 项目服务启动： 进入目录 执行yarn install 执行yarn dev Threejs + React 实现3d室内看房 项目服务启动： 进入目录 执行yarn install 执行yarn dev Threejs + React 实现3d室内看房 项目服务启动： 进入目录 执行yarn install 执行yarn dev Threejs + React 实现3d室内看房 项目服务启动： 进入目录 执行yarn install 执行yarn dev Threejs + React 实现3d室内看房 项目服务启动： 进入目录
three.js实现3D室内全景看房
qq_60976312的博客
03-08 3045
three.js实现3D室内全景看房
three.js实现VR看房自由
嘿嘿，大部分都是前端三维开发的时候遇到的问题，顺手解决了，如果你也遇到了和我一样的问题，希望我的文章可以帮到你
01-11 2026
万字详解-three.js实现VR看房自由
ThreeJS-全屏和退出全屏、自适应大小(五)
以爱护甲,爱满枫林。
03-29 940
ease: 'power1.out',//速度https://greensock.com/get-started/#easing。//但是requestAnimationFrame的回调函数注册生命只有一次，因此需要循环注册，才能达到一直调用的效果。//监听画面变化，更新渲染画面，（自适应的大小）//创建轨道控制器，可以拖动,控制的是摄像头。//设置控制阻尼，让控制器有更真实的效果。
vue3+threejs实现全景看房
weixin_45730243的博客
02-10 2090
Threejs全景看房
vue 项目使用three.js 实现3D看房效果
xiaoxiqo的博客
07-18 2713
该教程能帮助直接写出vue项目的3D看房效果！！！
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值