123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266 |
- var scene, renderer, camera, container, animation;
- var hasMorph = false;
- var prevTime = Date.now();
- var clock = new THREE.Clock();
- function render() {
- renderer.render( scene, camera );
- if ( hasMorph ) {
- var time = Date.now();
- animation.update( time - prevTime );
- prevTime = time;
- }
- }
- function animate() {
- requestAnimationFrame( animate );
- if ( animation !== null ) {
- var delta = clock.getDelta();
- THREE.AnimationHandler.update( delta );
- }
- render();
- }
- function onWindowResize() {
- camera.aspect = container.offsetWidth / container.offsetHeight;
- camera.updateProjectionMatrix();
- renderer.setSize( container.offsetWidth, container.offsetHeight );
- render();
- }
- function setupScene( result, data ) {
- scene = new THREE.Scene();
- scene.add( new THREE.GridHelper( 10, 2.5 ) );
- }
- function setupLights() {
- var directionalLight = new THREE.DirectionalLight( 0xb8b8b8 );
- directionalLight.position.set(1, 1, 1).normalize();
- directionalLight.intensity = 1.0;
- scene.add( directionalLight );
- directionalLight = new THREE.DirectionalLight( 0xb8b8b8 );
- directionalLight.position.set(-1, 0.6, 0.5).normalize();
- directionalLight.intensity = 0.5;
- scene.add(directionalLight);
- directionalLight = new THREE.DirectionalLight();
- directionalLight.position.set(-0.3, 0.6, -0.8).normalize( 0xb8b8b8 );
- directionalLight.intensity = 0.45;
- scene.add(directionalLight);
- }
- function loadObject( data ) {
- var loader = new THREE.ObjectLoader();
- scene = loader.parse( data );
- var hasLights = false;
- var lights = ['AmbientLight', 'DirectionalLight',
- 'PointLight', 'SpotLight', 'HemisphereLight']
- var cameras = ['OrthographicCamera', 'PerspectiveCamera'];
- for ( i = 0; i < scene.children.length; i ++ ) {
- var lightIndex = lights.indexOf( scene.children[ i ].type );
- if ( lightIndex > -1 ) {
- hasLights = true;
- continue;
- }
- var cameraIndex = cameras.indexOf( scene.children[ i ].type );
- if ( cameraIndex > -1 ) {
- camera = scene.children[ i ];
- var container = document.getElementById( 'viewport' );
- orbit = new THREE.OrbitControls( camera, container );
- orbit.addEventListener( 'change', render );
- var aspect = container.offsetWidth / container.offsetHeight;
- camera.aspect = aspect;
- camera.updateProjectionMatrix();
- }
- }
- if ( ! ( hasLights ) ) setupLights();
- scene.add( new THREE.GridHelper( 10, 2.5 ) );
- render();
- }
- function loadGeometry( data, url ) {
- var loader = new THREE.JSONLoader();
- var texturePath = THREE.Loader.prototype.extractUrlBase( url );
- data = loader.parse( data, texturePath );
- if ( data.materials === undefined ) {
- console.log('using default material');
- data.materials = [new THREE.MeshLambertMaterial( { color: 0xb8b8b8 } )];
- }
- var material = new THREE.MultiMaterial( data.materials );
- var mesh;
- if ( data.geometry.animations !== undefined && data.geometry.animations.length > 0 ) {
- console.log( 'loading animation' );
- data.materials[ 0 ].skinning = true;
- mesh = new THREE.SkinnedMesh( data.geometry, material, false );
- var name = data.geometry.animations[0].name;
- animation = new THREE.Animation( mesh, data.geometry.animations[0] );
- } else {
- mesh = new THREE.Mesh( data.geometry, material );
- if ( data.geometry.morphTargets.length > 0 ) {
- console.log( 'loading morph targets' );
- data.materials[ 0 ].morphTargets = true;
- animation = new THREE.MorphAnimation( mesh );
- hasMorph = true;
- }
- }
- setupScene();
- setupLights();
- scene.add( mesh );
- if ( animation != null ) {
- console.log( 'playing animation' );
- animation.play();
- animate();
- } else {
- render();
- }
- }
- function loadBufferGeometry( data ) {
- var loader = new THREE.BufferGeometryLoader();
- var bufferGeometry = loader.parse( data );
- var material = new THREE.MeshLambertMaterial( { color: 0xb8b8b8 } );
- var mesh = new THREE.Mesh( bufferGeometry, material );
- setupScene();
- setupLights();
- scene.add( mesh );
- render();
- }
- function loadData( data, url ) {
- if ( data.metadata.type === 'Geometry' ) {
- loadGeometry( data, url );
- } else if ( data.metadata.type === 'Object' ) {
- loadObject( data );
- } else if ( data.metadata.type === 'BufferGeometry' ) {
- loadBufferGeometry( data );
- } else {
- console.warn( 'can not determine type' );
- }
- }
- function init( url ) {
- container = document.createElement( 'div' );
- container.id = 'viewport';
- document.body.appendChild( container );
- renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } );
- renderer.setSize( container.offsetWidth, container.offsetHeight );
- renderer.setClearColor( 0x000000, 0 );
- container.appendChild( renderer.domElement );
- renderer.gammaInput = true;
- renderer.gammaOutput = true;
- var aspect = container.offsetWidth / container.offsetHeight;
- camera = new THREE.PerspectiveCamera( 50, aspect, 0.01, 50 );
- orbit = new THREE.OrbitControls( camera, container );
- orbit.addEventListener( 'change', render );
- camera.position.z = 5;
- camera.position.x = 5;
- camera.position.y = 5;
- var target = new THREE.Vector3( 0, 1, 0 );
- camera.lookAt( target );
- orbit.target = target;
- camera.updateProjectionMatrix();
- window.addEventListener( 'resize', onWindowResize, false );
- var xhr = new XMLHttpRequest();
- xhr.onreadystatechange = function ( x ) {
- if ( xhr.readyState === xhr.DONE ) {
- if ( xhr.status === 200 || xhr.status === 0 ) {
- loadData( JSON.parse( xhr.responseText ), url );
- } else {
- console.error( 'could not load json ' + xhr.status );
- }
- }
- };
- xhr.open( 'GET', url, true );
- xhr.withCredentials = false;
- xhr.send( null );
- }
|