Three.js プラグインに基づいて 360 度のパノラマを作成
Dec 03, 2016 pm 03:05 PMこれはthree.jsをベースにしたプラグインです。プレビューアドレス: ここをクリックしてください
使用方法:
1. このプラグインの使用方法は非常に簡単で、次の2つのjsを導入します
<script src="js/three.min.js"></script> <script src="js/photo-sphere-viewer.min.js"></script>
2. (さまざまなパラメータの具体的な設定は状況によって異なります)
var PSV = new PhotoSphereViewer({
// 全景图的完整路径
panorama: 'images/360img03.jpg',
// 放全景图的元素
container: div
})設定パラメータ
以下は、パノラマ プラグインで利用可能なすべての設定パラメータです:
panorama: 必須パラメータ、パノラマのパス。
container: 必須パラメータ、パノラマが配置される div 要素。
autoload: オプション。デフォルト値は true です。true はパノラマを自動的に呼び出すことを意味し、false は後でパノラマをロードすることを意味します (.load() メソッドを通じて)。
usexmpdata: オプション、デフォルト値は true、Photo Sphere Viewer が XMP データを読み取る必要がある場合は true。
default_position: オプション。デフォルト値は {} で、デフォルトの位置とユーザーに表示される最初の点を定義します。例: {long: Math.PI, lat: Math.PI/2}。
min_fov: オプション、デフォルト値は 30、最小観測領域、単位度、1 ～ 179 です。
max_fov: オプション、デフォルト値は 90、最大観測領域、単位度、1 ～ 179 です。
allow_user_interactions: オプション。デフォルト値は true です。false に設定すると、ユーザーはパノラマを操作できなくなります (ナビゲーション バーは使用できなくなります)。
tilt_up_max: オプション。デフォルト値は Math.PI/2、上向き傾斜の最大角度 (ラジアン単位) です。
tilt_down_max: オプション。デフォルト値は Math.PI/2、下向き傾斜の最大角度 (ラジアン単位) です。
zoom_level: オプション。デフォルト値は 0、デフォルトのズーム レベル、値は 0 ～ 100 です。
long_offset: オプション。デフォルト値は PI/360、つまりマウス/タッチが移動したときに各ピクセルによって渡される経度の値です。
lat_offset: オプション。デフォルト値は PI/180、つまりマウス/タッチが移動したときの各ピクセルの緯度値です。
time_anim: オプション、デフォルト値は 2000、パノラマは time_anim ミリ秒後に自動的にアニメーション化されます。 (無効にするには false に設定します)
theta_offset: 廃止されたオプション、オプション、デフォルト値は 1440、自動アニメーション時の水平速度です。
anim_speed: オプション。デフォルト値は 2rpm、アニメーションの速度、1 秒/分あたりのラジアン/度/回転数です。
navbar: オプションの値。デフォルトは false です。ナビゲーションバーを表示します。
navbar_style: オプションの値、デフォルトは {} です。ナビゲーション バーのカスタム スタイル。以下は利用可能なスタイルのリストです:
backgroundColor: ナビゲーション バーの背景色。デフォルト値は rgba(61, 61, 61, 0.5) です。
buttonsColor: ボタンの前景色。デフォルト値は透明です。
activeButtonsBackgroundColor: ボタンのアクティブ化状態の背景色。デフォルト値は rgba(255, 255, 255, 0.1) です。
buttonsHeight: ボタンの高さ (ピクセル単位)、デフォルト値は 20 です。
autorotateThickness: 自動回転アイコンの太さ (ピクセル単位)、デフォルト値は 1 です。
zoomRangeWidth: ズーム範囲、単位表示、デフォルト値 50。
zoomRangeThickness: ズーム範囲の厚さ、単位ピクセル、デフォルト値 1。
zoomRangeDisk: ズーム範囲のディスク直径 (ピクセル単位)、デフォルト値は 7 です。
fullscreenRatio: 全画面アイコンの比率、デフォルト値は 3/4 です。
fullscreenThickness: 全画面アイコンの厚さ (ピクセル単位)、デフォルト値は 2 です。
loading_msg: オプション。デフォルト値は Loading...、画像がロードされるときのプロンプトテキストです。
loading_img: オプション。デフォルト値は null、ロード時に表示される画像のパスです。
size: オプション、デフォルト値は null、パノラマコンテナの最終的なサイズです。例: {幅: 500、高さ: 300}。
onready: オプションの値、デフォルト値は null です。パノラマの準備ができて最初の画像が表示されたときのコールバック関数。
3. 上記のデモのコード
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>360全景图</title>
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<!-- 启用webAPP全屏模式-->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- 隐藏状态栏或者设置状态栏的颜色-->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- 禁止缓存访问页面-->
<meta http-equiv="Pragma" content="no-cache">
<meta name="applicable-device" content="mobile">
<!-- 页面关键词-->
<link rel="stylesheet" href="css/demo01.css">
<script src="js/three.min.js"></script>
<script src="js/photo-sphere-viewer.min.js"></script>
<!---->
<script src="js/demo01.js"></script>
<!--[if IE]>
<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<div>
<h3 id="title">旋转查看效果</h3>
<div id="container"></div>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
text-decoration: none;
border: 0;
outline: 0;
}
.main{
max-width: 640px;
width: 100%;
margin: 0 auto;
}
.main h3{
text-align: center;
padding: 10px 0;
}
/**
* Created by Administrator on 2016/11/29.
*/
//必须在服务器上才能看到效果！
window.onload=function(){
getTitleHeight();
loadingAllImg();
}
//让全景图刚好撑满屏幕
var canvasHeight;
function getTitleHeight(){
var title=document.getElementById('title');
var titleHeight=parseFloat(getComputedStyle(title).height);
var maxHeight=window.innerHeight;
canvasHeight=parseFloat(maxHeight-titleHeight)+'px';
}
//全景图参数配置函数
function loadingAllImg(){
var div = document.getElementById('container');
var PSV = new PhotoSphereViewer({
// 全景图的完整路径
panorama: 'images/360img03.jpg',
// 放全景图的元素
container: div,
// 可选，默认值为2000，全景图在time_anim毫秒后会自动进行动画。（设置为false禁用它）
time_anim: false,
// 可选值，默认为false。显示导航条。
navbar: true,
// 可选，默认值null，全景图容器的最终尺寸。例如：{width: 500, height: 300}。
size: {
width: '100%',
height: canvasHeight
}
});
}
人気の記事
人気の記事
ホットな記事タグ
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7125
9
1534
14
1256
25
1205
29
1153
46
