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..ba57ec0 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,6 +134,7 @@ var THREE = __webpack_require__(6), images = allImages.slice(12, 18); points = [{ url: '#room0', + className: 'arrow', position: [496, -100, 496], rotation: [0, Math.PI, 0] }]; @@ -141,10 +143,12 @@ var THREE = __webpack_require__(6), 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..01e665c 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,6 +64,7 @@ const THREE = require('three/build/three.min'), points = [ { url: '#room0', + className: 'arrow', position: [496, -100, 496], rotation: [0, Math.PI, 0] } @@ -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 @@ + + + + + + + + + + + +