Skip to content

Commit

Permalink
mrdoob#9756 WWOBJLoader2 now allows to enable/disable mesh streaming.
Browse files Browse the repository at this point in the history 
webgl_loader_obj2_ww allows to load user OBJ/MTL files.
All examples now use dat.gui.
  • Loading branch information
@kaisalmen
kaisalmen committed Feb 16, 2017
1 parent 8963b64 commit cb4e635
Show file tree
Hide file tree
Showing 5 changed files with 365 additions and 215 deletions.
4 changes: 2 additions & 2 deletions examples/js/loaders/OBJLoader2.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
'use strict';

if ( THREE.OBJLoader2 === undefined ) { THREE.OBJLoader2 = {} }
THREE.OBJLoader2.version = '1.0.4';
THREE.OBJLoader2.version = '1.0.5';

/**
* Use this class to load OBJ data from files or to parse OBJ data from arraybuffer or text
Expand Down Expand Up @@ -505,7 +505,7 @@ THREE.OBJLoader2 = (function () {

RawObject.prototype._buildIndex = function ( materialName, smoothingGroup) {
return materialName + '|' + smoothingGroup;
}
};

RawObject.prototype._newInstanceFromObject = function ( objectName, groupName ) {
var newRawObject = new RawObject( objectName, groupName, this.mtllibName );
Expand Down
46 changes: 37 additions & 9 deletions examples/js/loaders/WWOBJLoader2.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
'use strict';

if ( THREE.OBJLoader2 === undefined ) { THREE.OBJLoader2 = {} }
THREE.OBJLoader2.version = '1.0.4';
THREE.OBJLoader2.version = '1.0.5';

/**
* OBJ data will be loaded by dynamically created web worker.
Expand All @@ -32,6 +32,8 @@ THREE.OBJLoader2.WWOBJLoader2 = (function () {
this.debug = false;

this.sceneGraphBaseNode = null;
this.streamMeshes = true;
this.meshStore = null;
this.modelName = 'none';
this.validated = false;
this.running = false;
Expand Down Expand Up @@ -164,6 +166,8 @@ THREE.OBJLoader2.WWOBJLoader2 = (function () {
}

this.sceneGraphBaseNode = null;
this.streamMeshes = true;
this.meshStore = [];
this.modelName = 'none';
this.validated = true;
this.running = true;
Expand Down Expand Up @@ -204,7 +208,7 @@ THREE.OBJLoader2.WWOBJLoader2 = (function () {
if ( this.dataAvailable ) {

// fast-fail on bad type
if ( ! ( params.objAsArrayBuffer instanceof ArrayBuffer || params.objAsArrayBuffer instanceof Uint8Array ) ) {
if ( ! params.objAsArrayBuffer instanceof Uint8Array ) {
throw 'Provided input is not of type arraybuffer! Aborting...';
}

Expand Down Expand Up @@ -236,6 +240,8 @@ THREE.OBJLoader2.WWOBJLoader2 = (function () {
this.setRequestTerminate( params.requestTerminate );
this.pathTexture = params.pathTexture;
this.sceneGraphBaseNode = params.sceneGraphBaseNode;
this.streamMeshes = params.streamMeshes;
if ( ! this.streamMeshes ) this.meshStore = [];
};

/**
Expand Down Expand Up @@ -327,6 +333,8 @@ THREE.OBJLoader2.WWOBJLoader2 = (function () {
console.timeEnd( 'Loading MTL textures' );
};


this.mtlLoader.setPath( this.pathTexture );
if ( this.dataAvailable ) {

processLoadedMaterials( ( this.mtlAsString != null ) ? this.mtlLoader.parse( this.mtlAsString ) : null );
Expand All @@ -339,7 +347,6 @@ THREE.OBJLoader2.WWOBJLoader2 = (function () {

} else {

this.mtlLoader.setPath( this.pathTexture );
this.mtlLoader.load( this.fileMtl, processLoadedMaterials );

}
Expand Down Expand Up @@ -431,14 +438,31 @@ THREE.OBJLoader2.WWOBJLoader2 = (function () {
}
var mesh = new THREE.Mesh( bufferGeometry, material );
mesh.name = payload.meshName;
this.sceneGraphBaseNode.add( mesh );
if ( this.streamMeshes ) {

this.sceneGraphBaseNode.add( mesh );

} else {

this.meshStore.push( mesh );

}
var output = '(' + this.counter + '): ' + payload.meshName;
this._announceProgress( 'Adding mesh', output );
break;

case 'complete':

if ( ! this.streamMeshes ) {

for ( var key in this.meshStore ) {

this.sceneGraphBaseNode.add( this.meshStore[ key ] );

}

}

console.timeEnd( 'WWOBJLoader2' );
if ( payload.msg != null ) {

Expand Down Expand Up @@ -663,7 +687,7 @@ THREE.OBJLoader2.WWOBJLoader2 = (function () {
var materialDescription;
var materialDescriptions = [];

var createMultiMaterial = ( rawObjectDescriptions.length > 1 ) ? true : false;
var createMultiMaterial = ( rawObjectDescriptions.length > 1 );
var materialIndex = 0;
var materialIndexMapping = [];
var selectedMaterialIndex;
Expand Down Expand Up @@ -882,12 +906,13 @@ THREE.OBJLoader2.WWOBJLoader2 = (function () {
* @param {string} pathTexture Path to texture files
* @param {string} mtlAsString MTL file content as string
* @param {THREE.Object3D} sceneGraphBaseNode {@link THREE.Object3D} where meshes will be attached
* @param {boolean} streamMeshes=true Singles meshes are directly integrated into scene when loaded or later
* @param {boolean} [requestTerminate=false] Request termination of web worker and free local resources after execution
*
* @returns {{modelName: string, dataAvailable: boolean, objAsArrayBuffer: null, pathTexture: null, mtlAsString: null, sceneGraphBaseNode: null, requestTerminate: boolean}}
* @returns {{modelName: string, dataAvailable: boolean, objAsArrayBuffer: null, pathTexture: null, mtlAsString: null, sceneGraphBaseNode: null, streamMeshes: boolean, requestTerminate: boolean}}
* @constructor
*/
THREE.OBJLoader2.WWOBJLoader2.PrepDataArrayBuffer = function ( modelName, objAsArrayBuffer, pathTexture, mtlAsString, sceneGraphBaseNode, requestTerminate ) {
THREE.OBJLoader2.WWOBJLoader2.PrepDataArrayBuffer = function ( modelName, objAsArrayBuffer, pathTexture, mtlAsString, sceneGraphBaseNode, streamMeshes, requestTerminate ) {

var data = {
modelName: ( modelName == null ) ? 'none' : modelName,
Expand All @@ -896,6 +921,7 @@ THREE.OBJLoader2.WWOBJLoader2.PrepDataArrayBuffer = function ( modelName, objAsA
pathTexture: ( pathTexture == null ) ? null : pathTexture,
mtlAsString: ( mtlAsString == null ) ? null : mtlAsString,
sceneGraphBaseNode: ( sceneGraphBaseNode == null ) ? null : sceneGraphBaseNode,
streamMeshes: ( streamMeshes == null ) ? true : streamMeshes,
requestTerminate: ( requestTerminate == null ) ? false : requestTerminate
};

Expand All @@ -911,12 +937,13 @@ THREE.OBJLoader2.WWOBJLoader2.PrepDataArrayBuffer = function ( modelName, objAsA
* @param {string} pathTexture Path to texture files
* @param {string} fileMtl MTL file name
* @param {THREE.Object3D} sceneGraphBaseNode {@link THREE.Object3D} where meshes will be attached
* @param {boolean} streamMeshes=true Singles meshes are directly integrated into scene when loaded or later
* @param {boolean} [requestTerminate=false] Request termination of web worker and free local resources after execution
*
* @returns {{modelName: string, dataAvailable: boolean, pathObj: null, fileObj: null, pathTexture: null, fileMtl: null, sceneGraphBaseNode: null, requestTerminate: boolean}}
* @returns {{modelName: string, dataAvailable: boolean, pathObj: null, fileObj: null, pathTexture: null, fileMtl: null, sceneGraphBaseNode: null, streamMeshes: boolean, requestTerminate: boolean}}
* @constructor
*/
THREE.OBJLoader2.WWOBJLoader2.PrepDataFile = function ( modelName, pathObj, fileObj, pathTexture, fileMtl, sceneGraphBaseNode, requestTerminate ) {
THREE.OBJLoader2.WWOBJLoader2.PrepDataFile = function ( modelName, pathObj, fileObj, pathTexture, fileMtl, sceneGraphBaseNode, streamMeshes, requestTerminate ) {

var data = {
modelName: ( modelName == null ) ? 'none' : modelName,
Expand All @@ -926,6 +953,7 @@ THREE.OBJLoader2.WWOBJLoader2.PrepDataFile = function ( modelName, pathObj, file
pathTexture: ( pathTexture == null ) ? null : pathTexture,
fileMtl: ( fileMtl == null ) ? null : fileMtl,
sceneGraphBaseNode: ( sceneGraphBaseNode == null ) ? null : sceneGraphBaseNode,
streamMeshes: ( streamMeshes == null ) ? true : streamMeshes,
requestTerminate: ( requestTerminate == null ) ? false : requestTerminate
};

Expand Down
143 changes: 74 additions & 69 deletions examples/webgl_loader_obj2.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,92 +7,76 @@

<style>
body {
font-family: Monospace;
background-color: #000;
color: #fff;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border: none;
cursor: default;
font-family: Monospace;
background-color: #000;
color: #fff;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border: none;
cursor: default;
}
#info {
color: #fff;
position: absolute;
top: 10px;
width: 100%;
text-align: center;
z-index: 100;
display:block;
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
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;
width: 100%;
height: 100vh;
min-width: 640px;
min-height: 360px;
position: relative;
overflow: hidden;
z-index: 0;
}
#example {
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background-color: #000000;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background-color: #000000;
}
#feedback {
color: darkorange;
color: darkorange;
}
#menu {
margin: 4px 4px 4px 4px;
padding: 4px 12px 4px 12px;
border: solid darkorange;
border-radius: 8px;
position: absolute;
left: 0px;
top: 0px;
}
#shading, #side {
border: solid 4px;
border-radius: 4px;
font-size: 18pt;
cursor: pointer;
width: 200px;
}
#shading {
border-color: darkgreen;
background-color: darkgreen;
}
#side {
border-color: darkorange;
background-color: darkorange;
#dat {
user-select: none;
position: absolute;
left: 0px;
top: 0px;
z-Index: 2;
}
</style>

</head>

<body>
<div id="dat">

</div>
<div id="info">
<a href="http://threejs.org" target="_blank">three.js</a> - OBJLoader2 direct loader test
<div id="feedback"></div>
</div>
<div id="glFullscreen">
<div id="menu">
<p id="shading" onclick="app.alterSmoothShading()">Smooth Shading</p>
<p id="side" onclick="app.alterDouble()">Front Side</p>
</div>
<canvas id="example"></canvas>
</div>

<script src="js/Detector.js"></script>
<script src="../build/three.js"></script>
<script src="js/controls/TrackballControls.js"></script>
<script src="js/loaders/MTLLoader.js"></script>
<script src="js/libs/dat.gui.min.js"></script>

<script src="js/loaders/OBJLoader2.js"></script>
<script>
Expand Down Expand Up @@ -252,13 +236,8 @@

var scope = this;
scope.smoothShading = ! scope.smoothShading;
var side = document.getElementById( 'shading' );
side.style.backgroundColor = scope.smoothShading ? 'darkgreen' : 'darkorange';
side.style.borderColor = scope.smoothShading ? 'darkgreen' : 'darkorange';
side.innerHTML = scope.smoothShading ? 'Smooth Shading' : 'Flat Shading';
console.log( scope.smoothShading ? 'Enabling SmoothShading' : 'Enabling FlatShading');


scope.traversalFunction = function ( material ) {
material.shading = scope.smoothShading ? THREE.SmoothShading : THREE.FlatShading;
material.needsUpdate = true;
Expand All @@ -273,13 +252,8 @@

var scope = this;
scope.doubleSide = ! scope.doubleSide;
var side = document.getElementById( 'side' );
side.style.backgroundColor = scope.doubleSide ? 'darkgreen' : 'darkorange';
side.style.borderColor = scope.doubleSide ? 'darkgreen' : 'darkorange';
side.innerHTML = scope.doubleSide ? 'Double Side' : 'Front Side';
console.log( scope.doubleSide ? 'Enabling DoubleSide materials' : 'Enabling FrontSide materials');


scope.traversalFunction = function ( material ) {
material.side = scope.doubleSide ? THREE.DoubleSide : THREE.FrontSide;
};
Expand Down Expand Up @@ -314,6 +288,37 @@

var app = new OBJLoader2Example( document.getElementById( 'example' ) );

// Init dat.gui and controls
var OBJLoader2Control = function() {
this.smoothShading = app.smoothShading;
this.doubleSide = app.doubleSide;
};
var objLoader2Control = new OBJLoader2Control();

var gui = new dat.GUI( {
autoPlace: false,
width: 320
} );

var menuDiv = document.getElementById( 'dat' );
menuDiv.appendChild(gui.domElement);
var folderQueue = gui.addFolder( 'OBJLoader2 Options' );
var controlSmooth = folderQueue.add( objLoader2Control, 'smoothShading' ).name( 'Smooth Shading' );
controlSmooth.onChange( function( value ) {
console.log( 'Setting smoothShading to: ' + value );
app.alterSmoothShading();
});

var controlDouble = folderQueue.add( objLoader2Control, 'doubleSide' ).name( 'Double Side Materials' );
controlDouble.onChange( function( value ) {
console.log( 'Setting doubleSide to: ' + value );
app.alterDouble();
});
folderQueue.open();



// init three.ks example application
var resizeWindow = function () {
app.resizeDisplayGL();
};
Expand All @@ -334,4 +339,4 @@

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

0 comments on commit cb4e635

Please sign in to comment.