midas
/
threejs-obj-space


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242
							<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js webgl - OBJLoader2/OBJLoader verification</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: 0 0 0 0;
				padding: 0 0 0 0;
				border: none;
				cursor: default;
			}
			#info {
				color: #fff;
				position: absolute;
				top: 10px;
				width: 100%;
				text-align: center;
				z-index: 100;
				display:block;
			}
			#info a {
				color: #f00;
				font-weight: bold;
				text-decoration: underline;
				cursor: pointer
			}
			#glFullscreen {
				width: 100%;
				height: 100vh;
				min-width: 640px;
				min-height: 360px;
				position: relative;
				overflow: hidden;
				z-index: 0;
			}
			#example {
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				background-color: #000000;
			}
			#feedback {
				color: darkorange;
			}
			#dat {
				user-select: none;
				position: absolute;
				left: 0;
				top: 0;
				z-Index: 200;
			}
		</style>
	</head>

	<body>
		<div id="glFullscreen">
			<canvas id="example"></canvas>
		</div>
		<div id="dat">

		</div>
		<div id="info">
			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - OBJLoader2/OBJLoader verification
			<div id="feedback"></div>
		</div>

		<script type="module">

			'use strict';

			import {
				AmbientLight,
				DirectionalLight,
				GridHelper,
				PerspectiveCamera,
				Scene,
				Vector3,
				WebGLRenderer
			} from "../../../../build/three.module.js";

			import { TrackballControls } from "../../../jsm/controls/TrackballControls.js";

			import { MTLLoader } from "../../../jsm/loaders/MTLLoader.js";
			import { MtlObjBridge } from "../../../jsm/loaders/obj2/bridge/MtlObjBridge.js";
			import { OBJLoader } from "../../../jsm/loaders/OBJLoader.js";
			import { OBJLoader2 } from "../../../jsm/loaders/OBJLoader2.js";

			const OBJLoaderVerify = function ( elementToBindTo ) {
				this.renderer = null;
				this.canvas = elementToBindTo;
				this.aspectRatio = 1;
				this.recalcAspectRatio();

				this.scene = null;
				this.cameraDefaults = {
					posCamera: new Vector3( 0.0, 175.0, 500.0 ),
					posCameraTarget: new Vector3( 0, 0, 0 ),
					near: 0.1,
					far: 10000,
					fov: 45
				};
				this.camera = null;
				this.cameraTarget = this.cameraDefaults.posCameraTarget;

				this.controls = null;
			};

				OBJLoaderVerify.prototype = {

					constructor: OBJLoaderVerify,

					initGL: function () {
					this.renderer = new WebGLRenderer( {
						canvas: this.canvas,
						antialias: true,
						autoClear: true
					} );
					this.renderer.setClearColor( 0x050505 );

					this.scene = new Scene();

					this.camera = new PerspectiveCamera( this.cameraDefaults.fov, this.aspectRatio, this.cameraDefaults.near, this.cameraDefaults.far );
					this.resetCamera();
					this.controls = new TrackballControls( this.camera, this.renderer.domElement );

					let ambientLight = new AmbientLight( 0x404040 );
					let directionalLight1 = new DirectionalLight( 0xC0C090 );
					let directionalLight2 = new DirectionalLight( 0xC0C090 );

					directionalLight1.position.set( -100, -50, 100 );
					directionalLight2.position.set( 100, 50, -100 );

					this.scene.add( directionalLight1 );
					this.scene.add( directionalLight2 );
					this.scene.add( ambientLight );

					let helper = new GridHelper( 1200, 60, 0xFF4444, 0x404040 );
					this.scene.add( helper );
				},

				initContent: function () {
					let modelName = 'verificationCubes';
					this._reportProgress( { detail: { text: 'Loading: ' + modelName } } );

					let objLoader = new OBJLoader();

					let objLoader2 = new OBJLoader2();
					objLoader2.setModelName( modelName );
					objLoader2.setLogging( true, false );
					objLoader2.setUseOAsMesh( true );

					let scope = this;
					let callbackOnLoad = function ( object3d ) {
						scope.scene.add( object3d );
						console.log( 'Loading complete: ' + modelName );
						scope._reportProgress( { detail: { text: '' } } );
					};

					let onLoadMtl = function ( mtlParseResult ) {
						objLoader.setMaterials( mtlParseResult );
						objLoader.load( './verify.obj', function ( object ) {
							object.position.y = -100;
							scope.scene.add( object );
						} );

						objLoader2.addMaterials( MtlObjBridge.addMaterialsFromMtlLoader( mtlParseResult ) );
						objLoader2.load( './verify.obj', callbackOnLoad, null, null, null );
					};

					let mtlLoader = new MTLLoader();
					mtlLoader.load( './verify.mtl', onLoadMtl );
				},

				_reportProgress: function( event ) {
					let output = ( event.detail !== undefined && event.detail !== null && event.detail.text !== undefined && event.detail.text !== null ) ? event.detail.text : '';
					console.log( 'Progress: ' + output );
					document.getElementById( 'feedback' ).innerHTML = output;
				},

				resizeDisplayGL: function () {
					this.controls.handleResize();

					this.recalcAspectRatio();
					this.renderer.setSize( this.canvas.offsetWidth, this.canvas.offsetHeight, false );

					this.updateCamera();
				},

				recalcAspectRatio: function () {
					this.aspectRatio = ( this.canvas.offsetHeight === 0 ) ? 1 : this.canvas.offsetWidth / this.canvas.offsetHeight;
				},

				resetCamera: function () {
					this.camera.position.copy( this.cameraDefaults.posCamera );
					this.cameraTarget.copy( this.cameraDefaults.posCameraTarget );

					this.updateCamera();
				},

				updateCamera: function () {
					this.camera.aspect = this.aspectRatio;
					this.camera.lookAt( this.cameraTarget );
					this.camera.updateProjectionMatrix();
				},

				render: function () {
					if ( ! this.renderer.autoClear ) this.renderer.clear();
					this.controls.update();
					this.renderer.render( this.scene, this.camera );
				}
			};

			let app = new OBJLoaderVerify( document.getElementById( 'example' ) );

			let resizeWindow = function () {
				app.resizeDisplayGL();
			};

			let render = function () {
				requestAnimationFrame( render );
				app.render();
			};

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

			console.log( 'Starting initialisation phase...' );
			app.initGL();
			app.resizeDisplayGL();
			app.initContent();

			render();

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