06wj
diff --git a/‎demo/img/icon.jpg
152 KB b/‎demo/img/icon.jpg
152 KB
diff --git a/‎demo/img/originIcon.png
3.12 MB b/‎demo/img/originIcon.png
3.12 MB
diff --git a/‎demo/js/OrbitControls.js
+3 b/‎demo/js/OrbitControls.js
+3
diff --git a/‎demo/js/index.js
+14-12 b/‎demo/js/index.js
+14-12
diff --git a/‎tools/icon.html
+53 b/‎tools/icon.html
+53
@@ -57,6 +57,9 @@
         this.enable();
     }
 
+    OrbitControls.prototype.reset = function(){
+        tempEuler.set(0, 0, 0);
+    };
     OrbitControls.prototype.enable = function(){
         if(!this.isEnabled){
             this.isEnabled = true;
 
@@ -12,12 +12,13 @@ function initList(){
     models.forEach(function(modelInfo){
         var name = modelInfo.name;
         var id = modelInfo.id;
+        var index = parseInt(id) - 1;
         var elem = document.createElement('div');
         var modelPath = `../models/${id}/`;
         elem.className = 'modelContainer';
         elem.setAttribute('data-id', id);
         elem.innerHTML = `
-            <div data-id='${id}' class='modelIcon' style='background-size:74px 63px;background-image:url(./${modelPath}icon.png);width:74px;height:63px;'></div>
+            <div data-id='${id}' class='modelIcon' style='background-position:${-(148 + 4)/2*(index%13)}px ${-(125 + 4)/2*(Math.floor(index/13)) + 0.5}px;background-size:988px 838px;background-image:url(//wx4.sinaimg.cn/mw1024/6a4fa2d0ly1fxo333fivdj20rg0na0wo.jpg);width:74px;height:63px;'></div>
             <div data-id='${id}' class='modelInfo'>${id} ${name}</div>
         `;
         listContainerElem.appendChild(elem);
@@ -55,42 +56,43 @@ function initStage(){
 
     orbitControls = new OrbitControls(stage, {
         isLockMove:true,
-        isLockZ:true
+        isLockZ:true,
+        rotationXLimit:true
     });
 
     glTFLoader = new Hilo3d.GLTFLoader();
 
     closeBtnElem.onclick = function(){
-        hideStage();
+        hideModel();
     }
 }
 
-function hideStage(){
+function hideModel(){
     modelViewerContainerElem.style.display = 'none';
-    mainContainerElem.appendChild(listContainerElem);
+    listContainerElem.style.display = 'flex';
 
     // reset resource
     Hilo3d.BasicLoader.cache.clear();
     stage.destroy();
     stage.matrix.identity();
+    orbitControls.reset();
 
     titleElem.innerHTML = 'Pokémon Viewer';
-}
-
-function showStage(){
-    modelViewerContainerElem.style.display = 'block';
-    mainContainerElem.removeChild(listContainer);
+    location.hash = '';
 }
 
 function onShowModelError(){
     alert('Someting Error!');
-    hideStage();
+    hideModel();
 }
 
 function showModel(id){
-    showStage();
+    modelViewerContainerElem.style.display = 'block';
+    listContainerElem.style.display = 'none';
+
     loadingElem.style.display = 'block';
     titleElem.innerHTML = `${id} ${modelDict[id].name}`;
+
     var glTFUrl = `../models/${id}/glTF/model.gltf`;
     glTFLoader.load({
         src: glTFUrl,
 
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>icon</title>
+</head>
+<body>
+    <canvas id='canvas'></canvas>
+    <script>
+        const canvasElem = document.querySelector('canvas');
+        const ctx = canvasElem.getContext('2d');
+        const createImage = async (src) => {
+            return new Promise((resolve, reject) => {
+                const img = new Image();
+                img.onload = function(){
+                    resolve(img);
+                };
+
+                img.onerror = function(e){
+                    reject(e);
+                };
+
+                img.src = src;
+            });
+        };
+
+        const createImages = async () => {
+            const w = 148;
+            const h = 125;
+            const gap = 4;
+            canvasElem.width = (w + gap) * 13;
+            canvasElem.height = (h + gap) * 13;
+            ctx.fillStyle = '#aaa';
+            ctx.fillRect(0, 0, canvasElem.width, canvasElem.height);
+            for(let i = 1;i <= 151;i ++) {
+                const col = (i-1) % 13;
+                const row = Math.floor((i-1) / 13);
+                const id = i < 10 ? ('00' + i) : i < 100 ? ('0' + i) : i;
+                try{
+                    const img = await createImage(`../models/${id}/icon.png`);
+                    ctx.drawImage(img, col * (w + gap), row * (h + gap));
+                } catch(e){
+                    console.warn(`${id} has no model!`);
+                }
+            }
+        };
+
+        createImages().then(() => {
+            console.log('haha~');
+        });
+    </script>
+</body>
+</html>
Original file line number	Diff line number	Diff line change
`@@ -57,6 +57,9 @@`
`57`	`57`	`this.enable();`
`58`	`58`	`}`
`59`	`59`
	`60`	`+ OrbitControls.prototype.reset = function(){`
	`61`	`+ tempEuler.set(0, 0, 0);`
	`62`	`+ };`
`60`	`63`	`OrbitControls.prototype.enable = function(){`
`61`	`64`	`if(!this.isEnabled){`
`62`	`65`	`this.isEnabled = true;`