基本信息
源码名称：【stl文件在线预览】示例源码
源码大小：5.10M
文件格式：.zip
开发语言：js
更新时间：2019-03-02
   友情提示：（无需注册或充值，赞助后即可获取资源下载链接）

     嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300

本次赞助数额为： 2 元　
   源码介绍 

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>WebViewer - STL</title>
		<meta charset="utf-8">
	</head>
	<body>
		<script src="threejs/three.min.js"></script>
		<script src="threejs/loaders/STLLoader.js"></script>
		<script src="threejs/OrbitControls.js"></script>

		<script>
			var container;

			var camera, cameraTarget, scene, renderer;
			
			var cameraType = 1;
			var perspectiveAngle = 45;
			var cameraPosX = 200;
			var cameraPosY = 200;
			var cameraPosZ = 200;
			var cameraTargetX = 0;
			var cameraTargetY = 0;
			var cameraTargetZ = 0;
			var upVectorX = 0;
			var upVectorY = 1;
			var upVectorZ = 0;
			var cameralScale = 5;
			
			init();
			animate();
			
			function getQueryStringByName(name){
				 var result = location.search.match(new RegExp("[\?\&]"   name  "=([^\&] )","i"));
				
				 if(result == null || result.length < 1){
					 return "";
				 }

				 return result[1];
			}

			function init() {

				container = document.createElement( 'div' );
				document.body.appendChild( container );
				
				// set camera
				var cameraTypeStr = getQueryStringByName('cameraType');
				cameraType = cameraTypeStr == "" ? cameraType : parseInt(cameraTypeStr);
				
				var perspectiveAngleStr = getQueryStringByName('perspectiveAngle');
				perspectiveAngle = perspectiveAngleStr == "" ? perspectiveAngle : parseFloat(perspectiveAngleStr);
				
				var cameraPosXStr = getQueryStringByName('cameraPosX');
				cameraPosX = cameraPosXStr == "" ? cameraPosX : parseFloat(cameraPosXStr) * cameralScale;
				
				var cameraPosYStr = getQueryStringByName('cameraPosY');
				cameraPosY = cameraPosYStr == "" ? cameraPosY : parseFloat(cameraPosYStr) * cameralScale;
				
				var cameraPosZStr = getQueryStringByName('cameraPosZ');
				cameraPosZ = cameraPosZStr == "" ? cameraPosZ : parseFloat(cameraPosZStr) * cameralScale;
				
				var cameraTargetXStr = getQueryStringByName('cameraTargetX');
				cameraTargetX = cameraTargetXStr == "" ? cameraTargetX : parseFloat(cameraTargetXStr) * cameralScale;
				
				var cameraTargetYStr = getQueryStringByName('cameraTargetY');
				cameraTargetY = cameraTargetYStr == "" ? cameraTargetY : parseFloat(cameraTargetYStr) * cameralScale;
				
				var cameraTargetZStr = getQueryStringByName('cameraTargetZ');
				cameraTargetZ = cameraTargetZStr == "" ? cameraTargetZ : parseFloat(cameraTargetZStr) * cameralScale;
				
				var upVectorXStr = getQueryStringByName('upVectorX');
				upVectorX = upVectorXStr == "" ? upVectorX : parseFloat(upVectorXStr) * cameralScale;
				
				var upVectorYStr = getQueryStringByName('upVectorY');
				upVectorY = upVectorYStr == "" ? upVectorY : parseFloat(upVectorYStr) * cameralScale;
				
				var upVectorZStr = getQueryStringByName('upVectorZ');
				upVectorZ = upVectorZStr == "" ? upVectorZ : parseFloat(upVectorZStr) * cameralScale;
				
				if(cameraType == 0) {
					camera = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, 1, 10000 );
				}
				else {
					camera = new THREE.PerspectiveCamera( perspectiveAngle, window.innerWidth / window.innerHeight, 1, 10000 );
				}
			
				camera.position.set( cameraPosX, cameraPosY, cameraPosZ);
				camera.up.set(upVectorX, upVectorY, upVectorZ);

				cameraTarget = new THREE.Vector3( cameraTargetX, cameraTargetY, cameraTargetZ );
				camera.lookAt( cameraTarget );

				scene = new THREE.Scene();
				scene.fog = new THREE.Fog( 0xffffff, 1, 10000 );

				// load file

				var loader = new THREE.STLLoader();
				
				var modelName = getQueryStringByName('modelName');
				loader.load( '../Models/'   modelName, function ( geometry ) {

					var material = new THREE.MeshPhongMaterial( { color: 0x808080, specular: 0x111111, shininess: 200 } );
					var mesh = new THREE.Mesh( geometry, material );

					mesh.castShadow = true;
					mesh.receiveShadow = true;

					scene.add( mesh );

				} );

				// lights

				scene.add( new THREE.AmbientLight( 0x333333 ) );
				
				addDirectionalLight(-1, 1, 1, 0xFFFFFF, 1.35);
				addDirectionalLight(1, -1, -1, 0xFFFFFF, 1);

				// renderer

				renderer = new THREE.WebGLRenderer( { antialias: true } );
				renderer.setClearColor( scene.fog.color );
				renderer.setSize( window.innerWidth, window.innerHeight );

				renderer.gammaInput = true;
				renderer.gammaOutput = true;

				renderer.shadowMapEnabled = true;
				renderer.shadowMapCullFace = THREE.CullFaceBack;

				container.appendChild( renderer.domElement );
				
				// orbit control

				control = new THREE.OrbitControls( camera, renderer.domElement );

				// events

				window.addEventListener( 'resize', onWindowResize, false );
			}
			
			function addDirectionalLight( x, y, z, color, intensity ) {

				var directionalLight = new THREE.DirectionalLight( color, intensity );
				directionalLight.position.set( x, y, z )
				scene.add( directionalLight );
			}
			
			function onWindowResize() {

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

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

			}

			function animate() {

				requestAnimationFrame( animate );

				render();
			}

			function render() {

//				var timer = Date.now() * 0.0005;
//
//				camera.position.x = Math.cos( timer ) * 3;
//				camera.position.z = Math.sin( timer ) * 3;

				renderer.render( scene, camera );
			}

		</script>
	</body>
</html>