From 5145edfb88bc16227bea264e6c3c66e73d42125c Mon Sep 17 00:00:00 2001 From: Dmitry Dergunov Date: Mon, 30 Jul 2018 03:37:27 +0400 Subject: [PATCH] add icons --- dist/images/arrow.svg | 17 +++++++++++++++++ dist/images/door.svg | 15 +++++++++++++++ dist/manifest.json | 2 +- dist/panorama.js | 10 +++++++--- dist/sw.js | 6 ++++-- src/panorama.css | 24 +++++++++++++++--------- src/panorama.js | 8 ++++++-- src/public/images/arrow.svg | 17 +++++++++++++++++ src/public/images/door.svg | 15 +++++++++++++++ 9 files changed, 97 insertions(+), 17 deletions(-) create mode 100644 dist/images/arrow.svg create mode 100644 dist/images/door.svg create mode 100644 src/public/images/arrow.svg create mode 100644 src/public/images/door.svg diff --git a/dist/images/arrow.svg b/dist/images/arrow.svg new file mode 100644 index 0000000..2230799 --- /dev/null +++ b/dist/images/arrow.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + diff --git a/dist/images/door.svg b/dist/images/door.svg new file mode 100644 index 0000000..8dfddba --- /dev/null +++ b/dist/images/door.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + diff --git a/dist/manifest.json b/dist/manifest.json index de8d65d..d53133a 100644 --- a/dist/manifest.json +++ b/dist/manifest.json @@ -1,6 +1,6 @@ { "name": "Panorama DEMO", - "short_name": "Panorama DEMO", + "short_name": "Panorama", "orientation": "portrait", "display": "standalone", "start_url": ".", diff --git a/dist/panorama.js b/dist/panorama.js index a997d01..5b9ac6b 100644 --- a/dist/panorama.js +++ b/dist/panorama.js @@ -125,6 +125,7 @@ var THREE = __webpack_require__(6), images = allImages.slice(6, 12); points = [{ url: '#room0', + className: 'door', position: [-496, -100, -300], rotation: [0, Math.PI / 2, 0] }]; @@ -133,18 +134,21 @@ var THREE = __webpack_require__(6), images = allImages.slice(12, 18); points = [{ url: '#room0', + className: 'arrow', position: [496, -100, 496], - rotation: [0, Math.PI, 0] + rotation: [0, 0, Math.PI] }]; break; default: images = allImages.slice(0, 6); points = [{ url: '#room1', + className: 'door', position: [190, -100, -496], rotation: [0, 0, 0] }, { url: '#room2', + className: 'arrow', position: [496, -200, -250], rotation: [0, -Math.PI / 2, 0] }]; @@ -480,7 +484,7 @@ function init() { for (var _i = points.length - 1; _i > -1; _i--) { var point = points[_i]; var _element = document.createElement('a'); - _element.className = 'arrow'; + _element.className = 'point ' + point.className; _element.href = point.url; var _object = new THREE.CSS3DObject(_element); _object.position.fromArray(point.position); @@ -602,7 +606,7 @@ exports = module.exports = __webpack_require__(3)(false); // module -exports.push([module.i, "body {\n margin: 0;\n cursor: move;\n}\n\n.arrow {\n width: 40px;\n height: 40px;\n background: #5b2c6f;\n box-shadow: 5px 5px 20px #000;\n border: 5px solid #fff;\n border-radius: 50%;\n cursor: pointer;\n}\n\n.arrow:hover,\n.arrow:active {\n opacity: 1;\n}", ""]); +exports.push([module.i, "body {\n margin: 0;\n cursor: move;\n}\n\n.point {\n width: 60px;\n height: 60px;\n position: relative;\n cursor: pointer;\n opacity: .7;\n}\n\n.point.arrow {\n background: url(\"/images/arrow.svg\") center center no-repeat / cover;\n}\n\n.point.door {\n background: url(\"/images/door.svg\") center center no-repeat / cover;\n}\n\n.point:hover,\n.point:active {\n opacity: 1;\n}", ""]); // exports diff --git a/dist/sw.js b/dist/sw.js index 3b29625..6e074a6 100644 --- a/dist/sw.js +++ b/dist/sw.js @@ -1,8 +1,10 @@ var serviceWorkerOption = { "assets": [ "/panorama.js", - "/images/room0/py.webp", + "/images/arrow.svg", + "/images/door.svg", "/index.html", + "/images/room0/py.webp", "/images/room2/py.webp", "/images/room1/py.webp", "/images/room1/pz.webp", @@ -20,9 +22,9 @@ var serviceWorkerOption = { "/images/room1/ny.webp", "/images/room1/pz.jpg", "/images/room0/nz.webp", + "/images/room2/pz.webp", "/images/room0/ny.webp", "/images/room1/nx.jpg", - "/images/room2/pz.webp", "/images/room2/nx.webp", "/images/room2/nz.jpg", "/images/room2/px.jpg", diff --git a/src/panorama.css b/src/panorama.css index c2bf0c3..b091517 100644 --- a/src/panorama.css +++ b/src/panorama.css @@ -3,17 +3,23 @@ body { cursor: move; } -.arrow { - width: 40px; - height: 40px; - background: #5b2c6f; - box-shadow: 5px 5px 20px #000; - border: 5px solid #fff; - border-radius: 50%; +.point { + width: 60px; + height: 60px; + position: relative; cursor: pointer; + opacity: .7; } -.arrow:hover, -.arrow:active { +.point.arrow { + background: url("/images/arrow.svg") center center no-repeat / cover; +} + +.point.door { + background: url("/images/door.svg") center center no-repeat / cover; +} + +.point:hover, +.point:active { opacity: 1; } \ No newline at end of file diff --git a/src/panorama.js b/src/panorama.js index 1a66380..74cbd90 100644 --- a/src/panorama.js +++ b/src/panorama.js @@ -53,6 +53,7 @@ const THREE = require('three/build/three.min'), points = [ { url: '#room0', + className: 'door', position: [-496, -100, -300], rotation: [0, Math.PI / 2, 0] } @@ -63,8 +64,9 @@ const THREE = require('three/build/three.min'), points = [ { url: '#room0', + className: 'arrow', position: [496, -100, 496], - rotation: [0, Math.PI, 0] + rotation: [0, 0, Math.PI] } ]; break; @@ -73,11 +75,13 @@ const THREE = require('three/build/three.min'), points = [ { url: '#room1', + className: 'door', position: [190, -100, -496], rotation: [0, 0, 0] }, { url: '#room2', + className: 'arrow', position: [496, -200, -250], rotation: [0, -Math.PI / 2, 0] } @@ -512,7 +516,7 @@ function init() { for (let i = points.length - 1; i > -1; i--) { const point = points[i]; const element = document.createElement('a'); - element.className = 'arrow'; + element.className = `point ${point.className}`; element.href = point.url; const object = new THREE.CSS3DObject(element); object.position.fromArray(point.position); diff --git a/src/public/images/arrow.svg b/src/public/images/arrow.svg new file mode 100644 index 0000000..2230799 --- /dev/null +++ b/src/public/images/arrow.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + diff --git a/src/public/images/door.svg b/src/public/images/door.svg new file mode 100644 index 0000000..8dfddba --- /dev/null +++ b/src/public/images/door.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + +