3。js是一款运行在浏览器中的3 d引擎,处理三维效果。在一些相机的官网首页中,经常有一张图在旋转,图上面悬浮着文字。这种效果是如何做出来的呢?先看效果,再讲解。
1)。建立一个java web工程(或者其他工程),因为3。js的全景图要通过服务端浏览(安全的考虑)
2)。在上面的结构中,只有css中的index.css是自定义的,其余css和javascript都属于three.js自带的工具文件。包含图片在内,已经上传资源了,点击此处下载。
3).index.jsp
% @ & lt;页面语言=癹ava”=癹ava.util进口。*”pageEncoding=" utf - 8 " %比;
& lt; %
字符串路径=request.getContextPath ();
字符串basePath=request.getScheme () +”://? request.getServerName () +“:”+ request.getServerPort() +路径“/?
%比;
& lt; !doctype html>
& lt; html lang=皕h型”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt;元http-equiv=癤-UA-Compatible”内容=癐E=边缘,chrome=1”比;
& lt;元name=笆哟啊蹦谌?翱矶?设备宽度,初始=1.0”比;
& lt; title>基于Three.js的360度全景图片& lt;/title>
& lt;链接rel="样式表" type=" text/css " href=" https://www.yisu.com/zixun/css/normalize.css "/比;
& lt;链接rel="样式表" type=" text/css " href=" https://www.yisu.com/zixun/css/default.css "比;
& lt;链接rel="样式表" type=" text/css " href=" https://www.yisu.com/zixun/css/index.css "比;
& lt;脚本src=" https://www.yisu.com/zixun/js/three.min.js "祝辞& lt;/script>
& lt;脚本src=" https://www.yisu.com/zixun/js/photo-sphere-viewer.min.js "祝辞& lt;/script>
& lt;/head>
& lt; body>
& lt; div类="容器"比;
& lt; div类="描述"比;
& lt; h2>苑中遇雪& lt;/h2>
& lt; p>紫禁仙舆诘旦来,青旂遥倚望春台。;/p>
& lt; p>不知庭霰今朝落,疑是林花昨夜开。;/p>
& lt;/div>
& lt; div id=癿y-pano”class=芭僚等恕弊４? lt;/div>
& lt;/div>
& lt;/body>
& lt; script>
窗口。onload=function () {
var div=. getelementbyid (“my-pano”);
var PSV=new PhotoSphereViewer ({//全景,鉴于64年基地
全景:“图像/snow.jpg ',//容器
容器:div,
自动装载:没错,//关闭动画
time_anim: 2000,//显示导航栏
导航条:没错,//调整全景
大小:{
宽度:70%,
身高:700
}
});
};
& lt;/script>
& lt;/html>
4).index.css
身体{text-align:中心}
.container {
保证金:0汽车;
}
.pano {
保证金:0汽车;
z - index: 1;
}
.description {
宽度:400 px;
左:350 px;
margin-top: 40像素;
z - index: 100;
位置:绝对的;
浮:左;
}
.description h2 {
字体大小:40像素;
颜色:# FFF
}
.description p {
字体大小:22 px;
颜色:# FFF
}
5)。根据实际应用在浏览器测试,全景图可自动旋转,可鼠标拖拽转动,可全屏
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
