three.js加载vtk模型

<!DOCTYPE html>
<html lang="en">
	<head>
		<title></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 {
				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="info">
		</div>

		<script src="js/three.js"></script>

		<script src="js/controls/TrackballControls.js"></script>

		<script src="js/loaders/VTKLoader.js"></script>

		<script src="js/Detector.js"></script>
		<script src="js/stats.js"></script>

		<script>
			if (!Detector.webgl) Detector.addGetWebGLMessage();
			var container,stats;
			var camera,controls,scene,renderer;
			var cross;

            init();
            animate();

			function init() {
				//创建透视投影相机
				camera=new THREE.PerspectiveCamera(60,window.innerWidth,window.innerHeight,0.01, 1e10);
				camera.position.z=0.2;

				controls=new THREE.TrackballControls(camera);

				controls.rotateSpeed=5.0;
				controls.zoomSpeed=5;
				controls.panSpeed=2;

				controls.noZoom=false;
				controls.noPan=false;

				controls.staticMoving=false;
				controls.dynamicDampingFactor=0.3;

				//创建场景
				scene=new THREE.Scene();
				scene.add(camera);

				//光照--创建一个方向光
				var dirLight=new THREE.DirectionalLight(0xffffff);
				//设置光源位置
				dirLight.position.set(200,200,1000).normalize();

				camera.add(dirLight);
				camera.add(dirLight.target);

				//创建兰伯特材质
				var material=new THREE.MeshLambertMaterial({color:0xffffff,side:THREE.DoubleSide});

				//加载模型
				var loader=new THREE.VTKLoader();
				loader.addEventListener('load',function (event) {
					var geometry=event.content;
					var mesh=new THREE.Mesh(geometry,material);
					mesh.position.setY(-0.09);
					scene.add(mesh);
                });
				loader.load("models/vtk/bunny.vtk");
				//创建渲染器-不开启抗锯齿
				renderer=new THREE.WebGLRenderer({antialias:false})
				renderer.setClearColorHex(0x000000,1);
				//设置渲染窗口大小
				renderer.setSize(window.innerWidth,window.innerHeight);

				//body中创建一个div，然后将渲染的内容放置在此div中
				container=document.createElement('div');
				document.body.appendChild(container);
				container.appendChild(renderer.domElement);

				//实时查看浏览器渲染性能
				stats=new Stats();
				stats.domElement.style.position='absolute';
				stats.domElement.style.top='0px';
				container.appendChild(stats.domElement);

				//监听浏览器窗口大小改变的监听
				window.addEventListener('resize',onWindowResize,false);
            }

            //浏览器窗口大小改变，需要更新投影矩阵的宽高比，重新设置渲染窗口大小
			function onWindowResize() {
				camera.aspect=window.innerWidth/window.innerHeight;
				camera.updateProjectionMatrix();

				renderer.setSize(window.innerWidth,window.innerHeight);
				controls.handleResize();
            }

            //实时渲染
            function animate() {
				requestAnimationFrame(animate);
				controls.update();
				renderer.render(scene,camera);
				stats.update();
            }


		</script>

	</body>
</html>
three.js加载vtk模型

猜你喜欢
