Skip to content

Commit

Permalink
Improved GLTFLoader example.
Browse files Browse the repository at this point in the history
  • Loading branch information
@mrdoob
mrdoob committed Jan 12, 2017
1 parent 4d2f46e commit 6272fc1
Showing 1 changed file with 43 additions and 84 deletions.
127 changes: 43 additions & 84 deletions examples/webgl_loader_gltf.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,102 +31,67 @@
}

#controls {
position:absolute;
width:250px;
bottom:0%;
right:0%;
height:132px;
background-color:White;
opacity:.9;
font: 13px/1.231 "Lucida Grande", Lucida, Verdana, sans-serif;
}

#status {
position:absolute;
width:25%;
left:2%;
top:95%;
height:5%;
opacity:.9;
font: 13px/1.231 "Lucida Grande", Lucida, Verdana, sans-serif;
}

.control {
position:absolute;
margin-left:12px;
width:100%;
font-weight:bold;
}

.controlValue {
position:absolute;
left:36%;
top:0%;
}

#scenes_control {
position:absolute;
top:8px;
position: absolute;
width: 200px;
bottom: 0px;
left: 0px;
padding: 10px;
background-color: White;
font: 13px "Lucida Grande", Lucida, Verdana, sans-serif;
}

#cameras_control {
position:absolute;
top:40px;
#controls > div {
margin-bottom: 8px;
}

#animations_control {
position:absolute;
top:72px;
#controls hr {
border: 0px;
height: 1px;
margin-bottom: 10px;
background-color: #bbb;
}

#extensions_control {
position:absolute;
top:104px;
#info a, .button {
color: #f00;
font-weight: bold;
text-decoration: underline;
cursor: pointer
}

#info a, .button { color: #f00; font-weight: bold; text-decoration: underline; cursor: pointer }
</style>
</head>

<body>
<div id="info">
<a href="http://threejs.org" target="_blank">three.js</a> -
<a href="https://github.com/KhronosGroup/glTF" target="_blank">glTF</a> loader -
<a href="https://github.com/KhronosGroup/glTF" target="_blank">glTF</a> loader
<br>
monster by <a href="http://www.3drt.com/downloads.htm" target="_blank">3drt</a> -
COLLADA duck by Sony - Cesium models courtesy <a href="http://cesiumjs.org/" target="_blank">Cesium</a>
monster by <a href="http://www.3drt.com/downloads.htm" target="_blank">3drt</a> - COLLADA duck by Sony -
Cesium models by <a href="http://cesiumjs.org/" target="_blank">Cesium</a>
</div>
<div id="container">
</div>
<div id="status">
</div>
<div id="container"></div>
<div id="controls">
<div class="control" id="scenes_control">
Model
<select class="controlValue" id="scenes_list" size="1" onchange="selectScene();" ondblclick="selectScene();">
</select>
<div id="status">Loading...</div>
<hr />
<div>
Model
<select id="scenes_list" size="1" onchange="selectScene();" ondblclick="selectScene();"></select>
</div>

<div class="control" id="cameras_control">
Camera
<select class="controlValue" id="cameras_list" size="1" onchange="selectCamera();" ondblclick="selectCamera();">
</select>
<div>
Camera
<select id="cameras_list" size="1" onchange="selectCamera();" ondblclick="selectCamera();"></select>
</div>
<div class="control" id="animations_control">
Animations
<div class="controlValue"><input type="checkbox" checked onclick="toggleAnimations();">Play</input></div>
<div>
Animations
<input type="checkbox" checked onclick="toggleAnimations();">Play</input>
</div>
<div class="control" id="extensions_control">
<div>
Extension
<div class="controlValue">
<select id="extensions_list" onchange="selectExtension();">
<option value="glTF">None</option>
<option value="glTF-MaterialsCommon">Built-in shaders</option>
<option value="glTF-Binary">Binary</option>
</select>
</div>
<select id="extensions_list" onchange="selectExtension();">
<option value="glTF">None</option>
<option value="glTF-MaterialsCommon">Built-in shaders</option>
<option value="glTF-Binary">Binary</option>
</select>
</div>

</div>
<script src="../build/three.js"></script>
<script src="js/controls/OrbitControls.js"></script>
Expand Down Expand Up @@ -239,9 +204,6 @@

THREE.GLTFLoader.Shaders.removeAll(); // remove all previous shaders
loader = new THREE.GLTFLoader;
var loadStartTime = Date.now();
var status = document.getElementById("status");
status.innerHTML = "Loading...";

for (var i = 0; i < extensionSelect.children.length; i++) {
var child = extensionSelect.children[i];
Expand All @@ -259,20 +221,17 @@
url = url.replace('.gltf', '.glb');
}

var loadStartTime = Date.now();
var loadStartTime = performance.now();
var status = document.getElementById("status");
status.innerHTML = "Loading...";

loader.load( url, function(data) {

gltf = data;

var object = gltf.scene !== undefined ? gltf.scene : gltf.scenes[ 0 ];

var loadEndTime = Date.now();

var loadTime = (loadEndTime - loadStartTime) / 1000;

status.innerHTML = "Load time: " + loadTime.toFixed(2) + " seconds.";
status.innerHTML = "Load time: " + ( performance.now() - loadStartTime ).toFixed( 2 ) + " ms.";

if (sceneInfo.cameraPos)
defaultCamera.position.copy(sceneInfo.cameraPos);
Expand Down

0 comments on commit 6272fc1

Please sign in to comment.