三维视图查看

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html lang="en">
<head>
<link rel="icon" href="/resource/images/logo/titlelogo.png" type="image/x-icon"/>
<title>三维视图-${name}</title>
<base href="<%=basePath%>" />
<!-- <link href="resource/css/web/progress/normalize.css" rel="stylesheet" type="text/css" />
<link href="resource/css/web/progress/style.css" rel="stylesheet" type="text/css" />
<link href="resource/css/web/progress/progess.css" rel="stylesheet" type="text/css" /> -->
<link href="resource/js/numprogress/normalize.css" rel="stylesheet" type="text/css" />
<link href="resource/js/numprogress/number-pb.css" rel="stylesheet" type="text/css" />
<link href="resource/js/numprogress/style.css" rel="stylesheet" type="text/css" />
<style>

body {
	font-family: Monospace;
	background-color: #000;
	color: #fff;
	margin: 0px;
	overflow: hidden;
}

#info {
	color: #fff;
	position: absolute;
	top: 10px;
	width: 100%;
	text-align: center;
	z-index: 100;
	display: block;
}

#info a,.button {
	color: #f00;
	font-weight: bold;
	text-decoration: underline;
	cursor: pointer
}
</style>
</head>

<body>
	<div id="wrapper" style="margin-top:500px;">
		<!-- <div class="loader-container">
			<div class="meter">0</div>
			<span class="runner"></span>
		</div> -->
		<section id="sample-pb">
		
		        <div class="number-pb">
		
		        <div class="number-pb-shown dream"></div>
		
		        <div class="number-pb-num">0%</div>
		        
				</div>
    	</section>
	</div>
	<input type="hidden" name="jpgPath" value="${jpgPath}" />
	<input type="hidden" name="objPath" value="${objPath}" />
	<script type="text/javascript"  src="resource/js/jquery/jquery-1.10.2.min.js"></script>
	<script type="text/javascript" src="/resource/js/web/three.min.js"></script>
	<script type="text/javascript" src="/resource/js/web/OBJLoader.js"></script>
	<script type="text/javascript" src="/resource/js/numprogress/jquery.velocity.min.js"></script>
	<script type="text/javascript" src="/resource/js/numprogress/number-pb.js"></script>
	<!-- <script type="text/javascript" src="/resource/js/web/prefixfree.min.js"></script>
	<script type="text/javascript" src="/resource/js/web/modernizr.js"></script>
	<script type="text/javascript" src="/resource/js/web/progress.js"></script> -->

<script type="text/javascript">
			var container;
			var camera, scene, renderer;
			var mouseX = 0, mouseY = 0;

			var windowHalfX = window.innerWidth / 2;
			var windowHalfY = window.innerHeight / 2;
		 
			var controlBar = $('#sample-pb .number-pb').NumberProgressBar({
			      duration: 12000,
			      percentage: 0

			});
			init(); 
					
			animate();
	
			
			function init() {
				var jpgPath= $("[name=jpgPath]").val();
				var objPath= $("[name=objPath]").val();
				
				container = document.createElement( "div" );
				document.body.appendChild( container );

				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
				camera.position.z = 250;

				// scene

				scene = new THREE.Scene();

				var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
				scene.add( ambientLight );

				var pointLight = new THREE.PointLight( 0xffffff, 0.8 );
				camera.add( pointLight );
				scene.add( camera );

				// texture

				var manager = new THREE.LoadingManager();
				manager.onProgress = function ( item, loaded, total ) {

					console.log( item, loaded, total );

				};

				var textureLoader = new THREE.TextureLoader( manager );
				var texture = textureLoader.load("${webRoot}/"+jpgPath);

				// model

				var onProgress = function ( xhr ) {
					if ( xhr.lengthComputable ) {
						var percentComplete = xhr.loaded / xhr.total * 100;	
						var per=percentComplete>5?percentComplete-5:0;
						controlBar.reach(per);
						console.log( Math.round(percentComplete, 2) + '% downloaded' );
						if(percentComplete==100){
							$("#wrapper").hide();
						}
					}
				};

				var onError = function ( xhr ) {
				};

				var loader = new THREE.OBJLoader( manager );
				loader.load("${webRoot}/"+objPath, function (object) {

					object.traverse( function ( child ) {

						if ( child instanceof THREE.Mesh ) {

							child.material.map = texture;

						}

					} );

					object.position.y = - 95;
					scene.add( object );

				}, onProgress, onError );

				//

				renderer = new THREE.WebGLRenderer();
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( window.innerWidth, window.innerHeight );
				container.appendChild( renderer.domElement );

				document.addEventListener( 'mousemove', onDocumentMouseMove, false );

				//

				window.addEventListener( 'resize', onWindowResize, false );

			}
			
		function onWindowResize() {

			windowHalfX = window.innerWidth / 2;
			windowHalfY = window.innerHeight / 2;

			camera.aspect = window.innerWidth / window.innerHeight;
			camera.updateProjectionMatrix();

			renderer.setSize(window.innerWidth, window.innerHeight);

		}

		function onDocumentMouseMove(event) {

			mouseX = (event.clientX - windowHalfX) / 2;
			mouseY = (event.clientY - windowHalfY) / 2;

		}

		function animate() {

			requestAnimationFrame(animate);
			render();

		}

		function render() {

			camera.position.x += (mouseX - camera.position.x) * .05;
			camera.position.y += (-mouseY - camera.position.y) * .05;

			camera.lookAt(scene.position);
			renderer.render(scene, camera);
		}

		function selectPath() {
			var relicNo = $(".relicno").val();
		}
	</script>

</body></html>

猜你喜欢