wwobjloader2
Version:
New OBJLoader utilizing web worker for three.js
170 lines (147 loc) • 6.43 kB
HTML
<html lang="en">
<head>
<title>three.js webgl - OBJLoader2 Stage</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link href="../common/Common.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div id="glFullscreen">
<canvas id="example"></canvas>
</div>
<div id="dat">
</div>
<div id="info">
<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - OBJLoader2 Stage
<div id="feedback"></div>
</div>
<input id="fileUploadInput" type="file" name="files[]" multiple accept=".obj,.mtl" />
<script src="../../node_modules/three/examples/js/Detector.js"></script>
<script src="../../node_modules/three/build/three.js"></script>
<script src="../../node_modules/three/examples/js/controls/TrackballControls.js"></script>
<script src="../../node_modules/three/examples/js/loaders/MTLLoader.js"></script>
<script src="../../node_modules/three/examples/js/libs/dat.gui.min.js"></script>
<script src="../../node_modules/jszip/dist/jszip.min.js"></script>
<script src="../../src/loaders/support/LoaderCommons.js"></script>
<script src="../../src/loaders/support/LoaderBuilder.js"></script>
<script src="../../src/loaders/support/LoaderBase.js"></script>
<script src="../../src/loaders/support/LoaderWorkerSupport.js"></script>
<script src="../../src/loaders/OBJLoader2.js"></script>
<script src="./WWOBJLoader2Stage.js"></script>
<script>
var app = new WWOBJLoader2Stage( document.getElementById( 'example' ) );
// Init dat.gui and controls
var elemFileInput = document.getElementById( 'fileUploadInput' );
var menuDiv = document.getElementById( 'dat' );
var gui = new dat.GUI( {
autoPlace: false,
width: 320
} );
menuDiv.appendChild( gui.domElement );
var folderOptions = gui.addFolder( 'WWOBJLoader2Stage Options' );
var handleMale, handleFemale, handleWalt, handleCerberus, handleViveController, handlePTV1, handleSink, handleOven;
var wwOBJLoader2StageControl = {
pathTexture: '../../resource/obj/female02/',
blockEvent: function ( event ) {
event.stopPropagation();
},
enableElement: function ( elementHandle ) {
elementHandle.domElement.removeEventListener( 'click', this.blockEvent, true );
elementHandle.domElement.parentElement.style.pointerEvents = 'auto';
elementHandle.domElement.parentElement.style.opacity = 1.0;
},
disableElement: function ( elementHandle ) {
elementHandle.domElement.addEventListener( 'click', this.blockEvent, true );
elementHandle.domElement.parentElement.style.pointerEvents = 'none';
elementHandle.domElement.parentElement.style.opacity = 0.5;
},
loadMale: function() {
app.updateAssets( app.assetsDef.objsMale );
this.disableElement( handleMale );
},
loadFemale: function() {
app.updateAssets( app.assetsDef.objsFemale );
this.disableElement( handleFemale );
},
loadWaltHead: function() {
app.updateAssets( app.assetsDef.objsWaltHead );
this.disableElement( handleWalt );
},
loadCerberus: function() {
app.updateAssets( app.assetsDef.objsCerberus );
this.disableElement( handleCerberus );
},
loadViveController: function () {
app.updateAssets( app.assetsDef.objsViveController );
this.disableElement( handleViveController );
},
loadPTV1: function () {
app.updateAssets( app.assetsDef.objsPtv1Zip );
this.disableElement( handlePTV1 );
},
loadOven: function () {
app.updateAssets( app.assetsDef.objsZomaxOven);
this.disableElement( handleOven );
},
loadSink: function () {
app.updateAssets( app.assetsDef.objsZomaxSink );
this.disableElement( handleSink );
},
loadUserFiles: function () {
elemFileInput.click();
},
clearAllAssests: function () {
app.clearAllAssests();
app.initContent();
this.enableElement( handleMale );
this.enableElement( handleFemale );
this.enableElement( handleWalt );
this.enableElement( handleCerberus );
this.enableElement( handleViveController );
this.enableElement( handlePTV1 );
this.enableElement( handleOven );
this.enableElement( handleSink );
}
};
handleMale = folderOptions.add( wwOBJLoader2StageControl, 'loadMale' ).name( 'Load Male' );
handleFemale = folderOptions.add( wwOBJLoader2StageControl, 'loadFemale' ).name( 'Load Female' );
handleWalt = folderOptions.add( wwOBJLoader2StageControl, 'loadWaltHead' ).name( 'Load Walt Head' );
handleCerberus = folderOptions.add( wwOBJLoader2StageControl, 'loadCerberus' ).name( 'Load Cerberus' );
handleViveController = folderOptions.add( wwOBJLoader2StageControl, 'loadViveController' ).name( 'Vive Controller' );
handlePTV1 = folderOptions.add( wwOBJLoader2StageControl, 'loadPTV1' ).name( 'PTV1 26MB->150MB' );
handleOven = folderOptions.add( wwOBJLoader2StageControl, 'loadOven' ).name( 'Oven 43MB->150MB' );
handleSink = folderOptions.add( wwOBJLoader2StageControl, 'loadSink' ).name( 'Sink 45MB->178MB' );
folderOptions.add( wwOBJLoader2StageControl, 'clearAllAssests' ).name( 'Clear Scene' );
folderOptions.open();
var folderUserFiles = gui.addFolder( 'User Files' );
if ( app.fileApiAvailable ) {
folderUserFiles.add( wwOBJLoader2StageControl, 'loadUserFiles' ).name( 'Load OBJ/MTL Files' );
var handleFileSelect = function ( event ) {
app._handleFileSelect( event, wwOBJLoader2StageControl.pathTexture );
};
elemFileInput.addEventListener( 'change' , handleFileSelect, false );
var controlPathTexture = folderUserFiles.add( wwOBJLoader2StageControl, 'pathTexture' ).name( 'Relative path to textures' );
controlPathTexture.onChange( function( value ) {
console.log( 'Setting pathTexture to: ' + value );
app.pathTexture = value + '/';
});
}
var resizeWindow = function () {
app.resizeDisplayGL();
};
var render = function () {
requestAnimationFrame( render );
app.render();
};
window.addEventListener( 'resize', resizeWindow, false );
console.log( 'Starting initialisation phase...' );
app.initGL();
app.resizeDisplayGL();
app.initContent();
wwOBJLoader2StageControl.loadMale();
wwOBJLoader2StageControl.loadFemale();
render();
</script>
</body>
</html>