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 @@ ...@@ -31,102 +31,67 @@
} }
#controls { #controls {
position:absolute; position: absolute;
width:250px; width: 200px;
bottom:0%; bottom: 0px;
right:0%; left: 0px;
height:132px; padding: 10px;
background-color:White; background-color: White;
opacity:.9; font: 13px "Lucida Grande", Lucida, Verdana, sans-serif;
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;
} }
#cameras_control { #controls > div {
position:absolute; margin-bottom: 8px;
top:40px;
} }
#animations_control { #controls hr {
position:absolute; border: 0px;
top:72px; height: 1px;
margin-bottom: 10px;
background-color: #bbb;
} }
#extensions_control { #info a, .button {
position:absolute; color: #f00;
top:104px; font-weight: bold;
text-decoration: underline;
cursor: pointer
} }
#info a, .button { color: #f00; font-weight: bold; text-decoration: underline; cursor: pointer }
</style> </style>
</head> </head>
<body> <body>
<div id="info"> <div id="info">
<a href="http://threejs.org" target="_blank">three.js</a> - <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> <br>
monster by <a href="http://www.3drt.com/downloads.htm" target="_blank">3drt</a> - monster by <a href="http://www.3drt.com/downloads.htm" target="_blank">3drt</a> - COLLADA duck by Sony -
COLLADA duck by Sony - Cesium models courtesy <a href="http://cesiumjs.org/" target="_blank">Cesium</a> Cesium models by <a href="http://cesiumjs.org/" target="_blank">Cesium</a>
</div> </div>
<div id="container"> <div id="container"></div>
</div>
<div id="status">
</div>
<div id="controls"> <div id="controls">
<div class="control" id="scenes_control"> <div id="status">Loading...</div>
Model <hr />
<select class="controlValue" id="scenes_list" size="1" onchange="selectScene();" ondblclick="selectScene();"> <div>
</select> Model
<select id="scenes_list" size="1" onchange="selectScene();" ondblclick="selectScene();"></select>
</div> </div>
<div>
<div class="control" id="cameras_control"> Camera
Camera <select id="cameras_list" size="1" onchange="selectCamera();" ondblclick="selectCamera();"></select>
<select class="controlValue" id="cameras_list" size="1" onchange="selectCamera();" ondblclick="selectCamera();">
</select>
</div> </div>
<div class="control" id="animations_control"> <div>
Animations Animations
<div class="controlValue"><input type="checkbox" checked onclick="toggleAnimations();">Play</input></div> <input type="checkbox" checked onclick="toggleAnimations();">Play</input>
</div> </div>
<div class="control" id="extensions_control"> <div>
Extension Extension
<div class="controlValue"> <select id="extensions_list" onchange="selectExtension();">
<select id="extensions_list" onchange="selectExtension();"> <option value="glTF">None</option>
<option value="glTF">None</option> <option value="glTF-MaterialsCommon">Built-in shaders</option>
<option value="glTF-MaterialsCommon">Built-in shaders</option> <option value="glTF-Binary">Binary</option>
<option value="glTF-Binary">Binary</option> </select>
</select>
</div>
</div> </div>
</div> </div>
<script src="../build/three.js"></script> <script src="../build/three.js"></script>
<script src="js/controls/OrbitControls.js"></script> <script src="js/controls/OrbitControls.js"></script>
...@@ -239,9 +204,6 @@ ...@@ -239,9 +204,6 @@
THREE.GLTFLoader.Shaders.removeAll(); // remove all previous shaders THREE.GLTFLoader.Shaders.removeAll(); // remove all previous shaders
loader = new THREE.GLTFLoader; 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++) { for (var i = 0; i < extensionSelect.children.length; i++) {
var child = extensionSelect.children[i]; var child = extensionSelect.children[i];
...@@ -259,20 +221,17 @@ ...@@ -259,20 +221,17 @@
url = url.replace('.gltf', '.glb'); url = url.replace('.gltf', '.glb');
} }
var loadStartTime = Date.now(); var loadStartTime = performance.now();
var status = document.getElementById("status"); var status = document.getElementById("status");
status.innerHTML = "Loading..."; status.innerHTML = "Loading...";
loader.load( url, function(data) { loader.load( url, function(data) {
gltf = data; gltf = data;
var object = gltf.scene !== undefined ? gltf.scene : gltf.scenes[ 0 ]; var object = gltf.scene !== undefined ? gltf.scene : gltf.scenes[ 0 ];
var loadEndTime = Date.now(); status.innerHTML = "Load time: " + ( performance.now() - loadStartTime ).toFixed( 2 ) + " ms.";
var loadTime = (loadEndTime - loadStartTime) / 1000;
status.innerHTML = "Load time: " + loadTime.toFixed(2) + " seconds.";
if (sceneInfo.cameraPos) if (sceneInfo.cameraPos)
defaultCamera.position.copy(sceneInfo.cameraPos); defaultCamera.position.copy(sceneInfo.cameraPos);
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或