|
|
@@ -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>
|
|
|
@@ -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);
|
Mr.doob