【实例简介】

【实例截图】

【核心代码】

WebViewer - STL

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 );

}