Added css3d panorama example.

cd1c697b · Mr.doob · a03fbf7b · cd1c697b
隐藏空白更改
内联并排

Showing with 182 addition and 0 deletion

examples/css3d_panorama.html examples/css3d_panorama.html +182 -0

未找到文件。
--- a/examples/css3d_panorama.html
+++ b/examples/css3d_panorama.html
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>three.js css3d - panorama</title>
+		<style>
+			body {
+				background-color: #ffffff;
+				margin: 0;
+				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.min.js"></script>
+		<script src="js/renderers/CSS3DRenderer.js"></script>
+
+		<div id="info"><a href="http://threejs.org" target="_blank">three.js css3d</a> - panorama demo. 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;
+			var target = new THREE.Vector3();
+
+			var lon = 90, lat = 0;
+			var phi = 0, theta = 0;
+
+			init();
+
+			function init() {
+
+				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 );
+
+				scene = new THREE.Scene();
+
+				var sides = [
+					{
+						url: 'textures/cube/Bridge2/posx.jpg',
+						position: new THREE.Vector3( -512, 0, 0 ),
+						rotation: new THREE.Vector3( 0, Math.PI / 2, 0 )
+					},
+					{
+						url: 'textures/cube/Bridge2/negx.jpg',
+						position: new THREE.Vector3( 512, 0, 0 ),
+						rotation: new THREE.Vector3( 0, -Math.PI / 2, 0 )
+					},
+					{
+						url: 'textures/cube/Bridge2/posy.jpg',
+						position: new THREE.Vector3( 0,  512, 0 ),
+						rotation: new THREE.Vector3( Math.PI / 2, 0, Math.PI )
+					},
+					{
+						url: 'textures/cube/Bridge2/negy.jpg',
+						position: new THREE.Vector3( 0, -512, 0 ),
+						rotation: new THREE.Vector3( - Math.PI / 2, 0, Math.PI )
+					},
+					{
+						url: 'textures/cube/Bridge2/posz.jpg',
+						position: new THREE.Vector3( 0, 0,  512 ),
+						rotation: new THREE.Vector3( 0, Math.PI, 0 )
+					},
+					{
+						url: 'textures/cube/Bridge2/negz.jpg',
+						position: new THREE.Vector3( 0, 0, -512 ),
+						rotation: new THREE.Vector3( 0, 0, 0 )
+					}
+				];
+
+				for ( var i = 0; i < sides.length; i ++ ) {
+
+					var side = sides[ i ];
+
+					var element = document.createElement( 'img' );
+					element.addEventListener( 'load', render, false );
+					element.src = side.url;
+
+					var object = new THREE.CSS3DObject( element );
+					object.position = side.position;
+					object.rotation = side.rotation;
+					scene.add( object );
+
+				}
+
+				renderer = new THREE.CSS3DRenderer();
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.domElement.style.position = 'absolute';
+				renderer.domElement.style.top = 0;
+				document.body.appendChild( renderer.domElement );
+
+				//
+
+				document.addEventListener( 'mousedown', onDocumentMouseDown, false );
+				document.addEventListener( 'mousewheel', onDocumentMouseWheel, false );
+
+				window.addEventListener( 'resize', onWindowResize, false );
+
+			}
+
+			function onWindowResize() {
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
+				render();
+
+			}
+
+			function onDocumentMouseDown( event ) {
+
+				event.preventDefault();
+
+				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
+				document.addEventListener( 'mouseup', onDocumentMouseUp, false );
+
+			}
+
+			function onDocumentMouseMove( event ) {
+
+				var movementX = event.movementX || event.mozMovementX || event.webkitMovementX || 0;
+				var movementY = event.movementY || event.mozMovementY || event.webkitMovementY || 0;
+
+				lon -= movementX * 0.1;
+				lat += movementY * 0.1;
+
+				render();
+
+			}
+
+			function onDocumentMouseUp( event ) {
+
+				document.removeEventListener( 'mousemove', onDocumentMouseMove );
+				document.removeEventListener( 'mouseup', onDocumentMouseUp );
+
+			}
+
+			function onDocumentMouseWheel( event ) {
+
+				camera.fov -= event.wheelDeltaY * 0.05;
+				camera.updateProjectionMatrix();
+
+				render();
+
+			}
+
+			function render() {
+
+				lat = Math.max( - 85, Math.min( 85, lat ) );
+				phi = ( 90 - lat ) * Math.PI / 180;
+				theta = lon * Math.PI / 180;
+
+				target.x = Math.sin( phi ) * Math.cos( theta );
+				target.y = Math.cos( phi );
+				target.z = Math.sin( phi ) * Math.sin( theta );
+
+				camera.lookAt( target );
+
+				renderer.render( scene, camera );
+
+			}
+
+		</script>
+	</body>
+</html>