Skip to content

T
three.js

Ablesons / three.js
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

体验新版 GitCode，发现更多精彩内容 >>

提交 6272fc1e 编写于 作者: M Mr.doob
浏览文件
操作

Improved GLTFLoader example.

上级 4d2f46e7
隐藏空白更改
内联 并排
Showing with 43 addition and 84 deletion
examples/webgl_loader_gltf.html
浏览文件 @ 6272fc1e
......@@ -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);
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或