From 6272fc1e8fa79c36c6d18dcd4bd3b118b88c6a4e Mon Sep 17 00:00:00 2001 From: "Mr.doob" Date: Thu, 12 Jan 2017 18:13:26 +0000 Subject: [PATCH] Improved GLTFLoader example. --- examples/webgl_loader_gltf.html | 127 +++++++++++--------------------- 1 file changed, 43 insertions(+), 84 deletions(-) diff --git a/examples/webgl_loader_gltf.html b/examples/webgl_loader_gltf.html index b7860b123f..55cb749cbe 100644 --- a/examples/webgl_loader_gltf.html +++ b/examples/webgl_loader_gltf.html @@ -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 }
three.js - - glTF loader - + glTF loader
- monster by 3drt - - COLLADA duck by Sony - Cesium models courtesy Cesium + monster by 3drt - COLLADA duck by Sony - + Cesium models by Cesium
-
-
-
-
+
-
- Model - +
Loading...
+
+
+ Model +
- -
- Camera - +
+ Camera +
-
- Animations -
Play
+
+ Animations + Play
-
+
Extension -
- -
+
-
@@ -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]; @@ -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); -- GitLab