Three.js Example 注解 —— css3d_youtube.html
【摘要】
本文搬自我的Github，https://github.com/555chy/three.js-example-comment，有兴趣的可以一起来完善，这个为Three.js的Example进行注解，方便...
本文搬自我的Github，https://github.com/555chy/three.js-example-comment，有兴趣的可以一起来完善，这个为Three.js的Example进行注解，方便初学者阅读
three.js 官网 Example 地址：https://threejs.org/examples/
<!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>
- 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
文章来源: blog.csdn.net，作者：福州-司马懿，版权归原作者所有，如需转载，请联系作者。
原文链接：blog.csdn.net/chy555chy/article/details/104860733
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）