Three.js Example 注解 —— css3d_panorama_deviceorientation.html

心已赠人 2023-07-14 10:49 9阅读 0赞

本文搬自我的Github，[https://github.com/555chy/three.js-example-comment][https_github.com_555chy_three.js-example-comment]，有兴趣的可以一起来完善，这个为Three.js的Example进行注解，方便初学者阅读

three.js 官网 Example 地址：[https://threejs.org/examples/][https_threejs.org_examples]

<!DOCTYPE html>
    <html>
    	<head>
    		<title>three.js css3d - panorama - deviceorientation</title>
    		<meta charset="utf-8">
    		
    		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    		<style>
    			body {
    				background-color: #000000;
    				margin: 0;
    				cursor: move;
    				overflow: hidden;
    			}
    
    			a {
    				color: #ffffff;
    			}
    
    			#info {
    				position: absolute;
    				width: 100%;
    				color: #ffffff;
    				padding: 5px;
    				font-family: Monospace;
    				font-size: 13px;
    				font-weight: bold;
    				text-align: center;
    				z-index: 1;
    			}
    		</style>
    	</head>
    	<body>
    		<script src="../build/three.js"></script>
    		
    		<script src="js/controls/DeviceOrientationControls.js"></script>
    		
    		<script src="js/renderers/CSS3DRenderer.js"></script>
    
    		<div id="info"><a href="http://threejs.org" target="_blank">three.js css3d</a> - panorama - decideorientation. cubemap by <a href="http://www.humus.name/index.php?page=Textures" target="_blank">Humus</a>.</div>
    
    		<script>
    
    			var camera, scene, renderer;
    			var geometry, material, mesh;
    
    			init();
    			animate();
    
    			function init() {
    				/*
    				PerspectiveCamera(fov, aspect, near, far)
                        fov(视场)：从相机位置能够看到的部分场景。推荐默认值45
                        aspect(长宽比)：渲染结果输出区域的横向长度和纵向长度的比值。推荐默认值window.innerWidth/window.innerHeight
                        near(近面)：定义从距离相机多近的地方开始渲染场景。推荐默认值0.1
                        far(远面)：定义相机可以从它所处的位置看多远。默认值1000
                    */
    				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 );
    
    				controls = new THREE.DeviceOrientationControls( camera );
    
    				scene = new THREE.Scene();
    
    				var sides = [
    					{
    						url: 'textures/cube/Bridge2/posx.jpg',
    						position: [ -512, 0, 0 ],
    						rotation: [ 0, Math.PI / 2, 0 ]
    					},
    					{
    						url: 'textures/cube/Bridge2/negx.jpg',
    						position: [ 512, 0, 0 ],
    						rotation: [ 0, -Math.PI / 2, 0 ]
    					},
    					{
    						url: 'textures/cube/Bridge2/posy.jpg',
    						position: [ 0,  512, 0 ],
    						rotation: [ Math.PI / 2, 0, Math.PI ]
    					},
    					{
    						url: 'textures/cube/Bridge2/negy.jpg',
    						position: [ 0, -512, 0 ],
    						rotation: [ - Math.PI / 2, 0, Math.PI ]
    					},
    					{
    						url: 'textures/cube/Bridge2/posz.jpg',
    						position: [ 0, 0,  512 ],
    						rotation: [ 0, Math.PI, 0 ]
    					},
    					{
    						url: 'textures/cube/Bridge2/negz.jpg',
    						position: [ 0, 0, -512 ],
    						rotation: [ 0, 0, 0 ]
    					}
    				];
    /*
    				var sides = [
    					{
    						url: 'textures/cube/test/px.jpg',
    						position: [ -512, 0, 0 ],
    						rotation: [ 0, Math.PI / 2, 0 ]
    					},
    					{
    						url: 'textures/cube/test/nx.jpg',
    						position: [ 512, 0, 0 ],
    						rotation: [ 0, -Math.PI / 2, 0 ]
    					},
    					{
    						url: 'textures/cube/test/py.jpg',
    						position: [ 0,  512, 0 ],
    						rotation: [ Math.PI / 2, 0, Math.PI ]
    					},
    					{
    						url: 'textures/cube/test/ny.jpg',
    						position: [ 0, -512, 0 ],
    						rotation: [ - Math.PI / 2, 0, Math.PI ]
    					},
    					{
    						url: 'textures/cube/test/pz.jpg',
    						position: [ 0, 0,  512 ],
    						rotation: [ 0, Math.PI, 0 ]
    					},
    					{
    						url: 'textures/cube/test/nz.jpg',
    						position: [ 0, 0, -512 ],
    						rotation: [ 0, 0, 0 ]
    					}
    				];
    */				
    				//这里THREE.Object3D()等价于THREE.Group()都是在外层包上一个div
    				//var cube = new THREE.Object3D();
    				//scene.add( cube );
    				//three.js中的分组，同一个分组中的对象可以一起执行某项操作，不用再进行遍历判断
    				var group = new THREE.Group();
    				scene.add( group );
    
    				for ( var i = 0; i < sides.length; i ++ ) {
    					var side = sides[ i ];
    
    					var element = document.createElement( 'img' );
    					element.width = 1026; // 2 pixels extra to close the gap. 使用额外的两个像素来填补间隙，否则会有一条黑边
    					element.src = side.url;
    
    					var object = new THREE.CSS3DObject( element );
    					//fromArray(buffer, offset)，从数组的offset位置开始转化为vectorN
    					object.position.fromArray( side.position );
    					object.rotation.fromArray( side.rotation );
    					//cube.add( object );
    					group.add( object );
    				}
    
    				renderer = new THREE.CSS3DRenderer();
    				//设置渲染场景的大小
    				renderer.setSize( window.innerWidth, window.innerHeight );
    				//将渲染器的DOM元素(即Canvas)添加到HTML中
    				document.body.appendChild( renderer.domElement );
    
    				window.addEventListener( 'resize', onWindowResize, false );
    			}
    
    			function onWindowResize() {
    				//重新设置相机的宽高比。如果宽高比不对，那么正方形可能就不是正方形了
    				camera.aspect = window.innerWidth / window.innerHeight;
    				//更新透视相机的投影矩阵
    				camera.updateProjectionMatrix();
    				//重新设置渲染场景的大小
    				renderer.setSize( window.innerWidth, window.innerHeight );
    			}
    
    			function animate() {
    				requestAnimationFrame( animate );
    				//更新设备朝向控制器，这里设备朝向控制器与相机关联，所以也会更新相机的位置和角度。因此这里就不用设置相机的lookAt了。如果设备朝向改变的话，相机会绕着原点旋转
    				controls.update();
    				renderer.render( scene, camera );
    			}
    		</script>
    	</body>
    </html>

[https_github.com_555chy_three.js-example-comment]: https://github.com/555chy/three.js-example-comment
[https_threejs.org_examples]: https://threejs.org/examples/