# 全景图片-视频
实现全景图的思路如下
- 创建一个球体
- 给球体的内部贴全景图
- 在球体的圆心位置放置一个透视摄像机
# 全景图片
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
margin: 0;
overflow: hidden;
}
canvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>
<script src="http://www.yanhuangxueyuan.com/versions/threejsR92/examples/js/controls/OrbitControls.js"></script>
<script>
// 创建一个渲染器
var renderer = new THREE.WebGLRenderer({
antialias: true // 是否执行抗锯齿
});
// 创建一个透视相机
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
renderer.setSize(window.innerWidth, window.innerHeight); // 设置canvas宽高
document.body.appendChild(renderer.domElement);// 将canvas元素添加到文档中
// 创建一个场景
var scene = new THREE.Scene();
// 声明球体纹理
var material = new THREE.MeshBasicMaterial({
map: new THREE.TextureLoader().load('../static/images/qj-2.jpg') //加载一整张纹理图片
});
var size = 50;
var skyBox = new THREE.Mesh(new THREE.SphereBufferGeometry(size, size, size), material);// 创建一个球体
skyBox.geometry.scale(-1, 1, 1); // 里外两侧的表面翻转
scene.add(skyBox);// 添加球体到场景中
var controls = new THREE.OrbitControls(camera, renderer.domElement); // 创建相机控制器，用鼠标键盘来来控制相机
controls.enableDamping = true; // 使动画循环使用时阻尼或自转 意思是否有惯性
controls.dampingFactor = 1;// 动态阻尼系数 就是鼠标拖拽旋转灵敏度
controls.enableZoom = true;// 是否可以缩放
controls.autoRotate = false;// 是否自动旋转
controls.minDistance = 10;// 设置相机距离原点的最近距离
controls.maxDistance = 50;// 设置相机距离原点的最远距离
controls.enablePan = false;// 是否开启右键拖拽
function render() {
renderer.render(scene, camera);// 渲染场景
requestAnimationFrame(render);// 循环渲染
}
render()
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
# 全景视频
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>003-03-测试全景视频</title>
<link href="https://vjs.zencdn.net/7.5.4/video-js.css" rel="stylesheet"/>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
}
#video{
position: fixed;
top: 0;
left: 0;
z-index: 9999;
}
</style>
</head>
<body>
<div id="container"></div>
<video id="video" class="video-js " controls muted autoplay width="640" height="320"
data-setup='{}' >
<source src="http://192.168.1.18:8000/live/test.m3u8" type="application/x-mpegURL"/>
<!-- <source src="http://192.168.1.18:8000/live/test1.m3u8" type="application/x-mpegURL" />-->
</video>
<script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>
<script src="../static/three.js-master/build/three.js"></script>
<!--<script src="https://cdn.bootcss.com/three.js/r83/three.min.js"></script>-->
<script>
//定义场景、相机、渲染器
let camera, scene, renderer;
//定义相关的参数
let isUserInteracting = false,
lon = 0,
lat = 0,
phi = 0,
theta = 0,
distance = 50,
onPointerDownPointerX = 0,
onPointerDownPointerY = 0,
onPointerDownLon = 0,
onPointerDownLat = 0;
//窗口的宽和高
let height = window.innerHeight;
let width = window.innerWidth;
init();
animate();
function init() {
let container, mesh;
container = document.getElementById('container');
//定一个透视摄像头
camera = new THREE.PerspectiveCamera(75, width / height, 1, 1100);
camera.target = new THREE.Vector3(0, 0, 0);
scene = new THREE.Scene();
let geometry = new THREE.SphereBufferGeometry(500, 60, 40);
//表面翻转到内部
geometry.scale(-1, 1, 1);
let texture = new THREE.VideoTexture(document.querySelector('#video'));
let material = new THREE.MeshBasicMaterial({
map: texture
});
//设置网格模型的形状和材质
mesh = new THREE.Mesh(geometry, material);
//添加到场景中
scene.add(mesh);
//创建渲染器
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(width, height);
container.appendChild(renderer.domElement);
document.addEventListener('mousedown', onDocumentMouseDown, false);
document.addEventListener('mousemove', onDocumentMouseMove, false);
document.addEventListener('mouseup', onDocumentMouseUp, false);
document.addEventListener('wheel', onDocumentMouseWheel, false);
window.addEventListener('resize', onWindowResize, false);
}
//当窗口大小发生变动的时候触发
function onWindowResize() {
camera.aspect =width / height;
camera.updateProjectionMatrix();
renderer.setSize(width, height);
}
//当鼠标按下的时候触发
function onDocumentMouseDown(event) {
event.preventDefault();
isUserInteracting = true;
onPointerDownPointerX = event.clientX;
onPointerDownPointerY = event.clientY;
onPointerDownLon = lon;
onPointerDownLat = lat;
}
//当鼠标移动的时候触发
function onDocumentMouseMove(event) {
if (isUserInteracting === true) {
lon = (onPointerDownPointerX - event.clientX) * 0.1 + onPointerDownLon;
lat = (event.clientY - onPointerDownPointerY) * 0.1 + onPointerDownLat;
}
}
//当松开鼠标按键的时候触发
function onDocumentMouseUp() {
isUserInteracting = false;
}
//当按住鼠标中键的时候触发,控制鼠标画面放大缩小
function onDocumentMouseWheel(event) {
distance += event.deltaY * 0.05;
distance = THREE.Math.clamp(distance, 1, 50);
}
//持续动画
function animate() {
requestAnimationFrame(animate);
update()
}
//当触发运动的时候，修改摄像头的视角
function update() {
lat = Math.max(-85, Math.min(85, lat));
phi = THREE.Math.degToRad(90 - lat);
theta = THREE.Math.degToRad(lon);
camera.position.x = distance * Math.sin(phi) * Math.cos(theta);
camera.position.y = distance * Math.cos(phi);
camera.position.z = distance * Math.sin(phi) * Math.sin(theta);
camera.lookAt(camera.target);
renderer.render(scene, camera);
}
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151