wwobjloader2
Version:
New OBJLoader utilizing web worker for three.js
105 lines (80 loc) • 3.05 kB
HTML
<html lang="en">
<head>
<title>three.js webgl - OBJLoader2 usage options</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 usage options
<div id="feedback"></div>
</div>
<script src="../../node_modules/three/examples/js/Detector.js"></script>
<script src="../../node_modules/three/build/three.min.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="../../build/LoaderSupport.min.js"></script>
<script src="../../build/OBJLoader2.min.js"></script>
<script src="./WWOBJLoader2Example.js"></script>
<script>
var app = new WWOBJLoader2Example( document.getElementById( 'example' ) );
var wwObjLoader2Control = {
flatShading: app.flatShading,
doubleSide: app.doubleSide
};
var menuDiv = document.getElementById( 'dat' );
var gui = new dat.GUI( {
autoPlace: false,
width: 320
} );
menuDiv.appendChild( gui.domElement );
var folderOptions = gui.addFolder( 'WWOBJLoader2 Options' );
var controlFlat = folderOptions.add( wwObjLoader2Control, 'flatShading' ).name( 'Flat Shading' );
controlFlat.onChange( function( value ) {
console.log( 'Setting flatShading to: ' + value );
app.alterShading();
});
var controlDouble = folderOptions.add( wwObjLoader2Control, 'doubleSide' ).name( 'Double Side Materials' );
controlDouble.onChange( function( value ) {
console.log( 'Setting doubleSide to: ' + value );
app.alterDouble();
});
folderOptions.open();
// init three.js example application
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();
// kick render loop
render();
// Load a file with OBJLoader.parse synchronously
app.useParseSync();
// Load a file with OBJLoader.parseAsync asynchronously using a worker
app.useParseAsync();
// Load a file with OBJLoader.load synchronously
app.useLoadSync();
// Load a file with OBJLoader.load asynchronously
app.useLoadAsync();
// Load a file with OBJLoader.run synchronously
app.useRunSync();
// Load a file with OBJLoader.run asynchronously and add normals during onMeshAlter
app.useRunAsyncMeshAlter();
app.finalize();
</script>
</body>
</html>