threejs搭建VR全景视图

最新推荐文章于 2024-07-06 15:11:23 发布

十年一梦惊觉醒

最新推荐文章于 2024-07-06 15:11:23 发布

阅读量2.5k

点赞数

文章标签： vr

本文链接：https://blog.csdn.net/mokeily99/article/details/121282680

版权

资源下载地址：https://download.csdn.net/download/mokeily99/40531697

以下为全部代码，引入文件自行查找

<!DOCTYPE html>
<html style="height:100%;">
<head>

<title>3D</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=6;IE=7; IE=8; IE=EmulateIE7" />

<script type="text/javascript" src="three.min.js"></script>
<script type="text/javascript" src="OrbitControls.js"></script>
<script type="text/javascript" src="PMREMGenerator.js"></script>
<script type="text/javascript" src="PMREMCubeUVPacker.js"></script>
<script type="text/javascript" src="RGBELoader.js"></script>

</head>

<body>
	<script>
		var Scene, camera, renderer, composer, controls;

		init();
		initcamera();

		function init() {
			Scene = new THREE.Scene();
			
			//拍摄距离  视野角值越大，场景中的物体越小,实现小行星视角，近的物体拉长
			var fov = 140
			camera = new THREE.PerspectiveCamera(fov, window.innerWidth
					/ window.innerHeight, 1, 1000);
			camera.position.set(0, 8, 0);
			camera.lookAt(new THREE.Vector3(0, -500, 0))
			
			renderer = new THREE.WebGLRenderer({
				alpha : true,
				antialias : true
			});
			renderer.setSize(window.innerWidth, window.innerHeight);
			renderer.setPixelRatio(window.devicePixelRatio);
			// 渲染范围
			renderer.setSize(window.innerWidth, window.innerHeight);
			// 开启阴影支持
			renderer.shadowMap.enabled = true;
			// 阴影类型
			renderer.shadowMap.type = THREE.PCFSoftShadowMap;
			document.body.appendChild(renderer.domElement);
			
			
			var geom = new THREE.SphereBufferGeometry(10, 100, 100)//创建球体
			//var geom = new THREE.CylinderGeometry(15, 15 ,40 ,40 ,40)
			var texture = new THREE.RGBELoader().load('bg-9.hdr')//加载hdr资源
			//var texture = new THREE.TextureLoader().load('bg-5.jpg')//加载jpg资源方式
			texture.encoding = THREE.RGBEEncoding;//设置编码属性的值，注：加载jpg时需要去掉这行
			texture.minFilter = THREE.NearestFilter;//当一个纹素覆盖小于一个像素时，贴图将如何采样
			texture.magFilter = THREE.NearestFilter;//当一个纹素覆盖大于一个像素时，贴图将如何采样
			texture.flipY = true;//翻转图像的Y轴以匹配WebGL纹理坐标空间
			var mat = new THREE.MeshBasicMaterial({ map: texture, side: THREE.BackSide })
			var mesh = new THREE.Mesh(geom, mat)
			Scene.add(mesh)
			
			//Scene.background = texture;
		}
		
		function initcamera() {
			/* var controls = new THREE.OrbitControls(camera, renderer.domElement);
			controls.autoRotate = true; */

			controls = new THREE.OrbitControls(camera, renderer.domElement);
			controls.target.set(0, 0, 0);
			controls.autoRotate = true;
			controls.minDistance = 0;
			controls.maxDistance = 5000;
			controls.update();
		}

		//环境光
		Scene.add(new THREE.AmbientLight(0xffffff, 2));
		
		//上聚光源
		var spotLight = new THREE.SpotLight(0xffffff, 2);
		spotLight.position.set(0, 500, 0);
		spotLight.LightShadow = 0.5;
		spotLight.castShadow = true;
		spotLight.shadow.mapSize.width = 1024;
		spotLight.shadow.mapSize.height = 1024;
		spotLight.shadow.camera.near = 500;
		spotLight.shadow.camera.far = 1;
		spotLight.shadow.camera.fov = 30;
		Scene.add(spotLight);
		
		var tdwon = new Date();
		var downMax = 0;
		var animatesFlag = true;
		var fovFlag = true;
		var fovStep = -0.001;
		function animateDown() {
			console.log(camera.position.y);
			controls.update();
			var t1 = new Date(); // 本次时间
			var t = t1 - tdwon; // 时间差
			
			camera.translateY(fovStep * t/3);
			//camera.lookAt(Scene.position);// camera.lookAt与orbitcontrol冲突不能使用，要用下面的controls.target代替
			renderer.render(Scene, camera);
			
			if(camera.position.y <= downMax){
				animatesFlag = false;
			}
			
			if(camera.position.y <= (downMax+4) && fovFlag){
				fovFlag = false;
				animateFov();
			}
			
			if (animatesFlag) {
				requestAnimationFrame(animateDown);
			}
		}
		setTimeout(function(){ animateDown();}, 1000);
		
		var tn = new Date();
		function animateNormalCircle() {
			controls.update();
			var t1 = new Date(); // 本次时间
			var t = t1 - tn; // 时间差
			//camera.translateX(0.0001 * t / 3); // 沿着Y轴旋转着从大到小
			
			var axis = new THREE.Vector3(0,0,0);//向量axis
			camera.rotateOnAxis(axis, 0.0001 * t / 3);//绕axis轴旋转π/8
			camera.lookAt(Scene.position);// camera.lookAt与orbitcontrol冲突不能使用，要用下面的controls.target代替
			renderer.render(Scene, camera);
			requestAnimationFrame(animateNormalCircle);
		}
		
		function animateFov(){
			var targetFov = 50;
			var baseFov = camera.fov;
			if(baseFov > targetFov){
				camera.fov = baseFov - 0.5;
				camera.updateProjectionMatrix();
				//渲染
				renderer.render(Scene, camera);
				requestAnimationFrame(animateFov);
			}else{
				animateNormalCircle();
			}
		}

		var skip=0;
		var animate = function() {
			requestAnimationFrame(animate);
			if (skip != 0) {
				skip = ++skip % 2;
				return;
			} else {
				skip = ++skip % 2;
			}
			renderer.render(Scene, camera);
		};
		animate();

	</script>
</body>
</html>

演示效果：

hdr、JPG全景图生成方法参照：3dmax模型导出成全景图的两种方法详细步骤-模型云室内设计资讯

十年一梦惊觉醒

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
0
评论
threejs搭建VR全景视图

资源下载地址：https://download.csdn.net/download/mokeily99/40531697以下为全部代码，引入文件自行查找<!DOCTYPE html><html style="height:100%;"><head><title>3D</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content=
复制链接

扫一扫