基于Three.js实现360度全景图片


Posted in Javascript onDecember 30, 2018

Three.js 是一款运行在浏览器中的3D引擎, 处理三维效果。在一些相机的官网首页中,经常有一张图在旋转,图上面悬浮着文字。这种效果是如何做出来的呢?先看效果,再讲解。

基于Three.js实现360度全景图片

1).建立一个java web 工程(或者其他工程), 因为three.js 的全景图要通过服务端浏览(安全的考虑)

基于Three.js实现360度全景图片

2).在上面的结构中,只有css中的index.css是自定义的,其余css和js都属于three.js自带的工具文件。包含图片在内,已经上传资源了,点击此处下载。

3).index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!doctype html>
<html lang="zh">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>基于Three.js的360度全景图片</title>
 <link rel="stylesheet" type="text/css" href="css/normalize.css" />
 <link rel="stylesheet" type="text/css" href="css/default.css" >
 <link rel="stylesheet" type="text/css" href="css/index.css" >
 <script src="js/three.min.js"></script>
 <script src="js/photo-sphere-viewer.min.js"></script>
</head>
<body>
 <div class="container">
 <div class="description">
  <h1>苑中遇雪</h1>
  <p> 紫禁仙舆诘旦来,青?缫R型?禾ā?lt;/p>
  <p>不知庭霰今朝落,疑是林花昨夜开。</p>
 </div>
 <div id="my-pano" class="pano"></div>
 </div> 
</body>
<script>
 window.onload = function() {
  var div = document.getElementById('my-pano');
  var PSV = new PhotoSphereViewer({
  // Panorama, given in base 64
  panorama: 'images/snow.jpg',

  // Container
  container: div,

  autoload:true,

  // Deactivate the animation
  time_anim: 2000,

  // Display the navigation bar
  navbar: true,

  // Resize the panorama
  size: {
  width: '70%',
  height: 700
  }
 });
 };
 </script>
</html>

4).index.css

body{ text-align:center} 
.container {
 margin:0 auto;
}
.pano {
 margin:0 auto;
 z-index:1;
}
.description {
 width:400px;
 left:350px;
 margin-top:40px;
 z-index:100;
 position:absolute;
 float:left; 
}
.description h1 {
 font-size:40px;
 color:#FFF
}
.description p {
 font-size:22px;
 color:#FFF
}

5).根据实际应用在浏览器测试,全景图可自动旋转、可鼠标拖拽转动、可全屏

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
mouse_on_title.js
Aug 25 Javascript
JavaScript Konami Code 实现代码
Jul 29 Javascript
几个javascript操作word的参考代码
Oct 26 Javascript
在js(jquery)中获得文本框焦点和失去焦点的方法
Dec 04 Javascript
window.location.reload()方法刷新页面弹出要再次显示该网页对话框
Apr 24 Javascript
JavaScript中this的使用详解
Nov 08 Javascript
jquery选择器排除某个DOM元素的方法(实例演示)
Apr 25 Javascript
再谈javascript常见错误及解决方法
Sep 16 Javascript
Angularjs单选框相关的示例代码
Aug 17 Javascript
vue2.0 实现页面导航提示引导的方法
Mar 13 Javascript
vue如何将v-for中的表格导出来
May 07 Javascript
浅谈webpack4 图片处理汇总
Sep 12 Javascript
three.js实现圆柱体
Dec 30 #Javascript
three.js实现炫酷的全景3D重力感应
Dec 30 #Javascript
Three.js实现3D机房效果
Dec 30 #Javascript
JavaScript对象的特性与实践应用深入详解
Dec 30 #Javascript
three.js搭建室内场景教程
Dec 30 #Javascript
Three.JS实现三维场景
Dec 30 #Javascript
Three.js实现简单3D房间布局
Dec 30 #Javascript
You might like
PHP 已经成熟
2006/12/04 PHP
php二维数组排序与默认自然排序的方法介绍
2013/04/27 PHP
Zend studio文件注释模板设置方法
2013/09/29 PHP
浅谈thinkphp5 instance 的简单实现
2017/07/30 PHP
laravel框架中控制器的创建和使用方法分析
2019/11/23 PHP
JS location几个方法小姐
2008/07/09 Javascript
js如何获取object类型里的键值
2014/02/18 Javascript
node.js中的fs.mkdirSync方法使用说明
2014/12/17 Javascript
利用JavaScript的AngularJS库制作电子名片的方法
2015/06/18 Javascript
JavaScript设置、获取、清除单值和多值cookie的方法
2015/11/17 Javascript
JQuery手速测试小游戏实现思路详解
2016/09/20 Javascript
详解微信小程序开发之城市选择器 城市切换
2017/01/17 Javascript
element-ui封装一个Table模板组件的示例
2021/01/04 Javascript
Python数据结构与算法之图的广度优先与深度优先搜索算法示例
2017/12/14 Python
Python和Java进行DES加密和解密的实例
2018/01/09 Python
python通过elixir包操作mysql数据库实例代码
2018/01/31 Python
利用python画出折线图
2018/07/26 Python
python3 实现对图片进行局部切割的方法
2018/12/05 Python
scrapy-redis的安装部署步骤讲解
2019/02/27 Python
python实现大学人员管理系统
2019/10/25 Python
pytorch实现mnist分类的示例讲解
2020/01/10 Python
Python实现图像的垂直投影示例
2020/01/17 Python
python+opencv实现移动侦测(帧差法)
2020/03/20 Python
从python读取sql的实例方法
2020/07/21 Python
python 实现图片批量压缩的示例
2020/12/18 Python
世界上最大的糖果店:Dylan’s Candy Bar
2017/11/07 全球购物
COACH德国官方网站:纽约现代奢侈品牌,1941年
2018/06/09 全球购物
豪华床上用品、床单和浴室必需品:Peacock Alley
2019/09/04 全球购物
本科生个人求职自荐信
2013/09/26 职场文书
高中生学习生活的自我评价
2013/10/09 职场文书
建议书怎么写
2014/03/12 职场文书
房地产广告词大全
2014/03/19 职场文书
数控专业毕业生求职信
2014/06/12 职场文书
个人四风问题对照检查材料
2014/09/26 职场文书
大学生社会实践活动总结报告
2015/05/06 职场文书
Nginx配置SSL证书出错解决方案
2021/03/31 Servers