-
Notifications
You must be signed in to change notification settings - Fork 12
/
Copy pathcss3d_youtube.html
150 lines (131 loc) · 5.5 KB
/
css3d_youtube.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
<!DOCTYPE html>
<html>
<head>
<title>three.js css3d - youtube</title>
<meta charset="utf-8">
<!--
如果没有设置viewport的width的话，网页很可能会超出手机屏幕宽度，具体多宽，要看浏览器定义的默认宽度是多少
user-scalable=no，规定了用户不能缩放网页，但有些浏览器对该项支持不是很好，故需要设置minimum-scale和maximum-scale相同来限制用户缩放
-->
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
html, body {
height: 100%;
overflow: hidden;
}
#blocker {
position: absolute;
/* background-color: rgba(255, 0, 0, 0.5); */
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<script src="../build/three.js"></script>
<!--
轨迹控制，鼠标左键旋转(与鼠标方向相反，用于触摸屏上)，右键平移，中键缩放；也可以使用键盘控制
-->
<script src="js/controls/TrackballControls.js"></script>
<!--
使用CSS3渲染3D的DOM元素
-->
<script src="js/renderers/CSS3DRenderer.js"></script>
<div id="container"></div>
<div id="blocker"></div>
<script>
var camera, scene, renderer;
var Element = function ( id, x, y, z, ry ) {
/*
var div = document.createElement( 'div' );
div.style.width = '480px';
div.style.height = '360px';
div.style.backgroundColor = '#000';
*/
var iframe = document.createElement( 'iframe' );
iframe.style.width = '480px';
iframe.style.height = '360px';
iframe.style.border = '0px';
iframe.style.backgroundColor = '#000';
iframe.src = [ 'https://www.youtube.com/embed/', id, '?rel=0' ].join( '' );
// div.appendChild( iframe );
//var object = new THREE.CSS3DObject( div );
//只要是个DOM元素均可，外部嵌套div是非必要的
var object = new THREE.CSS3DObject( iframe );
object.position.set( x, y, z );
object.rotation.y = ry;
return object;
};
init();
animate();
function init() {
var container = document.getElementById( 'container' );
/*
PerspectiveCamera(fov, aspect, near, far)
fov(视场)：从相机位置能够看到的部分场景。推荐默认值45
aspect(长宽比)：渲染结果输出区域的横向长度和纵向长度的比值。推荐默认值window.innerWidth/window.innerHeight
near(近面)：定义从距离相机多近的地方开始渲染场景。推荐默认值0.1
far(远面)：定义相机可以从它所处的位置看多远。默认值1000
*/
camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 5000 );
/*
定义相机的位置，有如下两种方式。如果不设置的话，相机位置为默认的Vector3{x:0,y:0,z:0}
camera.position.x = 500;
camera.position.x = 350;
camera.position.x = 750;
*/
camera.position.set( 500, 350, 750 );
scene = new THREE.Scene();
renderer = new THREE.CSS3DRenderer();
//设置待渲染场景的大小
renderer.setSize( window.innerWidth, window.innerHeight );
//将渲染器的DOM元素(即Canvas)可以设置样式
//renderer.domElement.style.position = 'absolute';
//renderer.domElement.style.top = 0;
container.appendChild( renderer.domElement );
//three.js中的分组，同一个分组中的对象可以一起执行某项操作，不用再进行遍历判断
var group = new THREE.Group();
group.add( new Element( 'njCDZWTI-xg', 0, 0, 240, 0 ) );
group.add( new Element( 'HDh4uK9PvJU', 240, 0, 0, Math.PI / 2 ) );
group.add( new Element( 'OX9I1KyNa8M', 0, 0, - 240, Math.PI ) );
group.add( new Element( 'nhORZ6Ep_jE', - 240, 0, 0, - Math.PI / 2 ) );
scene.add( group );
//设置鼠标控制的对象为相机
controls = new THREE.TrackballControls( camera );
//鼠标移动距离转化为控制器旋转角度的比例
controls.rotateSpeed = 4;
window.addEventListener( 'resize', onWindowResize, false );
// Block iframe events when dragging camera
var blocker = document.getElementById( 'blocker' );
//display和visibility的效果一样，即使不显示元素，也会保留其物理空间
blocker.style.display = 'none';
document.addEventListener( 'mousedown', function () {
//style.display = ""；是清除display样式，display将使用默认值（块元素会变成b搜索lock，内联元素会变成inline）
blocker.style.display = '';
//blocker.style.visibility = "visible";
} );
document.addEventListener( 'mouseup', function () {
blocker.style.display = 'none';
//blocker.style.visibility = "hidden";
} );
}
function onWindowResize() {
//重新设置相机的宽高比。如果宽高比不对，那么正方形可能就不是正方形了
camera.aspect = window.innerWidth / window.innerHeight;
//更新透视相机的投影矩阵
camera.updateProjectionMatrix();
//重新设置渲染场景的大小
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame( animate );
//更新轨迹控制器，这里轨迹控制器与相机关联，所以也会更新相机的位置和角度。因此这里就不用设置相机的lookAt了。如果鼠标移动的话，相机会绕着原点旋转
controls.update();
//console.log(camera.position.length());
renderer.render( scene, camera );
}
</script>
</body>
</html>