├── .DS_Store ├── .browserslistrc ├── .gitignore ├── README.md ├── babel.config.js ├── dist ├── country.txt ├── css │ ├── app.a5c98d7f.css │ ├── chunk-1530f62a.0a533a01.css │ ├── chunk-1570689c.4ba88450.css │ ├── chunk-1743765e.7ca84248.css │ ├── chunk-3614bd60.5cdcb2c7.css │ ├── chunk-584e9acd.90e25cd6.css │ └── chunk-655fa150.5abc7e2e.css ├── img │ ├── gua.png │ ├── guide.93d8cc5b.gif │ ├── icon5.31ed868d.png │ ├── load-1-1.1591169a.png │ ├── load-1-2.62b9c464.png │ ├── load-1-3.ca117fb4.png │ ├── load-2-1.44444b78.png │ ├── load-2-2.9f87da0e.png │ ├── load-2-3.56cadf50.png │ ├── load-3-1.b78eedc8.png │ ├── load-3-2.d3cafaa1.png │ ├── load-3-3.70f95863.png │ ├── load-4-1.74d30f83.png │ ├── load-4-2.41df93d0.png │ ├── load-4-3.b3d5a546.png │ ├── load-5-1.0bdece5a.png │ ├── load-5-2.0e369fdd.png │ ├── load-5-3.016d9322.png │ ├── offline.png │ ├── photobg.c0cb9df4.png │ ├── roadsign.png │ ├── run.png │ ├── stop.png │ ├── unload-1-1.8781be95.png │ ├── unload-1-2.8c567cf2.png │ ├── unload-1-3.f30d43d7.png │ ├── unload-2-1.eec0aac7.png │ ├── unload-2-2.a84480c0.png │ ├── unload-2-3.f0bf4350.png │ ├── unload-3-1.6975837e.png │ ├── unload-3-2.d9727a82.png │ ├── unload-3-3.101f4a4f.png │ ├── unload-4-1.4a1acd4f.png │ ├── unload-4-2.d47e8d77.png │ ├── unload-4-3.11a7b6bb.png │ ├── unload-5-1.ff0df809.png │ ├── unload-5-2.04f43ff6.png │ ├── unload-5-3.cabb697f.png │ └── world.d1cec69f.png ├── index.html ├── js │ ├── app.77cf02bf.js │ ├── app.77cf02bf.js.map │ ├── chunk-0c60a6a5.9050328a.js │ ├── chunk-0c60a6a5.9050328a.js.map │ ├── chunk-1530f62a.7048bcc9.js │ ├── chunk-1530f62a.7048bcc9.js.map │ ├── chunk-1570689c.517dfde2.js │ ├── chunk-1570689c.517dfde2.js.map │ ├── chunk-1743765e.a0590402.js │ ├── chunk-1743765e.a0590402.js.map │ ├── chunk-2d0b3298.d4e9a5f7.js │ ├── chunk-2d0b3298.d4e9a5f7.js.map │ ├── chunk-2d2252c2.08d08e8b.js │ ├── chunk-2d2252c2.08d08e8b.js.map │ ├── chunk-3614bd60.882912be.js │ ├── chunk-3614bd60.882912be.js.map │ ├── chunk-5450d967.a6a237b4.js │ ├── chunk-5450d967.a6a237b4.js.map │ ├── chunk-584e9acd.a9b43107.js │ ├── chunk-584e9acd.a9b43107.js.map │ ├── chunk-655fa150.4bf0aeb5.js │ ├── chunk-655fa150.4bf0aeb5.js.map │ ├── chunk-7f07c87d.4f03a186.js │ ├── chunk-7f07c87d.4f03a186.js.map │ ├── chunk-8d324d86.2a4407e4.js │ ├── chunk-8d324d86.2a4407e4.js.map │ ├── chunk-vendors.019b1c2f.js │ └── chunk-vendors.019b1c2f.js.map └── model │ ├── Cargo.mtl │ ├── Cargo.obj │ ├── G7Trailer-back.mtl │ ├── G7Trailer-back.obj │ ├── G7Trailer-head.mtl │ ├── G7Trailer-head.obj │ ├── forklift.mtl │ └── forklift.obj ├── mixin-new ├── math.js └── threeMixin.js ├── package.json ├── postcss.config.js ├── public ├── country.txt ├── img │ ├── gua.png │ ├── negx.jpg │ ├── negy.jpg │ ├── negz.jpg │ ├── offline.png │ ├── posx.jpg │ ├── posy.jpg │ ├── posz.jpg │ ├── roadsign.png │ ├── run.png │ └── stop.png ├── index.html └── model │ ├── Cargo.mtl │ ├── Cargo.obj │ ├── G7Trailer-back.mtl │ ├── G7Trailer-back.obj │ ├── G7Trailer-head.mtl │ ├── G7Trailer-head.obj │ ├── forklift.mtl │ └── forklift.obj ├── src ├── App.vue ├── assets │ ├── css │ │ └── base.less │ ├── imgs │ │ ├── gua.png │ │ ├── guide.gif │ │ ├── icon1.png │ │ ├── icon10.png │ │ ├── icon11.png │ │ ├── icon12.png │ │ ├── icon13.png │ │ ├── icon2.png │ │ ├── icon3.png │ │ ├── icon4.png │ │ ├── icon5.png │ │ ├── icon6.png │ │ ├── icon7.png │ │ ├── icon8.png │ │ ├── icon9.png │ │ ├── load-1-1.png │ │ ├── load-1-2.png │ │ ├── load-1-3.png │ │ ├── load-2-1.png │ │ ├── load-2-2.png │ │ ├── load-2-3.png │ │ ├── load-3-1.png │ │ ├── load-3-2.png │ │ ├── load-3-3.png │ │ ├── load-4-1.png │ │ ├── load-4-2.png │ │ ├── load-4-3.png │ │ ├── load-5-1.png │ │ ├── load-5-2.png │ │ ├── load-5-3.png │ │ ├── negx.jpg │ │ ├── negy.jpg │ │ ├── negz.jpg │ │ ├── offline.png │ │ ├── photobg.png │ │ ├── posx.jpg │ │ ├── posy.jpg │ │ ├── posz.jpg │ │ ├── roadsign.png │ │ ├── run.png │ │ ├── stop.png │ │ ├── unload-1-1.png │ │ ├── unload-1-2.png │ │ ├── unload-1-3.png │ │ ├── unload-2-1.png │ │ ├── unload-2-2.png │ │ ├── unload-2-3.png │ │ ├── unload-3-1.png │ │ ├── unload-3-2.png │ │ ├── unload-3-3.png │ │ ├── unload-4-1.png │ │ ├── unload-4-2.png │ │ ├── unload-4-3.png │ │ ├── unload-5-1.png │ │ ├── unload-5-2.png │ │ ├── unload-5-3.png │ │ ├── volume.png │ │ └── world.png │ ├── js │ │ ├── boundary.js │ │ ├── car.json │ │ ├── country.js │ │ └── path.json │ └── model │ │ ├── Cargo.mtl │ │ ├── Cargo.obj │ │ ├── G7Trailer-back.mtl │ │ ├── G7Trailer-back.obj │ │ ├── G7Trailer-head.mtl │ │ ├── G7Trailer-head.obj │ │ ├── forklift.mtl │ │ └── forklift.obj ├── components │ ├── board.vue │ └── cardborder.vue ├── main.js ├── mixins │ ├── animateList.js │ ├── createBuilding.js │ ├── createCurve.js │ ├── createPark.js │ ├── createRoad.js │ ├── createTruck.js │ ├── math.js │ ├── model │ │ ├── Cargo.mtl │ │ ├── Cargo.obj │ │ ├── G7Trailer-back.mtl │ │ ├── G7Trailer-back.obj │ │ ├── G7Trailer-head.mtl │ │ ├── G7Trailer-head.obj │ │ ├── forklift.mtl │ │ └── forklift.obj │ └── threeMixin.js ├── router.js ├── store.js └── views │ ├── Earth.vue │ ├── Histogram.vue │ ├── Index.vue │ ├── Map3d.vue │ ├── PieChart.vue │ ├── Points.vue │ ├── Reflection.vue │ ├── Shader.vue │ └── Trailer.vue └── vue.config.js /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/.DS_Store -------------------------------------------------------------------------------- /.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | not ie <= 8 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | package-lock.json 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw* 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Examples 2 | * [trailer](https://darylxyx.github.io/Demo/three/#/trailer) 3 | * [3DMap](https://darylxyx.github.io/Demo/three/#/map) 4 | * [earth](https://darylxyx.github.io/Demo/three/#/earth) 5 | * [points](https://darylxyx.github.io/Demo/three/#/points) 6 | * [histogram](https://darylxyx.github.io/Demo/three/#/histogram) 7 | * [pie](https://darylxyx.github.io/Demo/three/#/pie) 8 | * [shader](https://darylxyx.github.io/Demo/three/#/shader) 9 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /dist/css/app.a5c98d7f.css: -------------------------------------------------------------------------------- 1 | #app{height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;overflow:hidden}*{margin:0;padding:0}*,:after,:before{-webkit-box-sizing:border-box;box-sizing:border-box}html{font-size:5.208333vw}body,html{height:100%}body{font-size:.16rem}.container{width:100%}.container,.container #WebGL-output{height:100%}.container .num-tips{position:absolute;left:50%;padding:2px 3px;background-color:red;font-size:18px}#canvas{position:absolute;z-index:999;top:0;right:0} -------------------------------------------------------------------------------- /dist/css/chunk-1530f62a.0a533a01.css: -------------------------------------------------------------------------------- 1 | .container[data-v-1e8ef6e2]{width:100%;height:100%}.container #WebGL-output[data-v-1e8ef6e2]{height:100%}.container .num-tips[data-v-1e8ef6e2]{position:absolute;left:50%;padding:2px 3px;background-color:red;font-size:18px}#canvas[data-v-1e8ef6e2]{position:absolute;z-index:999;top:0;right:0} -------------------------------------------------------------------------------- /dist/css/chunk-1570689c.4ba88450.css: -------------------------------------------------------------------------------- 1 | #WebGL-output[data-v-bf4ce8b8]{position:fixed;top:0;bottom:0;left:0;right:0} -------------------------------------------------------------------------------- /dist/css/chunk-1743765e.7ca84248.css: -------------------------------------------------------------------------------- 1 | .container[data-v-8becb45c]{position:relative;width:100%;height:100%}.container #WebGL-output[data-v-8becb45c]{overflow:hidden;width:100%;height:100%}.container .map-bar[data-v-8becb45c]{position:absolute;width:100%;height:.86rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;top:0}.container .map-bar .truck-status[data-v-8becb45c]{font-size:.18rem;color:#7782ac;margin-right:.7rem}.container .map-bar .truck-status .icon[data-v-8becb45c]{margin-top:.19rem;width:.18rem;height:.18rem;float:left;margin-right:.1rem;border-radius:50%}.container .map-bar .truck-status .icon.moving[data-v-8becb45c]{background-image:-webkit-gradient(linear,left top,left bottom,from(#19d190),to(#0d8477));background-image:linear-gradient(-180deg,#19d190,#0d8477)}.container .map-bar .truck-status .icon.stop[data-v-8becb45c]{background-image:linear-gradient(45deg,#2934ce,#86b0ff)}.container .map-bar .truck-status .icon.offline[data-v-8becb45c]{background-image:linear-gradient(45deg,#303a61,#64709f)}.container .map-bar .truck-status .num[data-v-8becb45c]{font-size:.32rem;margin-left:.1rem;color:#c7cfee} -------------------------------------------------------------------------------- /dist/css/chunk-3614bd60.5cdcb2c7.css: -------------------------------------------------------------------------------- 1 | .card[data-v-c27844de]{padding:10px;background-color:rgba(0,0,0,.5);position:absolute;z-index:3;opacity:0;border-radius:5px;-webkit-transition:all .1s linear;transition:all .1s linear;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.card p[data-v-c27844de]{font-size:16px;color:#fff;line-height:1;text-align:left;white-space:nowrap}.card p[data-v-c27844de]:first-child{margin-bottom:5px}#WebGL-output[data-v-c27844de]{position:fixed;top:0;bottom:0;left:0;right:0} -------------------------------------------------------------------------------- /dist/css/chunk-584e9acd.90e25cd6.css: -------------------------------------------------------------------------------- 1 | #WebGL-output[data-v-3c5e54be]{position:fixed;top:0;bottom:0;left:0;right:0} -------------------------------------------------------------------------------- /dist/css/chunk-655fa150.5abc7e2e.css: -------------------------------------------------------------------------------- 1 | .blue hr[data-v-5915a604]{background-color:#22bbf2}.red hr[data-v-5915a604]{background-color:#ed18cc}.border-group[data-v-5915a604]{position:absolute;z-index:-1;left:0;top:0;right:0;bottom:0}.border-group hr[data-v-5915a604]{position:absolute;z-index:1;border:none;opacity:.3}.border-group .card-t[data-v-5915a604]{width:62%;height:2px;top:0;right:0}.border-group .card-l[data-v-5915a604]{width:2px;height:80%;left:0;bottom:0}.border-group .card-r[data-v-5915a604]{width:2px;height:.8rem;top:0;right:0}.border-group .card-b[data-v-5915a604]{width:2.5rem;height:2px;bottom:0;left:0}.border-group .card-br[data-v-5915a604]{width:.42426rem;height:2px;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);right:-4px;bottom:.14rem}.border-group .backcover[data-v-5915a604]{position:absolute;z-index:-1;background:rgba(0,0,0,.7)}.border-group .backcover-l[data-v-5915a604]{width:2.5rem;height:100%;left:0;top:0}.border-group .backcover-rt[data-v-5915a604]{width:.3rem;height:.8rem;right:0;top:0}.border-group .backcover-rb[data-v-5915a604]{width:0;height:0;background:none;border:.212rem solid transparent;border-right-color:rgba(0,0,0,.7);-webkit-transform:rotate(45deg);transform:rotate(45deg);right:.09125rem;bottom:.09rem}.card-group[data-v-228d5832]{width:100%;height:100%;position:absolute}.card-stop[data-v-228d5832]{top:15%;right:30%}.card-stop .con[data-v-228d5832]{line-height:1.3;font-size:.3rem;color:#fff}.card-stop .con span[data-v-228d5832]{margin-left:.23rem;color:#22bbf2}.card-load[data-v-228d5832]{top:30%;right:20%}.card-load .con[data-v-228d5832]{font-size:.35rem;font-weight:700;color:#ed18cc}.card-load .con span[data-v-228d5832]{margin-left:.2rem}.card-loadtime[data-v-228d5832]{top:45%;right:20%}.card-loadtime .con[data-v-228d5832]{font-weight:700;font-size:.35rem;color:#ed18cc}.card-unload[data-v-228d5832]{top:30%;right:20%}.card-unload .con[data-v-228d5832]{font-size:.35rem;font-weight:700;color:#ed18cc}.card-unload .con span[data-v-228d5832]{margin-left:.2rem}.card-unloadtime[data-v-228d5832]{top:45%;right:20%}.card-unloadtime .con[data-v-228d5832]{font-size:.35rem;font-weight:700;color:#ed18cc}.card-temp[data-v-228d5832]{top:30%;right:22%}.card-temp .con img[data-v-228d5832]{width:.7rem;left:.14rem;top:.2rem}.card-temp .con p[data-v-228d5832]{font-size:.22rem;color:#fff;margin-bottom:.15rem}.card-temp .con p[data-v-228d5832]:last-child{margin-bottom:0}.card-temp .con p span[data-v-228d5832]{color:#22bbf2;margin-left:.2rem}.card-weight[data-v-228d5832]{top:50%;right:22%}.card-weight .con img[data-v-228d5832]{width:.8rem;left:.1rem;top:.2rem}.card-weight .con p[data-v-228d5832]{font-size:.22rem;color:#fff;margin-bottom:.15rem}.card-weight .con p[data-v-228d5832]:last-child{margin-bottom:0}.card-weight .con p span[data-v-228d5832]{color:#22bbf2;margin-left:.2rem}.card-gif[data-v-228d5832]{opacity:0;position:absolute;top:10%;right:10%;width:3rem;padding:.08rem;background:rgba(35,43,70,.5)}.card-gif img[data-v-228d5832]{width:100%}.card-wheel[data-v-228d5832]{top:60%;right:30%}.card-wheel .con img[data-v-228d5832]{width:.65rem;left:.17rem;top:.25rem}.card-wheel .con p[data-v-228d5832]{font-size:.22rem;color:#fff;margin-bottom:.15rem}.card-wheel .con p[data-v-228d5832]:last-child{margin-bottom:0}.card-wheel .con p:last-child span[data-v-228d5832]{color:#ed18cc}.card-wheel .con p span[data-v-228d5832]{color:#22bbf2;margin-left:.2rem}.card-wheelalert[data-v-228d5832]{top:60%;right:30%}.card-wheelalert img[data-v-228d5832]{width:.65rem;left:.17rem;top:.25rem}.card-wheelalert .con p[data-v-228d5832]{color:#fff;font-size:.22rem;margin-bottom:.15rem}.card-wheelalert .con p[data-v-228d5832]:last-child{color:#ed18cc;margin-bottom:0}.card-wheelvoice[data-v-228d5832]{top:10%;right:15%}.card-wheelvoice .con[data-v-228d5832]{line-height:1.5}.card-wheelvoice .con p[data-v-228d5832]{color:#fff;font-size:.22rem;margin-bottom:.15rem}.card-wheelvoice .con p[data-v-228d5832]:last-child{margin-bottom:0}.card-rollalert[data-v-228d5832]{top:50%;right:30%}.card-rollalert img[data-v-228d5832]{width:.65rem;left:.17rem;top:.25rem}.card-rollalert .con p[data-v-228d5832]{color:#fff;font-size:.22rem;margin-bottom:.15rem}.card-rollalert .con p[data-v-228d5832]:last-child{color:#ed18cc;margin-bottom:0}.card-img[data-v-228d5832]{position:absolute;top:60%;right:20%;width:2.8rem!important;height:2.11rem!important;padding:0!important;background:url(../img/photobg.c0cb9df4.png);background-size:cover}.card-img img[data-v-228d5832]{display:block;position:absolute;width:2.2rem;height:1.66rem;padding:0!important;margin:.08rem 0 0 .3rem}.card-active[data-v-228d5832]{opacity:.9!important}.card[data-v-228d5832]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0 .15rem;line-height:1;position:absolute;width:2.8rem;height:1.1rem;-webkit-transition:opacity .5s linear;transition:opacity .5s linear;opacity:0}.card-title[data-v-228d5832]{line-height:1;font-size:.2rem;position:absolute;top:-.09rem;left:0}.card-voice[data-v-228d5832]{display:inline-block;background-size:24px;background-position:0;overflow:visible;padding:20px 0 20px 28px;margin:-20px 0 0 0;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAeCAYAAABNChwpAAAAAXNSR0IArs4c6QAAAvhJREFUSA3dVz9oE2EU/953XYpKknNJQnStWIqYBEEjdBEHFwUpOJQOoh1EoYPg5KCd1EVBB0EcYnGpi3sRClVBLhEpFl01JLHQuysK6dC753uXXkyO+5OLwYA33OV73+97732/7929X4QY4oW57+N6pvI0jksZBxyG1XPalG5taog4H4bzzg0lAT2tXUNLfBCIR70BosZjUYCw+e3cZ9WyWs8RxXmBYcjguYEZMNLV6V2r9YmDA4CpCDkTHCZ4JnYCOIPKVla7iwLf0K5zAOKtADyWbOZfBYdpz+DElwN6unLfzFbPuNhYR6BntcPGWuUlBS6RA1tIsZgqFe7AMliuQ78nFSaY2Y+z+vavezSfsW08R7YpYg77TsDMVC/aiM9oYVKAqAHCrFovrIplv5B/bGZWyxuZ6mNi7CRbKeg7CXiDg/M4MgF+tw1r86GFtvN6EeWvFWX8cqI2qbODsIt3bmQqZQo+SbiGBHkrWT++5AbntWNbaS20fvXdH+0YIHZo4U3a9ZO2IfrOgei8F4jys6nEvkX4euQnsddzRTLgoAE2QMFLaq2w3rO6j0Gynl8h2Ipo+oM7CRxsFj25+S8YtjX2a/jfJdA5gmHvzOsvqNhHfgT/jIGgIh85AyNPoHMEQUXiFFPnQ1SM/SHyFqN33B8DpHRY8bDy8TqIGnPr5RbMrdgPG/n122tGj6ixXGUHYc3IZdEtuL1mtE7NJrAZRTIAtUMttVGYZ8VDzcVkBcRKiBWR3466bdyMpBRzIOA92TM22mUjW13jFu3iIhNwgY7iIeXjKCBSQqyIHGVECsnF+D2T9WI11ciXqBXP0XyDWDll26LM7DC+7wQYrNaL31KnC9OshHhMmug2KaRVVkrOOODGTFASL9TE/gli44GUcoFtDI+sgQCfgo/ABnuprQvBlAKukGhxdKFbA0Fru+0DJ8BOemR5l9c4CcQ6gq4Yzk+WZWqjeAEkXCcud7zz/Yz/KgE3AMs0UMQJekc3XNtInoP8Of0NGPQ0Oy9bDlsAAAAASUVORK5CYII=);background-repeat:no-repeat}.card .con[data-v-228d5832]{display:-webkit-box;display:-ms-flexbox;display:flex}.card .con img[data-v-228d5832]{position:absolute}.card .con .split[data-v-228d5832]{width:2px;height:.6rem;margin:0 .3rem 0 .8rem;position:relative}.card-blue[data-v-228d5832]{color:#22bbf2}.card-blue hr[data-v-228d5832]{background:#22bbf2}.card-red[data-v-228d5832]{color:#ed18cc}.card-red hr[data-v-228d5832]{background:#ed18cc}.board[data-v-228d5832]{width:100%;height:100%;position:absolute;z-index:999;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;line-height:1}.board .title-basic[data-v-228d5832]{font-size:.48rem;color:#fff}.board .title-connect[data-v-228d5832]{width:10rem;height:1.89rem;background:rgba(17,22,35,.7);border:2px solid rgba(30,222,255,.2);-webkit-box-orient:vertical;-ms-flex-direction:column;flex-direction:column;line-height:1;padding:.51rem .85rem .35rem}.board .title-connect-text[data-v-228d5832],.board .title-connect[data-v-228d5832]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-direction:normal;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.board .title-connect-text[data-v-228d5832]{width:100%;-webkit-box-orient:horizontal;-ms-flex-direction:row;flex-direction:row}.board .title-connect-text span[data-v-228d5832]{font-size:.32rem;color:#747ea5}.board .title-connect-text .main[data-v-228d5832]{font-size:.48rem;color:#22bbf2}.board .title-connect .progress[data-v-228d5832]{width:90%;height:8px;background:#000;position:relative}.board .title-connect .progress .left[data-v-228d5832],.board .title-connect .progress .right[data-v-228d5832]{position:absolute;height:100%;background:#22bbf2}.board .title-connect .progress .left[data-v-228d5832]{left:0}.board .title-connect .progress .right[data-v-228d5832]{right:0}.board .title-trailer[data-v-228d5832]{width:8rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;line-height:1}.board .title-trailer span[data-v-228d5832]{font-size:.48rem;color:#3a456f}.board .title-trailer img[data-v-228d5832]{width:2.22rem}.title-bar[data-v-228d5832]{position:absolute;width:100%;top:.78rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;line-height:1}.title-bar p[data-v-228d5832]{font-size:.48rem;color:#3a456f}.left-bar[data-v-228d5832]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.left-bar .left-sec[data-v-228d5832]{display:-webkit-box;display:-ms-flexbox;display:flex;line-height:1;margin:0 0 .3rem .37rem}.left-bar .left-sec[data-v-228d5832]:last-child{margin-bottom:0}.left-bar .left-sec .icon[data-v-228d5832]{width:.64rem;height:.64rem;margin-right:.2rem}.left-bar .left-sec .num[data-v-228d5832]{font-size:.38rem;color:#c7cfee;margin-bottom:.06rem}.left-bar .left-sec .desc[data-v-228d5832]{font-size:.18rem;color:#5865b5}.right-bar[data-v-228d5832]{opacity:.9;line-height:1;padding:.24rem;background-image:linear-gradient(149deg,rgba(49,51,143,.8),rgba(22,23,86,.8) 93%)}.right-bar .right-top[data-v-228d5832]{display:-webkit-box;display:-ms-flexbox;display:flex;padding:0 0 .5rem 0}.right-bar .right-top .num[data-v-228d5832]{font-size:.26rem;color:#c7cfee;margin-bottom:.1rem}.right-bar .right-top .desc[data-v-228d5832]{font-size:.18rem;color:#5865b5;margin-bottom:.24rem}.right-bar .right-top .desc[data-v-228d5832]:last-child{margin-bottom:0}.right-bar .right-middle[data-v-228d5832]{padding:.3rem 0 0 0;position:relative;display:-webkit-box;display:-ms-flexbox;display:flex}.right-bar .right-middle-left[data-v-228d5832]{width:100%;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:distribute;justify-content:space-around}.right-bar .right-middle .middle-sec[data-v-228d5832]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-bottom:.2rem}.right-bar .right-middle .middle-sec[data-v-228d5832]:last-child{margin-bottom:0}.right-bar .right-middle .middle-sec .icon[data-v-228d5832]{line-height:1;width:.46rem;height:.46rem;border-radius:.23rem;font-size:.18rem;color:#c7cfee;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:1px solid #5865b5;margin-bottom:.1rem}.right-bar .right-middle .middle-sec .desc[data-v-228d5832]{font-size:.18rem;color:#5865b5}.right-bar .right-middle .middle-sec .desc .num[data-v-228d5832]{color:#c7cfee}.right-bar .right-bottom[data-v-228d5832]{padding:.29rem .15rem .52rem 0;position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.right-bar .right-bottom .bottom-sec[data-v-228d5832]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.right-bar .right-bottom .bottom-sec img[data-v-228d5832]{width:.46rem;height:.46rem;margin-bottom:.1rem}.right-bar .right-bottom .bottom-sec .desc[data-v-228d5832]{font-size:.18rem;color:#5865b5}.right-bar .right-bottom .bottom-sec .desc .num[data-v-228d5832]{color:#c7cfee}.right-bar .sub-title[data-v-228d5832]{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:absolute;top:-.09rem}.right-bar .sub-title span[data-v-228d5832]{font-size:.18rem;color:#5865b5;padding-right:.126rem}.right-bar .sub-title hr[data-v-228d5832]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;border:none;height:1px;background:#5865b5;opacity:.66}.bottom-bar[data-v-228d5832]{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:absolute;bottom:.28rem}.bottom-bar .bottom-sec[data-v-228d5832]{line-height:1;margin-right:1.3rem}.bottom-bar .bottom-sec[data-v-228d5832]:last-child{margin:0}.bottom-bar .bottom-sec .num[data-v-228d5832]{color:#c7cfee;font-size:.38rem;margin-bottom:.1rem}.bottom-bar .bottom-sec .num .unit[data-v-228d5832]{color:#fff;font-size:.22rem;margin-left:.15rem}.bottom-bar .bottom-sec .desc[data-v-228d5832]{font-size:.18rem;color:#5865b5}.container #WebGL-output[data-v-00d9d690],.container[data-v-00d9d690]{height:100%} -------------------------------------------------------------------------------- /dist/img/gua.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/dist/img/gua.png -------------------------------------------------------------------------------- /dist/img/guide.93d8cc5b.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/dist/img/guide.93d8cc5b.gif -------------------------------------------------------------------------------- /dist/img/icon5.31ed868d.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/dist/img/icon5.31ed868d.png -------------------------------------------------------------------------------- /dist/img/load-1-1.1591169a.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/dist/img/load-1-1.1591169a.png -------------------------------------------------------------------------------- /dist/img/load-1-2.62b9c464.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/dist/img/load-1-2.62b9c464.png -------------------------------------------------------------------------------- /dist/img/load-1-3.ca117fb4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/dist/img/load-1-3.ca117fb4.png -------------------------------------------------------------------------------- /dist/img/load-2-1.44444b78.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/dist/img/load-2-1.44444b78.png -------------------------------------------------------------------------------- /dist/img/load-2-2.9f87da0e.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/dist/img/load-2-2.9f87da0e.png -------------------------------------------------------------------------------- /dist/img/load-2-3.56cadf50.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/dist/img/load-2-3.56cadf50.png -------------------------------------------------------------------------------- /dist/img/load-3-1.b78eedc8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/dist/img/load-3-1.b78eedc8.png -------------------------------------------------------------------------------- /dist/img/load-3-2.d3cafaa1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/dist/img/load-3-2.d3cafaa1.png -------------------------------------------------------------------------------- /dist/img/load-3-3.70f95863.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/dist/img/load-3-3.70f95863.png -------------------------------------------------------------------------------- /dist/img/load-4-1.74d30f83.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/dist/img/load-4-1.74d30f83.png -------------------------------------------------------------------------------- /dist/img/load-4-2.41df93d0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/dist/img/load-4-2.41df93d0.png -------------------------------------------------------------------------------- /dist/img/load-4-3.b3d5a546.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/dist/img/load-4-3.b3d5a546.png -------------------------------------------------------------------------------- /dist/img/load-5-1.0bdece5a.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/dist/img/load-5-1.0bdece5a.png -------------------------------------------------------------------------------- /dist/img/load-5-2.0e369fdd.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/dist/img/load-5-2.0e369fdd.png -------------------------------------------------------------------------------- /dist/img/load-5-3.016d9322.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/dist/img/load-5-3.016d9322.png -------------------------------------------------------------------------------- /dist/img/offline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/dist/img/offline.png -------------------------------------------------------------------------------- /dist/img/photobg.c0cb9df4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/dist/img/photobg.c0cb9df4.png -------------------------------------------------------------------------------- /dist/img/roadsign.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/dist/img/roadsign.png -------------------------------------------------------------------------------- /dist/img/run.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/dist/img/run.png -------------------------------------------------------------------------------- /dist/img/stop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/dist/img/stop.png -------------------------------------------------------------------------------- /dist/img/unload-1-1.8781be95.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/dist/img/unload-1-1.8781be95.png -------------------------------------------------------------------------------- /dist/img/unload-1-2.8c567cf2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/dist/img/unload-1-2.8c567cf2.png -------------------------------------------------------------------------------- /dist/img/unload-1-3.f30d43d7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/dist/img/unload-1-3.f30d43d7.png -------------------------------------------------------------------------------- /dist/img/unload-2-1.eec0aac7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/dist/img/unload-2-1.eec0aac7.png -------------------------------------------------------------------------------- /dist/img/unload-2-2.a84480c0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/dist/img/unload-2-2.a84480c0.png -------------------------------------------------------------------------------- /dist/img/unload-2-3.f0bf4350.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/dist/img/unload-2-3.f0bf4350.png -------------------------------------------------------------------------------- /dist/img/unload-3-1.6975837e.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/dist/img/unload-3-1.6975837e.png -------------------------------------------------------------------------------- /dist/img/unload-3-2.d9727a82.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/dist/img/unload-3-2.d9727a82.png -------------------------------------------------------------------------------- /dist/img/unload-3-3.101f4a4f.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/dist/img/unload-3-3.101f4a4f.png -------------------------------------------------------------------------------- /dist/img/unload-4-1.4a1acd4f.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/dist/img/unload-4-1.4a1acd4f.png -------------------------------------------------------------------------------- /dist/img/unload-4-2.d47e8d77.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/dist/img/unload-4-2.d47e8d77.png -------------------------------------------------------------------------------- /dist/img/unload-4-3.11a7b6bb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/dist/img/unload-4-3.11a7b6bb.png -------------------------------------------------------------------------------- /dist/img/unload-5-1.ff0df809.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/dist/img/unload-5-1.ff0df809.png -------------------------------------------------------------------------------- /dist/img/unload-5-2.04f43ff6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/dist/img/unload-5-2.04f43ff6.png -------------------------------------------------------------------------------- /dist/img/unload-5-3.cabb697f.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/dist/img/unload-5-3.cabb697f.png -------------------------------------------------------------------------------- /dist/img/world.d1cec69f.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/dist/img/world.d1cec69f.png -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | Three.js
-------------------------------------------------------------------------------- /dist/js/app.77cf02bf.js: -------------------------------------------------------------------------------- 1 | (function(e){function n(n){for(var r,c,o=n[0],i=n[1],d=n[2],f=0,l=[];f-1){var r=t("d966");document.querySelector("#guideGif").src=r}},showPic:function(e,n){e.picIndex=n},nextRound:function(e){e.roundIndex++,e.roundIndex>4&&(e.roundIndex=0)}},actions:{}}),y=t("5a89"),w=t("682a"),x=t.n(w),P=t("15a3"),O=t.n(P);t("3215");r["a"].config.productionTip=!1,window.THREE=y,window.TWEEN=x.a,r["a"].use(O.a),new r["a"]({router:k,store:v,render:function(e){return e(d)}}).$mount("#app")},"64a9":function(e,n,t){},d966:function(e,n,t){e.exports=t.p+"img/guide.93d8cc5b.gif"}}); 2 | //# sourceMappingURL=app.77cf02bf.js.map -------------------------------------------------------------------------------- /dist/js/chunk-1530f62a.7048bcc9.js: -------------------------------------------------------------------------------- 1 | (window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-1530f62a"],{"3cb9":function(t,i,a){"use strict";a.r(i);var e=function(){var t=this,i=t.$createElement,a=t._self._c||i;return a("div",{staticClass:"container"},[a("div",{ref:"stats"}),a("div",{ref:"canvas",attrs:{id:"WebGL-output"}})])},o=[],n=a("f383"),r=(Math.PI,new THREE.Group),s=new THREE.Group,d=[],c={mixins:[n["a"]],methods:{queryData:function(){for(var t=0;t<20;t++){var i=e(),a=e(i);d.push({main:a,vice:i})}function e(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:10,i=Math.round(Math.random()*t);return 0===i?.01:i}},initWebGL:function(){var t=this.initBasics(this.$refs.canvas,{position:{x:30,y:10,z:35},antialias:!0},{clearColor:15856113,shadowEnabled:!0}),i=t.scene,a=t.camera,e=t.renderer;this.scene=i,this.camera=a,this.renderer=e;var o=this.initStats(this.$refs.stats),n=this.addColumn();this.addLight(),this.addAxis(),this.linstenMouseMove(n);var d=this.addControl(),c=new THREE.Clock;r.add(s),i.add(r);var h=function t(){o.update();var n=c.getDelta();d.update(n),requestAnimationFrame(t),e.render(i,a)};h()},addColumn:function(){var t=this,i=[],a=new THREE.Group;return d.forEach(function(e,o){var n=t.initMaterial("MeshLambert",{color:7648993}),r=t.initMaterial("MeshLambert",{color:16758623}),s=t.initGeometry("Box",1.4,e.main,2),d=new THREE.Mesh(s,n);d.selfValue=Math.floor(e.main),d.position.set(2*o,e.main/2,0),d.castShadow=!0,d.receiveShadow=!0;var c=t.initGeometry("Box",1.4,e.vice,2),h=new THREE.Mesh(c,r);h.selfValue=Math.floor(e.vice),h.position.set(2*o,e.vice/2,-3),h.castShadow=!0,h.receiveShadow=!0,a.add(d),a.add(h),i.push(d),i.push(h)}),a.position.set(1,0,4.5),r.add(a),i},addLight:function(){var t=this.initLight("Ambient",{color:15658734}),i=this.initTarget(30,0,0),a=this.initLight("Directional",{color:9539985,position:{x:70,y:30,z:30},castShadow:!0,shadow:{camera:{near:2,far:120,left:-20,right:20,top:25,bottom:-20},mapSize:{width:2048,height:2048}}});a.target=i,r.add(t),r.add(a),this.light=a},addAxis:function(){for(var t=this,i=new THREE.Group,a=this.v3,e=40,o=12,n=6,s=(a(0,0,0),a(e,0,0)),d=a(e,0,n),c=a(0,0,n),h=(a(0,o,0),a(e,o,0),a(e,o,n),a(0,o,n)),l=[],u=5;u<=e;u+=4){var v=a(u,0,n+.6),f=a(u,0,0),p=a(u,o,0);l.push([v,f,p]),this.addAxisLabel(Math.floor(u/2+1),u,0,n+2)}for(var m=[],b=0;b<=o;b+=3){var w=a(0,b,0),E=a(e,b,0),x=a(0,b,n+.6);m.push([x,w,E]),this.addAxisLabel(b,0,b,n+2)}for(var g=[],M=0;M\n
\n
\n
\n \n
\n\n\n\n","import mod from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Shader.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Shader.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./Shader.vue?vue&type=template&id=3c5e54be&scoped=true&\"\nimport script from \"./Shader.vue?vue&type=script&lang=js&\"\nexport * from \"./Shader.vue?vue&type=script&lang=js&\"\nimport style0 from \"./Shader.vue?vue&type=style&index=0&id=3c5e54be&lang=less&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n \"3c5e54be\",\n null\n \n)\n\nexport default component.exports","import mod from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--10-oneOf-1-0!../../node_modules/css-loader/index.js??ref--10-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--10-oneOf-1-2!../../node_modules/less-loader/dist/cjs.js??ref--10-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Shader.vue?vue&type=style&index=0&id=3c5e54be&lang=less&scoped=true&\"; export default mod; export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--10-oneOf-1-0!../../node_modules/css-loader/index.js??ref--10-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--10-oneOf-1-2!../../node_modules/less-loader/dist/cjs.js??ref--10-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Shader.vue?vue&type=style&index=0&id=3c5e54be&lang=less&scoped=true&\""],"sourceRoot":""} -------------------------------------------------------------------------------- /dist/model/Cargo.mtl: -------------------------------------------------------------------------------- 1 | # WaveFront *.mtl file (generated by CINEMA 4D) 2 | 3 | newmtl Mat.4 4 | Kd 0.91000002622604 0.54600000381470 0.00000000000000 5 | Ks 1.00000000000000 1.00000000000000 1.00000000000000 6 | Ns 100 7 | illum 7 8 | 9 | -------------------------------------------------------------------------------- /dist/model/Cargo.obj: -------------------------------------------------------------------------------- 1 | # WaveFront *.obj file (generated by CINEMA 4D) 2 | 3 | mtllib ./Cargo.mtl 4 | 5 | v -87.86266546667407 -59.28410504491791 -236.00084166079779 6 | v -87.86266546667407 -44.75969129491794 -236.00084166079779 7 | v -73.33825171667409 -59.28410504491791 -236.00084166079779 8 | v -73.33825171667409 -44.75969129491794 -236.00084166079779 9 | v -73.33825171667409 -59.28410504491791 -221.47642791079784 10 | v -73.33825171667409 -44.75969129491794 -221.47642791079784 11 | v -87.86266546667407 -59.28410504491791 -221.47642791079784 12 | v -87.86266546667407 -44.75969129491794 -221.47642791079784 13 | # 8 vertices 14 | 15 | vt 0.00000000000000 -1.00000000000000 0.00000000000000 16 | vt 0.00000000000000 -0.00000000000000 0.00000000000000 17 | vt 1.00000000000000 -0.00000000000000 0.00000000000000 18 | vt 1.00000000000000 -1.00000000000000 0.00000000000000 19 | # 4 texture coordinates 20 | 21 | o Cube 22 | usemtl Mat.4 23 | f 1/4 2/3 4/2 3/1 24 | f 3/4 4/3 6/2 5/1 25 | f 5/4 6/3 8/2 7/1 26 | f 7/4 8/3 2/2 1/1 27 | f 2/4 8/3 6/2 4/1 28 | f 7/4 1/3 3/2 5/1 29 | 30 | v -87.86266546667407 -44.54240304635189 -236.06665695263436 31 | v -87.86266546667407 -30.01798929635193 -236.06665695263436 32 | v -73.33825171667409 -44.54240304635189 -236.06665695263436 33 | v -73.33825171667409 -30.01798929635193 -236.06665695263436 34 | v -73.33825171667409 -44.54240304635189 -221.54224320263441 35 | v -73.33825171667409 -30.01798929635193 -221.54224320263441 36 | v -87.86266546667407 -44.54240304635189 -221.54224320263441 37 | v -87.86266546667407 -30.01798929635193 -221.54224320263441 38 | # 8 vertices 39 | 40 | # 0 texture coordinate 41 | 42 | o Cube.4 43 | usemtl Mat.4 44 | f 9/4 10/3 12/2 11/1 45 | f 11/4 12/3 14/2 13/1 46 | f 13/4 14/3 16/2 15/1 47 | f 15/4 16/3 10/2 9/1 48 | f 10/4 16/3 14/2 12/1 49 | f 15/4 9/3 11/2 13/1 50 | 51 | v -87.86266546667407 -44.51909435477465 -205.57112530245934 52 | v -87.86266546667407 -29.99468060477469 -205.57112530245934 53 | v -73.33825171667409 -44.51909435477465 -205.57112530245934 54 | v -73.33825171667409 -29.99468060477469 -205.57112530245934 55 | v -73.33825171667409 -44.51909435477465 -191.04671155245939 56 | v -73.33825171667409 -29.99468060477469 -191.04671155245939 57 | v -87.86266546667407 -44.51909435477465 -191.04671155245939 58 | v -87.86266546667407 -29.99468060477469 -191.04671155245939 59 | # 8 vertices 60 | 61 | # 0 texture coordinate 62 | 63 | o Cube.7 64 | usemtl Mat.4 65 | f 17/4 18/3 20/2 19/1 66 | f 19/4 20/3 22/2 21/1 67 | f 21/4 22/3 24/2 23/1 68 | f 23/4 24/3 18/2 17/1 69 | f 18/4 24/3 22/2 20/1 70 | f 23/4 17/3 19/2 21/1 71 | 72 | v -87.86266546667407 -59.28410504491791 -205.57112530245934 73 | v -87.86266546667407 -44.75969129491794 -205.57112530245934 74 | v -73.33825171667409 -59.28410504491791 -205.57112530245934 75 | v -73.33825171667409 -44.75969129491794 -205.57112530245934 76 | v -73.33825171667409 -59.28410504491791 -191.04671155245939 77 | v -73.33825171667409 -44.75969129491794 -191.04671155245939 78 | v -87.86266546667407 -59.28410504491791 -191.04671155245939 79 | v -87.86266546667407 -44.75969129491794 -191.04671155245939 80 | # 8 vertices 81 | 82 | # 0 texture coordinate 83 | 84 | o Cube.1 85 | usemtl Mat.4 86 | f 25/4 26/3 28/2 27/1 87 | f 27/4 28/3 30/2 29/1 88 | f 29/4 30/3 32/2 31/1 89 | f 31/4 32/3 26/2 25/1 90 | f 26/4 32/3 30/2 28/1 91 | f 31/4 25/3 27/2 29/1 92 | 93 | v -87.86266546667407 -59.28410504491791 -251.09778371595650 94 | v -87.86266546667407 -44.75969129491794 -251.09778371595650 95 | v -73.33825171667409 -59.28410504491791 -251.09778371595650 96 | v -73.33825171667409 -44.75969129491794 -251.09778371595650 97 | v -73.33825171667409 -59.28410504491791 -236.57336996595654 98 | v -73.33825171667409 -44.75969129491794 -236.57336996595654 99 | v -87.86266546667407 -59.28410504491791 -236.57336996595654 100 | v -87.86266546667407 -44.75969129491794 -236.57336996595654 101 | # 8 vertices 102 | 103 | # 0 texture coordinate 104 | 105 | o Cube.2 106 | usemtl Mat.4 107 | f 33/4 34/3 36/2 35/1 108 | f 35/4 36/3 38/2 37/1 109 | f 37/4 38/3 40/2 39/1 110 | f 39/4 40/3 34/2 33/1 111 | f 34/4 40/3 38/2 36/1 112 | f 39/4 33/3 35/2 37/1 113 | 114 | v -87.86266546667407 -59.28410504491791 -220.91116098907867 115 | v -87.86266546667407 -44.75969129491794 -220.91116098907867 116 | v -73.33825171667409 -59.28410504491791 -220.91116098907867 117 | v -73.33825171667409 -44.75969129491794 -220.91116098907867 118 | v -73.33825171667409 -59.28410504491791 -206.38674723907872 119 | v -73.33825171667409 -44.75969129491794 -206.38674723907872 120 | v -87.86266546667407 -59.28410504491791 -206.38674723907872 121 | v -87.86266546667407 -44.75969129491794 -206.38674723907872 122 | # 8 vertices 123 | 124 | # 0 texture coordinate 125 | 126 | o Cube.3 127 | usemtl Mat.4 128 | f 41/4 42/3 44/2 43/1 129 | f 43/4 44/3 46/2 45/1 130 | f 45/4 46/3 48/2 47/1 131 | f 47/4 48/3 42/2 41/1 132 | f 42/4 48/3 46/2 44/1 133 | f 47/4 41/3 43/2 45/1 134 | 135 | v -72.67617060309404 -59.28410504491791 -236.00084166079779 136 | v -72.67617060309404 -44.75969129491794 -236.00084166079779 137 | v -58.15175685309406 -59.28410504491791 -236.00084166079779 138 | v -58.15175685309406 -44.75969129491794 -236.00084166079779 139 | v -58.15175685309406 -59.28410504491791 -221.47642791079784 140 | v -58.15175685309406 -44.75969129491794 -221.47642791079784 141 | v -72.67617060309404 -59.28410504491791 -221.47642791079784 142 | v -72.67617060309404 -44.75969129491794 -221.47642791079784 143 | # 8 vertices 144 | 145 | # 0 texture coordinate 146 | 147 | o Cube.5 148 | usemtl Mat.4 149 | f 49/4 50/3 52/2 51/1 150 | f 51/4 52/3 54/2 53/1 151 | f 53/4 54/3 56/2 55/1 152 | f 55/4 56/3 50/2 49/1 153 | f 50/4 56/3 54/2 52/1 154 | f 55/4 49/3 51/2 53/1 155 | 156 | v -57.73387150394749 -59.28410504491791 -220.91116098907867 157 | v -57.73387150394749 -44.75969129491794 -220.91116098907867 158 | v -43.20945775394753 -59.28410504491791 -220.91116098907867 159 | v -43.20945775394753 -44.75969129491794 -220.91116098907867 160 | v -43.20945775394753 -59.28410504491791 -206.38674723907872 161 | v -43.20945775394753 -44.75969129491794 -206.38674723907872 162 | v -57.73387150394749 -59.28410504491791 -206.38674723907872 163 | v -57.73387150394749 -44.75969129491794 -206.38674723907872 164 | # 8 vertices 165 | 166 | # 0 texture coordinate 167 | 168 | o Cube.6 169 | usemtl Mat.4 170 | f 57/4 58/3 60/2 59/1 171 | f 59/4 60/3 62/2 61/1 172 | f 61/4 62/3 64/2 63/1 173 | f 63/4 64/3 58/2 57/1 174 | f 58/4 64/3 62/2 60/1 175 | f 63/4 57/3 59/2 61/1 176 | 177 | -------------------------------------------------------------------------------- /dist/model/G7Trailer-back.mtl: -------------------------------------------------------------------------------- 1 | # ========================================================================== 2 | # Wavefront Material file 3 | # Exported by Red-i Productions' "Riptide Pro" 4 | # (a commercial plugin for Cinema 4D PC & Mac, R10 or later) 5 | # 6 | # Red-i Productions 7 | # http://skinprops.com 8 | # 9 | # ========================================================================== 10 | 11 | newmtl logo 12 | Kd 0.394523 0.099400 0.710000 13 | illum 1 14 | 15 | newmtl default_Mat 16 | illum 1 17 | 18 | newmtl Mat.1 19 | Kd 0.227356 0.227356 0.227356 20 | illum 1 21 | 22 | newmtl Mat.2 23 | Kd 0.500000 0.500000 0.500000 24 | illum 1 25 | 26 | newmtl Mat 27 | Kd 0.184000 0.409867 0.800000 28 | Tf 1.000000 1.000000 1.000000 29 | illum 1 30 | d 0.510000 31 | Ni 1.000000 32 | -------------------------------------------------------------------------------- /dist/model/G7Trailer-head.mtl: -------------------------------------------------------------------------------- 1 | # WaveFront *.mtl file (generated by CINEMA 4D) 2 | 3 | newmtl Mat.1 4 | Kd 0.22735564410686 0.22735564410686 0.22735564410686 5 | Ks 1.00000000000000 1.00000000000000 1.00000000000000 6 | Ns 100 7 | illum 7 8 | 9 | newmtl Mat.2 10 | Kd 0.50000000000000 0.50000000000000 0.50000000000000 11 | Ks 1.00000000000000 1.00000000000000 1.00000000000000 12 | Ns 100 13 | illum 7 14 | 15 | newmtl Mat 16 | Kd 0.18400000035763 0.40986666083336 0.80000001192093 17 | Ks 1.00000000000000 1.00000000000000 1.00000000000000 18 | Ns 100 19 | d 0.51 20 | Tf 1.00000000000000 1.00000000000000 1.00000000000000 21 | illum 7 22 | 23 | -------------------------------------------------------------------------------- /dist/model/forklift.mtl: -------------------------------------------------------------------------------- 1 | # WaveFront *.mtl file (generated by CINEMA 4D) 2 | 3 | newmtl Mat.1 4 | Kd 0.22735564410686 0.22735564410686 0.22735564410686 5 | Ks 1.00000000000000 1.00000000000000 1.00000000000000 6 | Ns 100 7 | illum 7 8 | 9 | newmtl Mat.5 10 | Kd 0.25586667656898 0.18400000035763 0.80000001192093 11 | Ks 1.00000000000000 1.00000000000000 1.00000000000000 12 | Ns 100 13 | d 0.51 14 | Tf 1.00000000000000 1.00000000000000 1.00000000000000 15 | illum 7 16 | 17 | newmtl Mat.3 18 | Kd 0.00000000000000 0.00000000000000 0.00000000000000 19 | Ks 1.00000000000000 1.00000000000000 1.00000000000000 20 | Ns 100 21 | illum 7 22 | 23 | -------------------------------------------------------------------------------- /mixin-new/math.js: -------------------------------------------------------------------------------- 1 | const { PI, sin, cos, tan, asin, acos, log, abs } = Math; 2 | 3 | export default { 4 | methods: { 5 | // 基础运算 6 | deg2rad(degree) { // 角度转弧度 7 | degree = Number(degree); 8 | return degree * PI / 180; 9 | }, 10 | rad2deg(radian) { // 弧度转角度 11 | radian = Number(radian); 12 | return radian * 180 / PI; 13 | }, 14 | power(v, num = 2) { // 求次方 15 | return Math.pow(v, num); 16 | }, 17 | vacuate(dataArr, distance = 0) { // 基于距离的数据抽稀 18 | let index = dataArr[0]; // 数组索引指针 19 | const arr = [index]; 20 | dataArr.forEach((item) => { 21 | if (this.calcDistance(item, index) > distance && arr.indexOf(item) < 0) { 22 | index = item; 23 | arr.push(index); 24 | } 25 | }); 26 | return arr; 27 | }, 28 | lglt2xy(lng, lat, params = { Mercator: true }) { // 经纬度转二维坐标，Mercator表示是否采用墨卡托投影方式 29 | const { scale, Mercator } = params; 30 | lng = this.deg2rad(lng); 31 | lat = this.deg2rad(lat); 32 | let x = lng; 33 | let y = Mercator ? sin(lat) * log(tan(PI / 4 + abs(lat / 2))) : lat; 34 | x = this.rad2deg(x); 35 | y = this.rad2deg(y); 36 | if (scale) { 37 | x *= scale; 38 | y *= scale; 39 | } 40 | return { x, y }; 41 | }, 42 | lglt2xyz(lng, lat, r) { // 经纬度转三维坐标 43 | lng = this.deg2rad(lng); 44 | lat = this.deg2rad(lat); 45 | const x = r * cos(lat) * sin(lng); 46 | const y = r * sin(lat); 47 | const z = r * cos(lat) * cos(lng); 48 | return { x, y, z }; 49 | }, 50 | splitArray(arr, num) { // 将数组随便拆分为指定个数 51 | const max = arr.length; 52 | const len = Math.ceil(max / num); 53 | const result = []; 54 | arr.sort(() => { 55 | const diff = Math.random() - Math.random(); 56 | return diff; 57 | }); 58 | for (let i = 0; i < max; i += len) { 59 | result.push(arr.slice(i, i + len)); 60 | } 61 | return result; 62 | }, 63 | randomColor() { 64 | let str = '#'; 65 | const numArr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F']; 66 | for (let i = 0; i < 6; i++) { 67 | const r = parseInt(Math.random() * 16); 68 | str += numArr[r]; 69 | } 70 | return str; 71 | }, 72 | world2screen(v, canvas) { // v 必须为 THREE.Vector 的实例 73 | if (v.constructor !== THREE.Vector3) { 74 | console.error('vector is not a example of THREE.Vector3'); 75 | return; 76 | } 77 | const location = v.project(this.camera); 78 | const hw = canvas.offsetWidth / 2; 79 | const hh = canvas.offsetHeight / 2; 80 | const x = Math.round(location.x * hw + hw); 81 | const y = Math.round(-location.y * hh + hh); 82 | return { x, y }; 83 | }, 84 | // 向量相关运算 85 | calcVectorLength(v) { // 计算模长 86 | return Math.sqrt(this.power(v.x) + this.power(v.y) + this.power(v.z)); 87 | }, 88 | calcDistance(p1, p2) { // 计算两点间隔 89 | const v = this.calcVector(p1, p2); 90 | const { x, y, z } = v; 91 | const d = this.calcVectorLength({ x, y, z }); 92 | return d; 93 | }, 94 | calcVector(start, end, isUnit = false) { // 计算两点生成的向量 95 | const x = end.x - start.x; 96 | const y = end.y - start.y; 97 | const z = end.z - start.z; 98 | let v; 99 | if (isUnit) { 100 | v = this.vectorUnit({ x, y, z }); 101 | } else { 102 | v = { x, y, z }; 103 | } 104 | return v; 105 | }, 106 | vectorUnit(v) { // 向量单位化 107 | const l = this.calcVectorLength(v); 108 | return { 109 | x: v.x / l, 110 | y: v.y / l, 111 | z: v.z / l, 112 | }; 113 | }, 114 | vectorAdd(v1, v2) { // 向量加法 115 | return { x: v1.x + v2.x, y: v1.y + v2.y, z: v1.z + v2.z }; 116 | }, 117 | vectorNumMultiply(v, num) { // 向量数乘 118 | return { x: v.x * num, y: v.y * num, z: v.z * num }; 119 | }, 120 | vectorMultiply(v1, v2) { // 向量点积 121 | return v1.x * v2.x + v1.y * v2.y + v1.z * v2.z; 122 | }, 123 | vectorProduct(v1, v2, isUnit) { // 向量叉积 124 | let v = { 125 | x: v1.y * v2.z - v1.z * v2.y, 126 | y: v1.z * v2.x - v1.x * v2.z, 127 | z: v1.x * v2.y - v1.y * v2.x, 128 | }; 129 | if (isUnit) { 130 | v = this.vectorUnit(v) 131 | } 132 | return v; 133 | }, 134 | calcVectorAngle(v1, v2) { // 计算两向量的夹角 135 | const v1L = this.calcVectorLength(v1); 136 | const v2L = this.calcVectorLength(v2); 137 | const vm = this.vectorMultiply(v1, v2); 138 | let rad = acos(vm / (v1L * v2L)); 139 | // 计算夹角为顺or逆时针 140 | const cross = v1.x * v2.y - (v1.y * v2.x); 141 | if (cross < 0) rad = -rad; 142 | return rad; 143 | }, 144 | calcOrthVector(v1, v2, angle, isUnit = false) { // 计算两向量的正交向量，等同于叉积 145 | const vp = this.vectorProduct(v1, v2); 146 | const v1L = this.calcVectorLength(v1); 147 | const v2L = this.calcVectorLength(v2); 148 | const den = v1L * v2L * sin(angle); 149 | let u = { 150 | x: vp.x / den, 151 | y: vp.y / den, 152 | z: vp.z / den, 153 | }; 154 | if (isUnit) { 155 | u = this.vectorUnit(u); 156 | } 157 | return u; 158 | }, 159 | // 矩阵相关运算 160 | calcDeterminant(A) { // 解行列式 161 | 162 | }, 163 | matrixMultiply(M, N) { // 矩阵乘法，左乘规律 MxN 164 | const mr = M.length; 165 | const mc = M[0].length; 166 | const nr = N.length; 167 | const nc = N[0].length; 168 | if (mc !== nr) { 169 | console.error('Illegal Matrix Multiplication.'); 170 | return; 171 | } 172 | const res = []; 173 | for (let i = 0; i < mr; i++) { 174 | const r = []; 175 | for (let j = 0; j < nc; j++) { 176 | const ele = 0; 177 | for (let k = 0; k < mc; k++) { 178 | ele += M[i][k] * N[k][j]; 179 | } 180 | r.push(ele); 181 | } 182 | res.push(r); 183 | } 184 | return res; 185 | }, 186 | }, 187 | }; -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "e", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build" 8 | }, 9 | "dependencies": { 10 | "@tweenjs/tween.js": "^17.3.0", 11 | "dat.gui": "^0.7.5", 12 | "latlon-geohash": "^1.1.0", 13 | "stats.js": "^0.17.0", 14 | "three": "^0.108.0", 15 | "vue": "^2.6.6", 16 | "vue-animate-number": "^0.4.2", 17 | "vue-router": "^3.0.1", 18 | "vuex": "^3.0.1" 19 | }, 20 | "devDependencies": { 21 | "@vue/cli-plugin-babel": "^3.5.0", 22 | "@vue/cli-service": "^3.7.0", 23 | "less": "^3.9.0", 24 | "less-loader": "^4.1.0", 25 | "vue-template-compiler": "^2.5.21" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | autoprefixer: {} 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /public/img/gua.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/public/img/gua.png -------------------------------------------------------------------------------- /public/img/negx.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/public/img/negx.jpg -------------------------------------------------------------------------------- /public/img/negy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/public/img/negy.jpg -------------------------------------------------------------------------------- /public/img/negz.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/public/img/negz.jpg -------------------------------------------------------------------------------- /public/img/offline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/public/img/offline.png -------------------------------------------------------------------------------- /public/img/posx.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/public/img/posx.jpg -------------------------------------------------------------------------------- /public/img/posy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/public/img/posy.jpg -------------------------------------------------------------------------------- /public/img/posz.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/public/img/posz.jpg -------------------------------------------------------------------------------- /public/img/roadsign.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/public/img/roadsign.png -------------------------------------------------------------------------------- /public/img/run.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/public/img/run.png -------------------------------------------------------------------------------- /public/img/stop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/public/img/stop.png -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Three.js 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /public/model/Cargo.mtl: -------------------------------------------------------------------------------- 1 | # WaveFront *.mtl file (generated by CINEMA 4D) 2 | 3 | newmtl Mat.4 4 | Kd 0.91000002622604 0.54600000381470 0.00000000000000 5 | Ks 1.00000000000000 1.00000000000000 1.00000000000000 6 | Ns 100 7 | illum 7 8 | 9 | -------------------------------------------------------------------------------- /public/model/Cargo.obj: -------------------------------------------------------------------------------- 1 | # WaveFront *.obj file (generated by CINEMA 4D) 2 | 3 | mtllib ./Cargo.mtl 4 | 5 | v -87.86266546667407 -59.28410504491791 -236.00084166079779 6 | v -87.86266546667407 -44.75969129491794 -236.00084166079779 7 | v -73.33825171667409 -59.28410504491791 -236.00084166079779 8 | v -73.33825171667409 -44.75969129491794 -236.00084166079779 9 | v -73.33825171667409 -59.28410504491791 -221.47642791079784 10 | v -73.33825171667409 -44.75969129491794 -221.47642791079784 11 | v -87.86266546667407 -59.28410504491791 -221.47642791079784 12 | v -87.86266546667407 -44.75969129491794 -221.47642791079784 13 | # 8 vertices 14 | 15 | vt 0.00000000000000 -1.00000000000000 0.00000000000000 16 | vt 0.00000000000000 -0.00000000000000 0.00000000000000 17 | vt 1.00000000000000 -0.00000000000000 0.00000000000000 18 | vt 1.00000000000000 -1.00000000000000 0.00000000000000 19 | # 4 texture coordinates 20 | 21 | o Cube 22 | usemtl Mat.4 23 | f 1/4 2/3 4/2 3/1 24 | f 3/4 4/3 6/2 5/1 25 | f 5/4 6/3 8/2 7/1 26 | f 7/4 8/3 2/2 1/1 27 | f 2/4 8/3 6/2 4/1 28 | f 7/4 1/3 3/2 5/1 29 | 30 | v -87.86266546667407 -44.54240304635189 -236.06665695263436 31 | v -87.86266546667407 -30.01798929635193 -236.06665695263436 32 | v -73.33825171667409 -44.54240304635189 -236.06665695263436 33 | v -73.33825171667409 -30.01798929635193 -236.06665695263436 34 | v -73.33825171667409 -44.54240304635189 -221.54224320263441 35 | v -73.33825171667409 -30.01798929635193 -221.54224320263441 36 | v -87.86266546667407 -44.54240304635189 -221.54224320263441 37 | v -87.86266546667407 -30.01798929635193 -221.54224320263441 38 | # 8 vertices 39 | 40 | # 0 texture coordinate 41 | 42 | o Cube.4 43 | usemtl Mat.4 44 | f 9/4 10/3 12/2 11/1 45 | f 11/4 12/3 14/2 13/1 46 | f 13/4 14/3 16/2 15/1 47 | f 15/4 16/3 10/2 9/1 48 | f 10/4 16/3 14/2 12/1 49 | f 15/4 9/3 11/2 13/1 50 | 51 | v -87.86266546667407 -44.51909435477465 -205.57112530245934 52 | v -87.86266546667407 -29.99468060477469 -205.57112530245934 53 | v -73.33825171667409 -44.51909435477465 -205.57112530245934 54 | v -73.33825171667409 -29.99468060477469 -205.57112530245934 55 | v -73.33825171667409 -44.51909435477465 -191.04671155245939 56 | v -73.33825171667409 -29.99468060477469 -191.04671155245939 57 | v -87.86266546667407 -44.51909435477465 -191.04671155245939 58 | v -87.86266546667407 -29.99468060477469 -191.04671155245939 59 | # 8 vertices 60 | 61 | # 0 texture coordinate 62 | 63 | o Cube.7 64 | usemtl Mat.4 65 | f 17/4 18/3 20/2 19/1 66 | f 19/4 20/3 22/2 21/1 67 | f 21/4 22/3 24/2 23/1 68 | f 23/4 24/3 18/2 17/1 69 | f 18/4 24/3 22/2 20/1 70 | f 23/4 17/3 19/2 21/1 71 | 72 | v -87.86266546667407 -59.28410504491791 -205.57112530245934 73 | v -87.86266546667407 -44.75969129491794 -205.57112530245934 74 | v -73.33825171667409 -59.28410504491791 -205.57112530245934 75 | v -73.33825171667409 -44.75969129491794 -205.57112530245934 76 | v -73.33825171667409 -59.28410504491791 -191.04671155245939 77 | v -73.33825171667409 -44.75969129491794 -191.04671155245939 78 | v -87.86266546667407 -59.28410504491791 -191.04671155245939 79 | v -87.86266546667407 -44.75969129491794 -191.04671155245939 80 | # 8 vertices 81 | 82 | # 0 texture coordinate 83 | 84 | o Cube.1 85 | usemtl Mat.4 86 | f 25/4 26/3 28/2 27/1 87 | f 27/4 28/3 30/2 29/1 88 | f 29/4 30/3 32/2 31/1 89 | f 31/4 32/3 26/2 25/1 90 | f 26/4 32/3 30/2 28/1 91 | f 31/4 25/3 27/2 29/1 92 | 93 | v -87.86266546667407 -59.28410504491791 -251.09778371595650 94 | v -87.86266546667407 -44.75969129491794 -251.09778371595650 95 | v -73.33825171667409 -59.28410504491791 -251.09778371595650 96 | v -73.33825171667409 -44.75969129491794 -251.09778371595650 97 | v -73.33825171667409 -59.28410504491791 -236.57336996595654 98 | v -73.33825171667409 -44.75969129491794 -236.57336996595654 99 | v -87.86266546667407 -59.28410504491791 -236.57336996595654 100 | v -87.86266546667407 -44.75969129491794 -236.57336996595654 101 | # 8 vertices 102 | 103 | # 0 texture coordinate 104 | 105 | o Cube.2 106 | usemtl Mat.4 107 | f 33/4 34/3 36/2 35/1 108 | f 35/4 36/3 38/2 37/1 109 | f 37/4 38/3 40/2 39/1 110 | f 39/4 40/3 34/2 33/1 111 | f 34/4 40/3 38/2 36/1 112 | f 39/4 33/3 35/2 37/1 113 | 114 | v -87.86266546667407 -59.28410504491791 -220.91116098907867 115 | v -87.86266546667407 -44.75969129491794 -220.91116098907867 116 | v -73.33825171667409 -59.28410504491791 -220.91116098907867 117 | v -73.33825171667409 -44.75969129491794 -220.91116098907867 118 | v -73.33825171667409 -59.28410504491791 -206.38674723907872 119 | v -73.33825171667409 -44.75969129491794 -206.38674723907872 120 | v -87.86266546667407 -59.28410504491791 -206.38674723907872 121 | v -87.86266546667407 -44.75969129491794 -206.38674723907872 122 | # 8 vertices 123 | 124 | # 0 texture coordinate 125 | 126 | o Cube.3 127 | usemtl Mat.4 128 | f 41/4 42/3 44/2 43/1 129 | f 43/4 44/3 46/2 45/1 130 | f 45/4 46/3 48/2 47/1 131 | f 47/4 48/3 42/2 41/1 132 | f 42/4 48/3 46/2 44/1 133 | f 47/4 41/3 43/2 45/1 134 | 135 | v -72.67617060309404 -59.28410504491791 -236.00084166079779 136 | v -72.67617060309404 -44.75969129491794 -236.00084166079779 137 | v -58.15175685309406 -59.28410504491791 -236.00084166079779 138 | v -58.15175685309406 -44.75969129491794 -236.00084166079779 139 | v -58.15175685309406 -59.28410504491791 -221.47642791079784 140 | v -58.15175685309406 -44.75969129491794 -221.47642791079784 141 | v -72.67617060309404 -59.28410504491791 -221.47642791079784 142 | v -72.67617060309404 -44.75969129491794 -221.47642791079784 143 | # 8 vertices 144 | 145 | # 0 texture coordinate 146 | 147 | o Cube.5 148 | usemtl Mat.4 149 | f 49/4 50/3 52/2 51/1 150 | f 51/4 52/3 54/2 53/1 151 | f 53/4 54/3 56/2 55/1 152 | f 55/4 56/3 50/2 49/1 153 | f 50/4 56/3 54/2 52/1 154 | f 55/4 49/3 51/2 53/1 155 | 156 | v -57.73387150394749 -59.28410504491791 -220.91116098907867 157 | v -57.73387150394749 -44.75969129491794 -220.91116098907867 158 | v -43.20945775394753 -59.28410504491791 -220.91116098907867 159 | v -43.20945775394753 -44.75969129491794 -220.91116098907867 160 | v -43.20945775394753 -59.28410504491791 -206.38674723907872 161 | v -43.20945775394753 -44.75969129491794 -206.38674723907872 162 | v -57.73387150394749 -59.28410504491791 -206.38674723907872 163 | v -57.73387150394749 -44.75969129491794 -206.38674723907872 164 | # 8 vertices 165 | 166 | # 0 texture coordinate 167 | 168 | o Cube.6 169 | usemtl Mat.4 170 | f 57/4 58/3 60/2 59/1 171 | f 59/4 60/3 62/2 61/1 172 | f 61/4 62/3 64/2 63/1 173 | f 63/4 64/3 58/2 57/1 174 | f 58/4 64/3 62/2 60/1 175 | f 63/4 57/3 59/2 61/1 176 | 177 | -------------------------------------------------------------------------------- /public/model/G7Trailer-back.mtl: -------------------------------------------------------------------------------- 1 | # ========================================================================== 2 | # Wavefront Material file 3 | # Exported by Red-i Productions' "Riptide Pro" 4 | # (a commercial plugin for Cinema 4D PC & Mac, R10 or later) 5 | # 6 | # Red-i Productions 7 | # http://skinprops.com 8 | # 9 | # ========================================================================== 10 | 11 | newmtl logo 12 | Kd 0.394523 0.099400 0.710000 13 | illum 1 14 | 15 | newmtl default_Mat 16 | illum 1 17 | 18 | newmtl Mat.1 19 | Kd 0.227356 0.227356 0.227356 20 | illum 1 21 | 22 | newmtl Mat.2 23 | Kd 0.500000 0.500000 0.500000 24 | illum 1 25 | 26 | newmtl Mat 27 | Kd 0.184000 0.409867 0.800000 28 | Tf 1.000000 1.000000 1.000000 29 | illum 1 30 | d 0.510000 31 | Ni 1.000000 32 | -------------------------------------------------------------------------------- /public/model/G7Trailer-head.mtl: -------------------------------------------------------------------------------- 1 | # WaveFront *.mtl file (generated by CINEMA 4D) 2 | 3 | newmtl Mat.1 4 | Kd 0.22735564410686 0.22735564410686 0.22735564410686 5 | Ks 1.00000000000000 1.00000000000000 1.00000000000000 6 | Ns 100 7 | illum 7 8 | 9 | newmtl Mat.2 10 | Kd 0.50000000000000 0.50000000000000 0.50000000000000 11 | Ks 1.00000000000000 1.00000000000000 1.00000000000000 12 | Ns 100 13 | illum 7 14 | 15 | newmtl Mat 16 | Kd 0.18400000035763 0.40986666083336 0.80000001192093 17 | Ks 1.00000000000000 1.00000000000000 1.00000000000000 18 | Ns 100 19 | d 0.51 20 | Tf 1.00000000000000 1.00000000000000 1.00000000000000 21 | illum 7 22 | 23 | -------------------------------------------------------------------------------- /public/model/forklift.mtl: -------------------------------------------------------------------------------- 1 | # WaveFront *.mtl file (generated by CINEMA 4D) 2 | 3 | newmtl Mat.1 4 | Kd 0.22735564410686 0.22735564410686 0.22735564410686 5 | Ks 1.00000000000000 1.00000000000000 1.00000000000000 6 | Ns 100 7 | illum 7 8 | 9 | newmtl Mat.5 10 | Kd 0.25586667656898 0.18400000035763 0.80000001192093 11 | Ks 1.00000000000000 1.00000000000000 1.00000000000000 12 | Ns 100 13 | d 0.51 14 | Tf 1.00000000000000 1.00000000000000 1.00000000000000 15 | illum 7 16 | 17 | newmtl Mat.3 18 | Kd 0.00000000000000 0.00000000000000 0.00000000000000 19 | Ks 1.00000000000000 1.00000000000000 1.00000000000000 20 | Ns 100 21 | illum 7 22 | 23 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 14 | -------------------------------------------------------------------------------- /src/assets/css/base.less: -------------------------------------------------------------------------------- 1 | * { 2 | margin:0; 3 | padding:0; 4 | box-sizing: border-box; 5 | } 6 | *:before, 7 | *:after { 8 | box-sizing: border-box; 9 | } 10 | html { 11 | font-size: 5.208333vw; 12 | height: 100%; 13 | } 14 | body { 15 | font-size: .16rem; 16 | height: 100%; 17 | } 18 | .container { 19 | width: 100%; 20 | height: 100%; 21 | #WebGL-output { 22 | height: 100%; 23 | } 24 | .num-tips { 25 | position: absolute; 26 | left: 50%; 27 | padding: 2px 3px; 28 | background-color: red; 29 | font-size: 18px; 30 | } 31 | } 32 | #canvas { 33 | position: absolute; 34 | z-index: 999; 35 | top: 0; 36 | right: 0; 37 | } 38 | -------------------------------------------------------------------------------- /src/assets/imgs/gua.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/src/assets/imgs/gua.png -------------------------------------------------------------------------------- /src/assets/imgs/guide.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/src/assets/imgs/guide.gif -------------------------------------------------------------------------------- /src/assets/imgs/icon1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/src/assets/imgs/icon1.png -------------------------------------------------------------------------------- /src/assets/imgs/icon10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/src/assets/imgs/icon10.png -------------------------------------------------------------------------------- /src/assets/imgs/icon11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/src/assets/imgs/icon11.png -------------------------------------------------------------------------------- /src/assets/imgs/icon12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/src/assets/imgs/icon12.png -------------------------------------------------------------------------------- /src/assets/imgs/icon13.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/src/assets/imgs/icon13.png -------------------------------------------------------------------------------- /src/assets/imgs/icon2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/src/assets/imgs/icon2.png -------------------------------------------------------------------------------- /src/assets/imgs/icon3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/src/assets/imgs/icon3.png -------------------------------------------------------------------------------- /src/assets/imgs/icon4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/src/assets/imgs/icon4.png -------------------------------------------------------------------------------- /src/assets/imgs/icon5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/src/assets/imgs/icon5.png -------------------------------------------------------------------------------- /src/assets/imgs/icon6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/src/assets/imgs/icon6.png -------------------------------------------------------------------------------- /src/assets/imgs/icon7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/src/assets/imgs/icon7.png -------------------------------------------------------------------------------- /src/assets/imgs/icon8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/src/assets/imgs/icon8.png -------------------------------------------------------------------------------- /src/assets/imgs/icon9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/src/assets/imgs/icon9.png -------------------------------------------------------------------------------- /src/assets/imgs/load-1-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/src/assets/imgs/load-1-1.png -------------------------------------------------------------------------------- /src/assets/imgs/load-1-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/src/assets/imgs/load-1-2.png -------------------------------------------------------------------------------- /src/assets/imgs/load-1-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/src/assets/imgs/load-1-3.png -------------------------------------------------------------------------------- /src/assets/imgs/load-2-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/src/assets/imgs/load-2-1.png -------------------------------------------------------------------------------- /src/assets/imgs/load-2-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/src/assets/imgs/load-2-2.png -------------------------------------------------------------------------------- /src/assets/imgs/load-2-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/src/assets/imgs/load-2-3.png -------------------------------------------------------------------------------- /src/assets/imgs/load-3-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/src/assets/imgs/load-3-1.png -------------------------------------------------------------------------------- /src/assets/imgs/load-3-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/src/assets/imgs/load-3-2.png -------------------------------------------------------------------------------- /src/assets/imgs/load-3-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/src/assets/imgs/load-3-3.png -------------------------------------------------------------------------------- /src/assets/imgs/load-4-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/src/assets/imgs/load-4-1.png -------------------------------------------------------------------------------- /src/assets/imgs/load-4-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/src/assets/imgs/load-4-2.png -------------------------------------------------------------------------------- /src/assets/imgs/load-4-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/src/assets/imgs/load-4-3.png -------------------------------------------------------------------------------- /src/assets/imgs/load-5-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/src/assets/imgs/load-5-1.png -------------------------------------------------------------------------------- /src/assets/imgs/load-5-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/src/assets/imgs/load-5-2.png -------------------------------------------------------------------------------- /src/assets/imgs/load-5-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/src/assets/imgs/load-5-3.png -------------------------------------------------------------------------------- /src/assets/imgs/negx.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/src/assets/imgs/negx.jpg -------------------------------------------------------------------------------- /src/assets/imgs/negy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/src/assets/imgs/negy.jpg -------------------------------------------------------------------------------- /src/assets/imgs/negz.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/src/assets/imgs/negz.jpg -------------------------------------------------------------------------------- /src/assets/imgs/offline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/src/assets/imgs/offline.png -------------------------------------------------------------------------------- /src/assets/imgs/photobg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/src/assets/imgs/photobg.png -------------------------------------------------------------------------------- /src/assets/imgs/posx.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/src/assets/imgs/posx.jpg -------------------------------------------------------------------------------- /src/assets/imgs/posy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/src/assets/imgs/posy.jpg -------------------------------------------------------------------------------- /src/assets/imgs/posz.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/src/assets/imgs/posz.jpg -------------------------------------------------------------------------------- /src/assets/imgs/roadsign.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/src/assets/imgs/roadsign.png -------------------------------------------------------------------------------- /src/assets/imgs/run.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/src/assets/imgs/run.png -------------------------------------------------------------------------------- /src/assets/imgs/stop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/src/assets/imgs/stop.png -------------------------------------------------------------------------------- /src/assets/imgs/unload-1-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/src/assets/imgs/unload-1-1.png -------------------------------------------------------------------------------- /src/assets/imgs/unload-1-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/src/assets/imgs/unload-1-2.png -------------------------------------------------------------------------------- /src/assets/imgs/unload-1-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/src/assets/imgs/unload-1-3.png -------------------------------------------------------------------------------- /src/assets/imgs/unload-2-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/src/assets/imgs/unload-2-1.png -------------------------------------------------------------------------------- /src/assets/imgs/unload-2-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/src/assets/imgs/unload-2-2.png -------------------------------------------------------------------------------- /src/assets/imgs/unload-2-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/src/assets/imgs/unload-2-3.png -------------------------------------------------------------------------------- /src/assets/imgs/unload-3-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/src/assets/imgs/unload-3-1.png -------------------------------------------------------------------------------- /src/assets/imgs/unload-3-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/src/assets/imgs/unload-3-2.png -------------------------------------------------------------------------------- /src/assets/imgs/unload-3-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/src/assets/imgs/unload-3-3.png -------------------------------------------------------------------------------- /src/assets/imgs/unload-4-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/src/assets/imgs/unload-4-1.png -------------------------------------------------------------------------------- /src/assets/imgs/unload-4-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/src/assets/imgs/unload-4-2.png -------------------------------------------------------------------------------- /src/assets/imgs/unload-4-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/src/assets/imgs/unload-4-3.png -------------------------------------------------------------------------------- /src/assets/imgs/unload-5-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/src/assets/imgs/unload-5-1.png -------------------------------------------------------------------------------- /src/assets/imgs/unload-5-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/src/assets/imgs/unload-5-2.png -------------------------------------------------------------------------------- /src/assets/imgs/unload-5-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/src/assets/imgs/unload-5-3.png -------------------------------------------------------------------------------- /src/assets/imgs/volume.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/src/assets/imgs/volume.png -------------------------------------------------------------------------------- /src/assets/imgs/world.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Darylxyx/Threejs-Examples/5e90886374f5342aae005ff323d3f93a6a1d7505/src/assets/imgs/world.png -------------------------------------------------------------------------------- /src/assets/model/Cargo.mtl: -------------------------------------------------------------------------------- 1 | # WaveFront *.mtl file (generated by CINEMA 4D) 2 | 3 | newmtl Mat.4 4 | Kd 0.91000002622604 0.54600000381470 0.00000000000000 5 | Ks 1.00000000000000 1.00000000000000 1.00000000000000 6 | Ns 100 7 | illum 7 8 | 9 | -------------------------------------------------------------------------------- /src/assets/model/Cargo.obj: -------------------------------------------------------------------------------- 1 | # WaveFront *.obj file (generated by CINEMA 4D) 2 | 3 | mtllib ./Cargo.mtl 4 | 5 | v -87.86266546667407 -59.28410504491791 -236.00084166079779 6 | v -87.86266546667407 -44.75969129491794 -236.00084166079779 7 | v -73.33825171667409 -59.28410504491791 -236.00084166079779 8 | v -73.33825171667409 -44.75969129491794 -236.00084166079779 9 | v -73.33825171667409 -59.28410504491791 -221.47642791079784 10 | v -73.33825171667409 -44.75969129491794 -221.47642791079784 11 | v -87.86266546667407 -59.28410504491791 -221.47642791079784 12 | v -87.86266546667407 -44.75969129491794 -221.47642791079784 13 | # 8 vertices 14 | 15 | vt 0.00000000000000 -1.00000000000000 0.00000000000000 16 | vt 0.00000000000000 -0.00000000000000 0.00000000000000 17 | vt 1.00000000000000 -0.00000000000000 0.00000000000000 18 | vt 1.00000000000000 -1.00000000000000 0.00000000000000 19 | # 4 texture coordinates 20 | 21 | o Cube 22 | usemtl Mat.4 23 | f 1/4 2/3 4/2 3/1 24 | f 3/4 4/3 6/2 5/1 25 | f 5/4 6/3 8/2 7/1 26 | f 7/4 8/3 2/2 1/1 27 | f 2/4 8/3 6/2 4/1 28 | f 7/4 1/3 3/2 5/1 29 | 30 | v -87.86266546667407 -44.54240304635189 -236.06665695263436 31 | v -87.86266546667407 -30.01798929635193 -236.06665695263436 32 | v -73.33825171667409 -44.54240304635189 -236.06665695263436 33 | v -73.33825171667409 -30.01798929635193 -236.06665695263436 34 | v -73.33825171667409 -44.54240304635189 -221.54224320263441 35 | v -73.33825171667409 -30.01798929635193 -221.54224320263441 36 | v -87.86266546667407 -44.54240304635189 -221.54224320263441 37 | v -87.86266546667407 -30.01798929635193 -221.54224320263441 38 | # 8 vertices 39 | 40 | # 0 texture coordinate 41 | 42 | o Cube.4 43 | usemtl Mat.4 44 | f 9/4 10/3 12/2 11/1 45 | f 11/4 12/3 14/2 13/1 46 | f 13/4 14/3 16/2 15/1 47 | f 15/4 16/3 10/2 9/1 48 | f 10/4 16/3 14/2 12/1 49 | f 15/4 9/3 11/2 13/1 50 | 51 | v -87.86266546667407 -44.51909435477465 -205.57112530245934 52 | v -87.86266546667407 -29.99468060477469 -205.57112530245934 53 | v -73.33825171667409 -44.51909435477465 -205.57112530245934 54 | v -73.33825171667409 -29.99468060477469 -205.57112530245934 55 | v -73.33825171667409 -44.51909435477465 -191.04671155245939 56 | v -73.33825171667409 -29.99468060477469 -191.04671155245939 57 | v -87.86266546667407 -44.51909435477465 -191.04671155245939 58 | v -87.86266546667407 -29.99468060477469 -191.04671155245939 59 | # 8 vertices 60 | 61 | # 0 texture coordinate 62 | 63 | o Cube.7 64 | usemtl Mat.4 65 | f 17/4 18/3 20/2 19/1 66 | f 19/4 20/3 22/2 21/1 67 | f 21/4 22/3 24/2 23/1 68 | f 23/4 24/3 18/2 17/1 69 | f 18/4 24/3 22/2 20/1 70 | f 23/4 17/3 19/2 21/1 71 | 72 | v -87.86266546667407 -59.28410504491791 -205.57112530245934 73 | v -87.86266546667407 -44.75969129491794 -205.57112530245934 74 | v -73.33825171667409 -59.28410504491791 -205.57112530245934 75 | v -73.33825171667409 -44.75969129491794 -205.57112530245934 76 | v -73.33825171667409 -59.28410504491791 -191.04671155245939 77 | v -73.33825171667409 -44.75969129491794 -191.04671155245939 78 | v -87.86266546667407 -59.28410504491791 -191.04671155245939 79 | v -87.86266546667407 -44.75969129491794 -191.04671155245939 80 | # 8 vertices 81 | 82 | # 0 texture coordinate 83 | 84 | o Cube.1 85 | usemtl Mat.4 86 | f 25/4 26/3 28/2 27/1 87 | f 27/4 28/3 30/2 29/1 88 | f 29/4 30/3 32/2 31/1 89 | f 31/4 32/3 26/2 25/1 90 | f 26/4 32/3 30/2 28/1 91 | f 31/4 25/3 27/2 29/1 92 | 93 | v -87.86266546667407 -59.28410504491791 -251.09778371595650 94 | v -87.86266546667407 -44.75969129491794 -251.09778371595650 95 | v -73.33825171667409 -59.28410504491791 -251.09778371595650 96 | v -73.33825171667409 -44.75969129491794 -251.09778371595650 97 | v -73.33825171667409 -59.28410504491791 -236.57336996595654 98 | v -73.33825171667409 -44.75969129491794 -236.57336996595654 99 | v -87.86266546667407 -59.28410504491791 -236.57336996595654 100 | v -87.86266546667407 -44.75969129491794 -236.57336996595654 101 | # 8 vertices 102 | 103 | # 0 texture coordinate 104 | 105 | o Cube.2 106 | usemtl Mat.4 107 | f 33/4 34/3 36/2 35/1 108 | f 35/4 36/3 38/2 37/1 109 | f 37/4 38/3 40/2 39/1 110 | f 39/4 40/3 34/2 33/1 111 | f 34/4 40/3 38/2 36/1 112 | f 39/4 33/3 35/2 37/1 113 | 114 | v -87.86266546667407 -59.28410504491791 -220.91116098907867 115 | v -87.86266546667407 -44.75969129491794 -220.91116098907867 116 | v -73.33825171667409 -59.28410504491791 -220.91116098907867 117 | v -73.33825171667409 -44.75969129491794 -220.91116098907867 118 | v -73.33825171667409 -59.28410504491791 -206.38674723907872 119 | v -73.33825171667409 -44.75969129491794 -206.38674723907872 120 | v -87.86266546667407 -59.28410504491791 -206.38674723907872 121 | v -87.86266546667407 -44.75969129491794 -206.38674723907872 122 | # 8 vertices 123 | 124 | # 0 texture coordinate 125 | 126 | o Cube.3 127 | usemtl Mat.4 128 | f 41/4 42/3 44/2 43/1 129 | f 43/4 44/3 46/2 45/1 130 | f 45/4 46/3 48/2 47/1 131 | f 47/4 48/3 42/2 41/1 132 | f 42/4 48/3 46/2 44/1 133 | f 47/4 41/3 43/2 45/1 134 | 135 | v -72.67617060309404 -59.28410504491791 -236.00084166079779 136 | v -72.67617060309404 -44.75969129491794 -236.00084166079779 137 | v -58.15175685309406 -59.28410504491791 -236.00084166079779 138 | v -58.15175685309406 -44.75969129491794 -236.00084166079779 139 | v -58.15175685309406 -59.28410504491791 -221.47642791079784 140 | v -58.15175685309406 -44.75969129491794 -221.47642791079784 141 | v -72.67617060309404 -59.28410504491791 -221.47642791079784 142 | v -72.67617060309404 -44.75969129491794 -221.47642791079784 143 | # 8 vertices 144 | 145 | # 0 texture coordinate 146 | 147 | o Cube.5 148 | usemtl Mat.4 149 | f 49/4 50/3 52/2 51/1 150 | f 51/4 52/3 54/2 53/1 151 | f 53/4 54/3 56/2 55/1 152 | f 55/4 56/3 50/2 49/1 153 | f 50/4 56/3 54/2 52/1 154 | f 55/4 49/3 51/2 53/1 155 | 156 | v -57.73387150394749 -59.28410504491791 -220.91116098907867 157 | v -57.73387150394749 -44.75969129491794 -220.91116098907867 158 | v -43.20945775394753 -59.28410504491791 -220.91116098907867 159 | v -43.20945775394753 -44.75969129491794 -220.91116098907867 160 | v -43.20945775394753 -59.28410504491791 -206.38674723907872 161 | v -43.20945775394753 -44.75969129491794 -206.38674723907872 162 | v -57.73387150394749 -59.28410504491791 -206.38674723907872 163 | v -57.73387150394749 -44.75969129491794 -206.38674723907872 164 | # 8 vertices 165 | 166 | # 0 texture coordinate 167 | 168 | o Cube.6 169 | usemtl Mat.4 170 | f 57/4 58/3 60/2 59/1 171 | f 59/4 60/3 62/2 61/1 172 | f 61/4 62/3 64/2 63/1 173 | f 63/4 64/3 58/2 57/1 174 | f 58/4 64/3 62/2 60/1 175 | f 63/4 57/3 59/2 61/1 176 | 177 | -------------------------------------------------------------------------------- /src/assets/model/G7Trailer-back.mtl: -------------------------------------------------------------------------------- 1 | # ========================================================================== 2 | # Wavefront Material file 3 | # Exported by Red-i Productions' "Riptide Pro" 4 | # (a commercial plugin for Cinema 4D PC & Mac, R10 or later) 5 | # 6 | # Red-i Productions 7 | # http://skinprops.com 8 | # 9 | # ========================================================================== 10 | 11 | newmtl logo 12 | Kd 0.394523 0.099400 0.710000 13 | illum 1 14 | 15 | newmtl default_Mat 16 | illum 1 17 | 18 | newmtl Mat.1 19 | Kd 0.227356 0.227356 0.227356 20 | illum 1 21 | 22 | newmtl Mat.2 23 | Kd 0.500000 0.500000 0.500000 24 | illum 1 25 | 26 | newmtl Mat 27 | Kd 0.184000 0.409867 0.800000 28 | Tf 1.000000 1.000000 1.000000 29 | illum 1 30 | d 0.510000 31 | Ni 1.000000 32 | -------------------------------------------------------------------------------- /src/assets/model/G7Trailer-head.mtl: -------------------------------------------------------------------------------- 1 | # WaveFront *.mtl file (generated by CINEMA 4D) 2 | 3 | newmtl Mat.1 4 | Kd 0.22735564410686 0.22735564410686 0.22735564410686 5 | Ks 1.00000000000000 1.00000000000000 1.00000000000000 6 | Ns 100 7 | illum 7 8 | 9 | newmtl Mat.2 10 | Kd 0.50000000000000 0.50000000000000 0.50000000000000 11 | Ks 1.00000000000000 1.00000000000000 1.00000000000000 12 | Ns 100 13 | illum 7 14 | 15 | newmtl Mat 16 | Kd 0.18400000035763 0.40986666083336 0.80000001192093 17 | Ks 1.00000000000000 1.00000000000000 1.00000000000000 18 | Ns 100 19 | d 0.51 20 | Tf 1.00000000000000 1.00000000000000 1.00000000000000 21 | illum 7 22 | 23 | -------------------------------------------------------------------------------- /src/assets/model/forklift.mtl: -------------------------------------------------------------------------------- 1 | # WaveFront *.mtl file (generated by CINEMA 4D) 2 | 3 | newmtl Mat.1 4 | Kd 0.22735564410686 0.22735564410686 0.22735564410686 5 | Ks 1.00000000000000 1.00000000000000 1.00000000000000 6 | Ns 100 7 | illum 7 8 | 9 | newmtl Mat.5 10 | Kd 0.25586667656898 0.18400000035763 0.80000001192093 11 | Ks 1.00000000000000 1.00000000000000 1.00000000000000 12 | Ns 100 13 | d 0.51 14 | Tf 1.00000000000000 1.00000000000000 1.00000000000000 15 | illum 7 16 | 17 | newmtl Mat.3 18 | Kd 0.00000000000000 0.00000000000000 0.00000000000000 19 | Ks 1.00000000000000 1.00000000000000 1.00000000000000 20 | Ns 100 21 | illum 7 22 | 23 | -------------------------------------------------------------------------------- /src/components/cardborder.vue: -------------------------------------------------------------------------------- 1 | 13 | 18 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from './App.vue'; 3 | import router from './router'; 4 | import store from './store'; 5 | import * as THREE from 'three'; 6 | import TWEEN from '@tweenjs/tween.js'; 7 | import VueAnimateNumber from 'vue-animate-number'; 8 | 9 | import '@/assets/css/base.less'; 10 | 11 | Vue.config.productionTip = false; 12 | window.THREE = THREE; 13 | window.TWEEN = TWEEN; 14 | 15 | Vue.use(VueAnimateNumber); 16 | 17 | new Vue({ 18 | router, 19 | store, 20 | render: h => h(App) 21 | }).$mount('#app'); -------------------------------------------------------------------------------- /src/mixins/createBuilding.js: -------------------------------------------------------------------------------- 1 | export default { 2 | methods: { 3 | createBuilding() { 4 | const buildGroup = new THREE.Group(); 5 | const buildingMat = this.initMaterial('MeshLambert', { 6 | color: 0x182038, 7 | }); 8 | for (let i = 0; i < 7; i++) { 9 | const height = 20 * Math.random() + 10; 10 | const geom = this.initGeometry('Cube', 14, height, 14); 11 | const building = new THREE.Mesh(geom, buildingMat); 12 | building.position.set((i - 3) * 14, height / 2, 0); 13 | buildGroup.add(building); 14 | } 15 | return buildGroup; 16 | }, 17 | }, 18 | }; -------------------------------------------------------------------------------- /src/mixins/createCurve.js: -------------------------------------------------------------------------------- 1 | export default { 2 | methods: { 3 | initCurveParams() { 4 | const params = { 5 | radius: 48, 6 | innerRadius: 36, 7 | outerRadius: 60, 8 | offsetX: 80, 9 | buildWidth: 4, 10 | buildLengh: 4, 11 | lineWidth: 0.7, 12 | lineLength: 7, 13 | }; 14 | this.curveParams = params; 15 | }, 16 | createCurve() { 17 | this.initCurveParams(); 18 | const curveGroup = new THREE.Group(); 19 | const road = this.createRoad(); 20 | curveGroup.add(road); 21 | const flowers = this.createCurveFlower(); 22 | curveGroup.add(flowers); 23 | const buildings = this.createRoadBuilding(); 24 | curveGroup.add(buildings); 25 | return curveGroup; 26 | }, 27 | createRoad() { 28 | const p = this.curveParams; 29 | const roadGroup = new THREE.Group(); 30 | const pointsArr = []; 31 | const ir = p.innerRadius; 32 | for (let i = 0; i < 5; i++) { 33 | const r = ir + (i * 6); 34 | const arr = []; 35 | for (let rad = this.PI * 1.5; rad < this.PI * 2.5; rad += 0.005) { 36 | const x = r * this.cos(rad); 37 | const z = r * this.sin(rad); 38 | arr.push(this.v3(x, 0, z)); 39 | } 40 | pointsArr.push(arr); 41 | } 42 | pointsArr.forEach((item, index) => { 43 | let line; 44 | if (index === 2) return; 45 | if (index % 2 === 0) { 46 | line = this.initLine(item, { 47 | color: this.lineColor, 48 | opacity: 0.3, 49 | transparent: true, 50 | }); 51 | } else { 52 | line = this.initLine(item, { 53 | color: this.lineColor, 54 | opacity: 0.3, 55 | transparent: true, 56 | dashSize: 5, 57 | gapSize: 4, 58 | }, true); 59 | } 60 | roadGroup.add(line); 61 | }); 62 | roadGroup.position.x = 80; 63 | return roadGroup; 64 | }, 65 | createCurveFlower() { 66 | const flowerGroup = new THREE.Group(); 67 | const p = this.curveParams; 68 | const r = p.radius; 69 | for (let rad = this.PI * 1.5; rad < this.PI * 2.5; rad += 0.14) { 70 | const x = r * this.cos(rad); 71 | const z = r * this.sin(rad); 72 | const flower = this.createFlower(1, 7.5, true); 73 | flower.position.set(x, 0, z); 74 | flower.rotation.y = -rad; 75 | flowerGroup.add(flower); 76 | } 77 | flowerGroup.position.x = 80; 78 | return flowerGroup; 79 | }, 80 | createRoadBuilding() { 81 | const p = this.curveParams; 82 | const buildingGroup = new THREE.Group(); 83 | const buildingMat = this.initMaterial('MeshLambert', { 84 | color: 0x182038, 85 | transparent: true, 86 | opacity: 0.7, 87 | }); 88 | const initBuilding = (d, r) => { 89 | const height = Math.random() * 10 + 2; 90 | const buildingGeom = this.initGeometry('Cube', p.buildWidth, height, p.buildLengh); 91 | const building = new THREE.Mesh(buildingGeom, buildingMat); 92 | building.position.set(r * this.cos(d) + p.offsetX, height / 2, r * this.sin(d)); 93 | building.rotation.y = - d; 94 | buildingGroup.add(building); 95 | }; 96 | for (let d = this.PI / 2 * 3; d <= this.PI / 2 * 5; d += 0.2) { 97 | initBuilding(d, p.innerRadius - 10); 98 | } 99 | for (let d = this.PI / 2 * 3; d <= this.PI / 2 * 5; d += 0.25) { 100 | initBuilding(d, p.innerRadius - 15); 101 | } 102 | for (let d = this.PI / 2 * 3; d <= this.PI / 2 * 5; d += 0.15) { 103 | initBuilding(d, p.outerRadius + 10); 104 | } 105 | for (let d = this.PI / 2 * 3; d <= this.PI / 2 * 5; d += 0.12) { 106 | initBuilding(d, p.outerRadius + 15); 107 | } 108 | return buildingGroup; 109 | }, 110 | createRoadSigns() { // 创建路牌 111 | const signGroup = new THREE.Group(); 112 | const signBoardGeom = this.initGeometry(''); 113 | return signGroup; 114 | }, 115 | }, 116 | }; -------------------------------------------------------------------------------- /src/mixins/createRoad.js: -------------------------------------------------------------------------------- 1 | export default { 2 | methods: { 3 | createAllRoad() { 4 | const roadsGroup = new THREE.Group(); 5 | const mat = this.initMaterial('MeshLambert', { 6 | color: 0x1E2642, 7 | }); 8 | const road1Geom = this.initGeometry('Plane', 135, 10); 9 | const road1 = new THREE.Mesh(road1Geom, mat); 10 | road1.rotation.x = -this.PI / 2; 11 | road1.position.set(13, 0, 57); 12 | roadsGroup.add(road1); 13 | 14 | const road2 = new THREE.Mesh(road1Geom, mat); 15 | road2.rotation.x = -this.PI / 2; 16 | road2.position.set(13, 0, -57); 17 | roadsGroup.add(road2); 18 | 19 | const road3Geom = this.initGeometry('Ring', 10, 20, 20, 1, this.PI, this.PI / 2); 20 | const road3 = new THREE.Mesh(road3Geom, mat); 21 | road3.rotation.x = -this.PI / 2; 22 | road3.position.set(-54, 0, 42); 23 | roadsGroup.add(road3); 24 | 25 | const road4Geom = this.initGeometry('Ring', 10, 20, 20, 1, this.PI * 0.5, this.PI / 2); 26 | const road4 = new THREE.Mesh(road4Geom, mat); 27 | road4.rotation.x = -this.PI / 2; 28 | road4.position.set(-54, 0, -42); 29 | roadsGroup.add(road4); 30 | 31 | const road5Geom = this.initGeometry('Plane', 10, 30); 32 | const road5 = new THREE.Mesh(road5Geom, mat); 33 | road5.rotation.x = -this.PI / 2; 34 | road5.position.set(-69, 0, 27); 35 | roadsGroup.add(road5); 36 | 37 | const road6 = new THREE.Mesh(road5Geom, mat); 38 | road6.rotation.x = -this.PI / 2; 39 | road6.position.set(-69, 0, -27); 40 | roadsGroup.add(road6); 41 | 42 | return roadsGroup; 43 | }, 44 | }, 45 | }; -------------------------------------------------------------------------------- /src/mixins/createTruck.js: -------------------------------------------------------------------------------- 1 | // 车辆模型 2 | import 'three/examples/js/loaders/OBJLoader.js'; 3 | import 'three/examples/js/loaders/MTLLoader.js'; 4 | 5 | const { TWEEN } = window; 6 | let goodIndex = 0; 7 | export default { 8 | methods: { 9 | initTruckParam() { // 初始卡车辆参数 10 | const params = { 11 | width: 2, 12 | height: 2, 13 | headLength: 1.7, 14 | trailerLength: 5, 15 | wheelWidth: 0.55, 16 | wheelDiameter: 0.4, 17 | modelScale: 0.04, 18 | goodSize: 0.4, 19 | goodOffset: 0.01, 20 | }; 21 | this.truckParmas = params; 22 | }, 23 | async createTruck() { // 创建卡车 24 | this.initTruckParam(); 25 | const truck = await this.loadModel(); 26 | this.headGroup.add(truck[0]); 27 | this.headGroup.position.y = 2.3; 28 | this.backGroup.add(truck[1]); 29 | this.backGroup.position.y = 2.3; 30 | this.createGoods(); 31 | for (let i = 0; i < 3; i++) { 32 | const signal = this.createSignal(); 33 | this[`signal${i+1}`] = signal; 34 | if (i === 0) { 35 | this.headGroup.add(signal); 36 | } else { 37 | this.backGroup.add(signal); 38 | } 39 | } 40 | }, 41 | loadModel() { 42 | const p = this.truckParmas; 43 | const headPromise = new Promise((resolve, reject) => { 44 | const headGroup = new THREE.Group(); 45 | const mtlLoader = new THREE.MTLLoader(); 46 | mtlLoader.load('./model/G7Trailer-head.mtl', (mat) => { 47 | mat.preload(); 48 | const objLoader = new THREE.OBJLoader(); 49 | objLoader.setMaterials(mat); 50 | objLoader.load('./model/G7Trailer-head.obj', (obj) => { 51 | obj.scale.set(p.modelScale, p.modelScale, p.modelScale); 52 | obj.position.z = 3.5; 53 | headGroup.add(obj); 54 | headGroup.position.z = -3.5; 55 | resolve(headGroup); 56 | }); 57 | }); 58 | }); 59 | const backPromise = new Promise((resolve, reject) => { 60 | const backGroup = new THREE.Group(); 61 | const mtlLoader = new THREE.MTLLoader(); 62 | mtlLoader.load('./model/G7Trailer-back.mtl', (mat) => { 63 | mat.preload(); 64 | const objLoader = new THREE.OBJLoader(); 65 | objLoader.setMaterials(mat); 66 | objLoader.load('./model/G7Trailer-back.obj', (obj) => { 67 | obj.scale.set(p.modelScale, p.modelScale, p.modelScale); 68 | obj.position.z = 3.5; 69 | backGroup.add(obj); 70 | backGroup.position.z = -3.5; 71 | resolve(backGroup); 72 | }); 73 | }); 74 | }); 75 | return Promise.all([headPromise, backPromise]); 76 | }, 77 | createGoods() { 78 | this.goodsList = []; 79 | const p = this.truckParmas; 80 | const matrix = [ 81 | [ 82 | [1, 1, 1, 1], 83 | [1, 1, 1, 1], 84 | [1, 1, 1, 1], 85 | [1, 1, 1, 1], 86 | ], 87 | [ 88 | [1, 1, 1, 1], 89 | [1, 1, 1, 1], 90 | [1, 1, 1, 1], 91 | [1, 1, 1, 1], 92 | [1, 1, 1, 1], 93 | ], 94 | [ 95 | [1, 1, 1, 1], 96 | [1, 1, 1, 1], 97 | [1, 1, 1, 1], 98 | [1, 1, 1, 1], 99 | ], 100 | [ 101 | [1, 1, 0, 1], 102 | [1, 1, 1, 1], 103 | [1, 1, 1, 1], 104 | [1, 1, 1, 1], 105 | ], 106 | [ 107 | [1, 0, 0, 0], 108 | [1, 1, 0, 1], 109 | [1, 1, 1, 1], 110 | [1, 1, 1, 1], 111 | ], 112 | [ 113 | [0, 0, 0, 1], 114 | [1, 1, 0, 1], 115 | [1, 1, 1, 1], 116 | [1, 1, 1, 1], 117 | ], 118 | [ 119 | [1, 0, 0, 0], 120 | [1, 0, 0, 1], 121 | [1, 1, 0, 1], 122 | [1, 1, 1, 1], 123 | [1, 1, 1, 1], 124 | ], 125 | [ 126 | [1, 1, 0, 1], 127 | [1, 1, 0, 1], 128 | [1, 1, 1, 1], 129 | [1, 1, 1, 1], 130 | [1, 1, 1, 1], 131 | ], 132 | [ 133 | [0, 0, 0, 1], 134 | [1, 1, 1, 1], 135 | [1, 1, 1, 1], 136 | [1, 1, 1, 1], 137 | [1, 1, 1, 1], 138 | ], 139 | [ 140 | [1, 0, 0, 0], 141 | [1, 0, 0, 1], 142 | [1, 1, 1, 1], 143 | [1, 1, 1, 1], 144 | [1, 1, 1, 1], 145 | ], 146 | [ 147 | [1, 1, 0, 1], 148 | [1, 1, 1, 1], 149 | [1, 1, 1, 1], 150 | [1, 1, 1, 1], 151 | ], 152 | [ 153 | [0, 0, 0, 1], 154 | [1, 0, 1, 1], 155 | [1, 1, 1, 1], 156 | [1, 1, 1, 1], 157 | ], 158 | [ 159 | [1, 0, 0, 1], 160 | [1, 1, 1, 1], 161 | [1, 1, 1, 1], 162 | ], 163 | [ 164 | [0, 0, 0, 1], 165 | [1, 0, 1, 1], 166 | [1, 1, 1, 1], 167 | ], 168 | [ 169 | [0, 0, 0, 1], 170 | [1, 0, 1, 1], 171 | [1, 1, 1, 1], 172 | ], 173 | [ 174 | [1, 0, 0, 0], 175 | [1, 1, 1, 1], 176 | ], 177 | ]; 178 | const initGoods = (x, y, z) => { 179 | const goodsGeom = this.initGeometry('Cube', p.goodSize, p.goodSize, p.goodSize); 180 | const goodsMat = this.initMaterial('MeshLambert', { 181 | color: 0xFFA500, 182 | }); 183 | const goods = new THREE.Mesh(goodsGeom, goodsMat); 184 | goods.scale.set(0.001, 0.001, 0.001); 185 | goods.inTween = this.initGoodTween('in', goods, goodIndex, 0.001, 1); 186 | goods.outTween = this.initGoodTween('out', goods, 211 - goodIndex, 1, 0.001); 187 | goods.position.set(x, y, z); 188 | this.goodsList.push(goods); 189 | goodIndex++; 190 | }; 191 | matrix.forEach((z, zi) => { 192 | for (let yi = z.length - 1; yi > -1; yi--) { 193 | const y = z[yi]; 194 | y.forEach((x, xi) => { 195 | if (x) { 196 | const goodX = (xi - (y.length - 1) / 2) * (p.goodOffset + p.goodSize); 197 | const goodY = (z.length - 1 - yi) * (p.goodOffset + p.goodSize) - 1.1; 198 | const goodZ = zi * (p.goodSize + p.goodOffset) - 4.5; 199 | initGoods(goodX, goodY, goodZ); 200 | } 201 | }); 202 | } 203 | }); 204 | this.goodsGroup.position.z = 3.5; 205 | this.backGroup.children[0].add(this.goodsGroup); 206 | }, 207 | initGoodTween(type, obj, i, now, target) { 208 | const _this = this; 209 | const data = {scale: now}; 210 | function onStart() { 211 | if (type === 'in') { 212 | _this.goodsGroup.add(obj); 213 | } 214 | } 215 | function onUpdate(o) { 216 | obj.scale.set(o.scale, o.scale, o.scale); 217 | } 218 | function onComplete() { 219 | data.scale = now; 220 | if (type === 'out') { 221 | _this.goodsGroup.remove(obj); 222 | } 223 | } 224 | const duration = 200; 225 | const tween = new TWEEN.Tween(data) 226 | .to({scale: target}, duration) 227 | .onStart(onStart) 228 | .onUpdate(onUpdate) 229 | .onComplete(onComplete) 230 | .easing(TWEEN.Easing.Sinusoidal.InOut) 231 | .delay(i * 50); 232 | return tween; 233 | }, 234 | createSignal() { 235 | const signalGroup = new THREE.Group(); 236 | const initSignal = (size, opacity) => { 237 | const signalGeom = this.initGeometry('Sphere', size, 30, 30, 0, this.PI * 2, 0, this.PI * 2); 238 | const signalMat = this.initMaterial('MeshBasic', { 239 | color: 0xED4AFF, 240 | transparent: true, 241 | opacity, 242 | }); 243 | const signal = new THREE.Mesh(signalGeom, signalMat); 244 | signal.scale.set(0.001, 0.001, 0.001); 245 | return signal; 246 | }; 247 | signalGroup.add(initSignal(0.12, 0.8)); 248 | signalGroup.add(initSignal(0.2, 0.4)); 249 | this.initSignalTween(signalGroup); 250 | return signalGroup; 251 | }, 252 | initSignalTween(group) { 253 | const obj = {index: 0.5}; 254 | function onStart() { 255 | group.scale.set(1, 1, 1); 256 | } 257 | function onUpdate(o) { 258 | group.children[0].scale.set(o.index, o.index, o.index); 259 | group.children[1].scale.set(o.index, o.index, o.index); 260 | } 261 | function onStop() { 262 | group.scale.set(0.001, 0.001, 0.001); 263 | } 264 | const duration = 1000; 265 | const tweenIn = new TWEEN.Tween(obj) 266 | .to({index: 1}, duration) 267 | .onStart(onStart) 268 | .onUpdate(onUpdate) 269 | .onStop(onStop); 270 | const tweenOut = new TWEEN.Tween(obj) 271 | .to({index: 0.5}, duration) 272 | .onStart(onStart) 273 | .onUpdate(onUpdate) 274 | .onStop(onStop); 275 | tweenIn.chain(tweenOut); 276 | tweenOut.chain(tweenIn); 277 | group.tween = tweenIn; 278 | }, 279 | }, 280 | }; -------------------------------------------------------------------------------- /src/mixins/math.js: -------------------------------------------------------------------------------- 1 | const { PI, sin, cos } = Math; 2 | 3 | export default { 4 | methods: { 5 | deg2rad(degree) { // 角度转弧度 6 | degree = Number(degree); 7 | return degree * PI / 180; 8 | }, 9 | rad2deg(radian) { // 弧度转角度 10 | radian = Number(radian); 11 | return radian * 180 / PI; 12 | }, 13 | distance(p1, p2) { // 计算两点间距离 14 | const dx = Math.pow(p2.x - p1.x, 2); 15 | const dy = Math.pow(p2.y - p1.y, 2); 16 | const dz = Math.pow(p2.z - p2.z, 2); 17 | const d = Math.sqrt(dx + dy + dz); 18 | return d; 19 | }, 20 | vacuate(dataArr, distance = 0) { // 基于距离的数据抽稀 21 | let index = dataArr[0]; // 数组索引指针 22 | const arr = [index]; 23 | dataArr.forEach((item) => { 24 | if (this.distance(item, index) > distance && arr.indexOf(item) < 0) { 25 | index = item; 26 | arr.push(index); 27 | } 28 | }); 29 | return arr; 30 | }, 31 | SOD(data) { // secondOrderDeterminant, 解二阶行列式 32 | const a11 = data[0][0]; 33 | const a12 = data[0][1]; 34 | const a21 = data[1][0]; 35 | const a22 = data[1][1]; 36 | return a11 * a22 - a21 * a12; 37 | }, 38 | TOD(data) { // thirdOrderDeterminant, 解三阶行列式 39 | const a11 = data[0][0]; 40 | const a12 = data[0][1]; 41 | const a13 = data[0][2]; 42 | const a21 = data[1][0]; 43 | const a22 = data[1][1]; 44 | const a23 = data[1][2]; 45 | const a31 = data[2][0]; 46 | const a32 = data[2][1]; 47 | const a33 = data[2][2]; 48 | const res = (a11 * a22 * a33) + (a13 * a21 * a22) + (a12 * a23 * a31) - (a13 * a22 * a31) - (a12 * a21 * a33) - (a11 * a23 * a32); 49 | return res; 50 | }, 51 | lglt2xyz(lng, lat, r) { // 经纬度转三维坐标 52 | lng = this.deg2rad(lng); 53 | lat = this.deg2rad(lat); 54 | const x = r * cos(lat) * sin(lng); 55 | const y = r * sin(lat); 56 | const z = r * cos(lat) * cos(lng); 57 | return { x, y, z }; 58 | }, 59 | splitArray(arr, num) { // 将数组随便拆分为指定个数 60 | const max = arr.length; 61 | const len = Math.ceil(max / num); 62 | const result = []; 63 | arr.sort(() => { 64 | const diff = Math.random() - Math.random(); 65 | return diff; 66 | }); 67 | for (let i = 0; i < max; i += len) { 68 | result.push(arr.slice(i, i + len)); 69 | } 70 | return result; 71 | }, 72 | }, 73 | }; -------------------------------------------------------------------------------- /src/mixins/model/Cargo.mtl: -------------------------------------------------------------------------------- 1 | # WaveFront *.mtl file (generated by CINEMA 4D) 2 | 3 | newmtl Mat.4 4 | Kd 0.91000002622604 0.54600000381470 0.00000000000000 5 | Ks 1.00000000000000 1.00000000000000 1.00000000000000 6 | Ns 100 7 | illum 7 8 | 9 | -------------------------------------------------------------------------------- /src/mixins/model/Cargo.obj: -------------------------------------------------------------------------------- 1 | # WaveFront *.obj file (generated by CINEMA 4D) 2 | 3 | mtllib ./Cargo.mtl 4 | 5 | v -87.86266546667407 -59.28410504491791 -236.00084166079779 6 | v -87.86266546667407 -44.75969129491794 -236.00084166079779 7 | v -73.33825171667409 -59.28410504491791 -236.00084166079779 8 | v -73.33825171667409 -44.75969129491794 -236.00084166079779 9 | v -73.33825171667409 -59.28410504491791 -221.47642791079784 10 | v -73.33825171667409 -44.75969129491794 -221.47642791079784 11 | v -87.86266546667407 -59.28410504491791 -221.47642791079784 12 | v -87.86266546667407 -44.75969129491794 -221.47642791079784 13 | # 8 vertices 14 | 15 | vt 0.00000000000000 -1.00000000000000 0.00000000000000 16 | vt 0.00000000000000 -0.00000000000000 0.00000000000000 17 | vt 1.00000000000000 -0.00000000000000 0.00000000000000 18 | vt 1.00000000000000 -1.00000000000000 0.00000000000000 19 | # 4 texture coordinates 20 | 21 | o Cube 22 | usemtl Mat.4 23 | f 1/4 2/3 4/2 3/1 24 | f 3/4 4/3 6/2 5/1 25 | f 5/4 6/3 8/2 7/1 26 | f 7/4 8/3 2/2 1/1 27 | f 2/4 8/3 6/2 4/1 28 | f 7/4 1/3 3/2 5/1 29 | 30 | v -87.86266546667407 -44.54240304635189 -236.06665695263436 31 | v -87.86266546667407 -30.01798929635193 -236.06665695263436 32 | v -73.33825171667409 -44.54240304635189 -236.06665695263436 33 | v -73.33825171667409 -30.01798929635193 -236.06665695263436 34 | v -73.33825171667409 -44.54240304635189 -221.54224320263441 35 | v -73.33825171667409 -30.01798929635193 -221.54224320263441 36 | v -87.86266546667407 -44.54240304635189 -221.54224320263441 37 | v -87.86266546667407 -30.01798929635193 -221.54224320263441 38 | # 8 vertices 39 | 40 | # 0 texture coordinate 41 | 42 | o Cube.4 43 | usemtl Mat.4 44 | f 9/4 10/3 12/2 11/1 45 | f 11/4 12/3 14/2 13/1 46 | f 13/4 14/3 16/2 15/1 47 | f 15/4 16/3 10/2 9/1 48 | f 10/4 16/3 14/2 12/1 49 | f 15/4 9/3 11/2 13/1 50 | 51 | v -87.86266546667407 -44.51909435477465 -205.57112530245934 52 | v -87.86266546667407 -29.99468060477469 -205.57112530245934 53 | v -73.33825171667409 -44.51909435477465 -205.57112530245934 54 | v -73.33825171667409 -29.99468060477469 -205.57112530245934 55 | v -73.33825171667409 -44.51909435477465 -191.04671155245939 56 | v -73.33825171667409 -29.99468060477469 -191.04671155245939 57 | v -87.86266546667407 -44.51909435477465 -191.04671155245939 58 | v -87.86266546667407 -29.99468060477469 -191.04671155245939 59 | # 8 vertices 60 | 61 | # 0 texture coordinate 62 | 63 | o Cube.7 64 | usemtl Mat.4 65 | f 17/4 18/3 20/2 19/1 66 | f 19/4 20/3 22/2 21/1 67 | f 21/4 22/3 24/2 23/1 68 | f 23/4 24/3 18/2 17/1 69 | f 18/4 24/3 22/2 20/1 70 | f 23/4 17/3 19/2 21/1 71 | 72 | v -87.86266546667407 -59.28410504491791 -205.57112530245934 73 | v -87.86266546667407 -44.75969129491794 -205.57112530245934 74 | v -73.33825171667409 -59.28410504491791 -205.57112530245934 75 | v -73.33825171667409 -44.75969129491794 -205.57112530245934 76 | v -73.33825171667409 -59.28410504491791 -191.04671155245939 77 | v -73.33825171667409 -44.75969129491794 -191.04671155245939 78 | v -87.86266546667407 -59.28410504491791 -191.04671155245939 79 | v -87.86266546667407 -44.75969129491794 -191.04671155245939 80 | # 8 vertices 81 | 82 | # 0 texture coordinate 83 | 84 | o Cube.1 85 | usemtl Mat.4 86 | f 25/4 26/3 28/2 27/1 87 | f 27/4 28/3 30/2 29/1 88 | f 29/4 30/3 32/2 31/1 89 | f 31/4 32/3 26/2 25/1 90 | f 26/4 32/3 30/2 28/1 91 | f 31/4 25/3 27/2 29/1 92 | 93 | v -87.86266546667407 -59.28410504491791 -251.09778371595650 94 | v -87.86266546667407 -44.75969129491794 -251.09778371595650 95 | v -73.33825171667409 -59.28410504491791 -251.09778371595650 96 | v -73.33825171667409 -44.75969129491794 -251.09778371595650 97 | v -73.33825171667409 -59.28410504491791 -236.57336996595654 98 | v -73.33825171667409 -44.75969129491794 -236.57336996595654 99 | v -87.86266546667407 -59.28410504491791 -236.57336996595654 100 | v -87.86266546667407 -44.75969129491794 -236.57336996595654 101 | # 8 vertices 102 | 103 | # 0 texture coordinate 104 | 105 | o Cube.2 106 | usemtl Mat.4 107 | f 33/4 34/3 36/2 35/1 108 | f 35/4 36/3 38/2 37/1 109 | f 37/4 38/3 40/2 39/1 110 | f 39/4 40/3 34/2 33/1 111 | f 34/4 40/3 38/2 36/1 112 | f 39/4 33/3 35/2 37/1 113 | 114 | v -87.86266546667407 -59.28410504491791 -220.91116098907867 115 | v -87.86266546667407 -44.75969129491794 -220.91116098907867 116 | v -73.33825171667409 -59.28410504491791 -220.91116098907867 117 | v -73.33825171667409 -44.75969129491794 -220.91116098907867 118 | v -73.33825171667409 -59.28410504491791 -206.38674723907872 119 | v -73.33825171667409 -44.75969129491794 -206.38674723907872 120 | v -87.86266546667407 -59.28410504491791 -206.38674723907872 121 | v -87.86266546667407 -44.75969129491794 -206.38674723907872 122 | # 8 vertices 123 | 124 | # 0 texture coordinate 125 | 126 | o Cube.3 127 | usemtl Mat.4 128 | f 41/4 42/3 44/2 43/1 129 | f 43/4 44/3 46/2 45/1 130 | f 45/4 46/3 48/2 47/1 131 | f 47/4 48/3 42/2 41/1 132 | f 42/4 48/3 46/2 44/1 133 | f 47/4 41/3 43/2 45/1 134 | 135 | v -72.67617060309404 -59.28410504491791 -236.00084166079779 136 | v -72.67617060309404 -44.75969129491794 -236.00084166079779 137 | v -58.15175685309406 -59.28410504491791 -236.00084166079779 138 | v -58.15175685309406 -44.75969129491794 -236.00084166079779 139 | v -58.15175685309406 -59.28410504491791 -221.47642791079784 140 | v -58.15175685309406 -44.75969129491794 -221.47642791079784 141 | v -72.67617060309404 -59.28410504491791 -221.47642791079784 142 | v -72.67617060309404 -44.75969129491794 -221.47642791079784 143 | # 8 vertices 144 | 145 | # 0 texture coordinate 146 | 147 | o Cube.5 148 | usemtl Mat.4 149 | f 49/4 50/3 52/2 51/1 150 | f 51/4 52/3 54/2 53/1 151 | f 53/4 54/3 56/2 55/1 152 | f 55/4 56/3 50/2 49/1 153 | f 50/4 56/3 54/2 52/1 154 | f 55/4 49/3 51/2 53/1 155 | 156 | v -57.73387150394749 -59.28410504491791 -220.91116098907867 157 | v -57.73387150394749 -44.75969129491794 -220.91116098907867 158 | v -43.20945775394753 -59.28410504491791 -220.91116098907867 159 | v -43.20945775394753 -44.75969129491794 -220.91116098907867 160 | v -43.20945775394753 -59.28410504491791 -206.38674723907872 161 | v -43.20945775394753 -44.75969129491794 -206.38674723907872 162 | v -57.73387150394749 -59.28410504491791 -206.38674723907872 163 | v -57.73387150394749 -44.75969129491794 -206.38674723907872 164 | # 8 vertices 165 | 166 | # 0 texture coordinate 167 | 168 | o Cube.6 169 | usemtl Mat.4 170 | f 57/4 58/3 60/2 59/1 171 | f 59/4 60/3 62/2 61/1 172 | f 61/4 62/3 64/2 63/1 173 | f 63/4 64/3 58/2 57/1 174 | f 58/4 64/3 62/2 60/1 175 | f 63/4 57/3 59/2 61/1 176 | 177 | -------------------------------------------------------------------------------- /src/mixins/model/G7Trailer-back.mtl: -------------------------------------------------------------------------------- 1 | # ========================================================================== 2 | # Wavefront Material file 3 | # Exported by Red-i Productions' "Riptide Pro" 4 | # (a commercial plugin for Cinema 4D PC & Mac, R10 or later) 5 | # 6 | # Red-i Productions 7 | # http://skinprops.com 8 | # 9 | # ========================================================================== 10 | 11 | newmtl logo 12 | Kd 0.394523 0.099400 0.710000 13 | illum 1 14 | 15 | newmtl default_Mat 16 | illum 1 17 | 18 | newmtl Mat.1 19 | Kd 0.227356 0.227356 0.227356 20 | illum 1 21 | 22 | newmtl Mat.2 23 | Kd 0.500000 0.500000 0.500000 24 | illum 1 25 | 26 | newmtl Mat 27 | Kd 0.184000 0.409867 0.800000 28 | Tf 1.000000 1.000000 1.000000 29 | illum 1 30 | d 0.510000 31 | Ni 1.000000 32 | -------------------------------------------------------------------------------- /src/mixins/model/G7Trailer-head.mtl: -------------------------------------------------------------------------------- 1 | # WaveFront *.mtl file (generated by CINEMA 4D) 2 | 3 | newmtl Mat.1 4 | Kd 0.22735564410686 0.22735564410686 0.22735564410686 5 | Ks 1.00000000000000 1.00000000000000 1.00000000000000 6 | Ns 100 7 | illum 7 8 | 9 | newmtl Mat.2 10 | Kd 0.50000000000000 0.50000000000000 0.50000000000000 11 | Ks 1.00000000000000 1.00000000000000 1.00000000000000 12 | Ns 100 13 | illum 7 14 | 15 | newmtl Mat 16 | Kd 0.18400000035763 0.40986666083336 0.80000001192093 17 | Ks 1.00000000000000 1.00000000000000 1.00000000000000 18 | Ns 100 19 | d 0.51 20 | Tf 1.00000000000000 1.00000000000000 1.00000000000000 21 | illum 7 22 | 23 | -------------------------------------------------------------------------------- /src/mixins/model/forklift.mtl: -------------------------------------------------------------------------------- 1 | # WaveFront *.mtl file (generated by CINEMA 4D) 2 | 3 | newmtl Mat.1 4 | Kd 0.22735564410686 0.22735564410686 0.22735564410686 5 | Ks 1.00000000000000 1.00000000000000 1.00000000000000 6 | Ns 100 7 | illum 7 8 | 9 | newmtl Mat.5 10 | Kd 0.25586667656898 0.18400000035763 0.80000001192093 11 | Ks 1.00000000000000 1.00000000000000 1.00000000000000 12 | Ns 100 13 | d 0.51 14 | Tf 1.00000000000000 1.00000000000000 1.00000000000000 15 | illum 7 16 | 17 | newmtl Mat.3 18 | Kd 0.00000000000000 0.00000000000000 0.00000000000000 19 | Ks 1.00000000000000 1.00000000000000 1.00000000000000 20 | Ns 100 21 | illum 7 22 | 23 | -------------------------------------------------------------------------------- /src/mixins/threeMixin.js: -------------------------------------------------------------------------------- 1 | import Stats from 'stats.js'; 2 | import 'three/examples/js/controls/TrackballControls'; 3 | import 'three/examples/js/controls/OrbitControls'; 4 | 5 | const THREE = window.THREE; 6 | const TWEEN = window.TWEEN; 7 | const setList = ['position', 'rotation', 'scale']; // 需要通过 set 方法来设置的属性列表 8 | function assignment(target, params = {}, prevKey) { 9 | const keys = Object.keys(params); 10 | keys.forEach((key) => { 11 | const value = params[key]; 12 | if (setList.indexOf(key) > -1) { 13 | target[key].set(value.x, value.y, value.z); 14 | return; 15 | } 16 | if (key === 'color') { // 颜色属性只能通过 THREE.Color 赋值 17 | target[key] = new THREE.Color(value); 18 | return; 19 | } 20 | let nextTarget; 21 | if (!prevKey) { // 顶层 22 | nextTarget = target; 23 | } else { 24 | if (!target[prevKey]) target[prevKey] = {}; 25 | nextTarget = target[prevKey]; 26 | } 27 | if (typeof value === 'object') { 28 | assignment(nextTarget, value, key); 29 | } else { 30 | nextTarget[key] = value; 31 | } 32 | }); 33 | } 34 | 35 | export default { 36 | methods: { 37 | initBasics(canvasDom, cameraParams, rendererParams) { // 创建场景、相机、渲染器 38 | const W = canvasDom.offsetWidth; 39 | const H = canvasDom.offsetHeight; 40 | // 场景 41 | const scene = new THREE.Scene(); 42 | // 相机 43 | const cpDefault = { // fov: 视场角度；near: 近边距离；far: 远边距离 44 | fov: 50, 45 | near: 0.1, 46 | far: 1000, 47 | aspect: W / H, 48 | position: { x: -30, y: 40, z: 30 }, 49 | antialias: false, 50 | }; 51 | const cp = Object.assign(cpDefault, cameraParams); 52 | const camera = new THREE.PerspectiveCamera(cp.fov, cp.aspect, cp.near, cp.far); 53 | camera.position.set(cp.position.x, cp.position.y, cp.position.z); 54 | camera.lookAt(scene.position); 55 | // 渲染器 56 | const renderer = new THREE.WebGLRenderer({ antialias: cp.antialias }); 57 | const rpDefault = { clearColor: 0xeeeeee, shadowEnabled: false }; // shadowEnabled: 是否开启阴影 58 | const rp = Object.assign(rpDefault, rendererParams); 59 | renderer.setSize(W, H); 60 | renderer.setClearColor(rp.clearColor); 61 | renderer.shadowMap.enabled = rp.shadowEnabled; 62 | canvasDom.appendChild(renderer.domElement); 63 | renderer.render(scene, camera); 64 | 65 | this.listenResize(canvasDom, camera, renderer); 66 | 67 | return { 68 | scene, 69 | camera, 70 | renderer, 71 | }; 72 | }, 73 | initAxes(length = 30) { // 创建坐标轴 74 | return new THREE.AxesHelper(length); 75 | }, 76 | initStats(dom) { // 创建性能检测器 77 | const stats = new Stats(); 78 | const sd = stats.domElement; 79 | stats.setMode(0); 80 | sd.style.position = 'absolute'; 81 | sd.style.left = '0'; 82 | sd.style.top = '0'; 83 | dom.appendChild(sd); 84 | return stats; 85 | }, 86 | initLight(type, params = {}) { // 光源类型，颜色，其余参数 87 | const constructor = `${type}Light`; 88 | if (!this.constructorCheck(constructor)) return; 89 | const light = new THREE[constructor](); 90 | assignment(light, params); 91 | return light; 92 | }, 93 | initMaterial(type, params = {}) { // 创建材质 94 | const constructor = `${type}Material`; 95 | if (!this.constructorCheck(constructor)) return; 96 | const material = new THREE[constructor](); 97 | assignment(material, params); 98 | return material; 99 | }, 100 | initGeometry(type, ...params) { // 创建几何图形 101 | const constructor = `${type}Geometry`; 102 | if (!this.constructorCheck(constructor)) return; 103 | // const params = [].slice.call(arguments).slice(1); // ESLint 不支持 arguments 对象 104 | const geometry = new THREE[constructor](...params); 105 | return geometry; 106 | }, 107 | initLine(pointsList, params = {}, isDashed) { // 创建线 108 | const lines = new THREE.Geometry(); 109 | pointsList.forEach((p) => { 110 | lines.vertices.push(p); 111 | }); 112 | let mat; 113 | if (isDashed) { 114 | mat = new THREE.LineDashedMaterial(params); 115 | } else { 116 | mat = new THREE.LineBasicMaterial(params); 117 | } 118 | const line = new THREE.Line(lines, mat); 119 | if (isDashed) line.computeLineDistances(); 120 | return line; 121 | }, 122 | initTarget(x, y, z) { // 创建目标点 123 | const target = new THREE.Object3D(); 124 | target.position.set(x, y, z); 125 | return target; 126 | }, 127 | v2(x, y) { // 创建 Vector2 对象 128 | return new THREE.Vector2(x, y); 129 | }, 130 | v3(x, y, z) { // 创建 Vector3 对象 131 | return new THREE.Vector3(x, y, z); 132 | }, 133 | f3(p1, p2, p3) { // 创建 Face3 对象 134 | return new THREE.Face3(p1, p2, p3); 135 | }, 136 | color(color) { // 创建 Color 对象 137 | return new THREE.Color(color); 138 | }, 139 | listenResize(canvasDom, camera, renderer) { // 窗口自适应 140 | function onResize() { 141 | const W = canvasDom.offsetWidth; 142 | const H = canvasDom.offsetHeight; 143 | camera.aspect = W / H; 144 | camera.updateProjectionMatrix(); 145 | renderer.setSize(W, H); 146 | } 147 | window.addEventListener('resize', onResize, false); 148 | }, 149 | constructorCheck(target) { // 验证THREE对象下是否有指定构造器 150 | let result = true; 151 | if (typeof THREE[target] !== 'function') { 152 | console.warn(`THREE.${target} is not a constructor.`); 153 | result = false; 154 | } 155 | return result; 156 | }, 157 | createMultiMaterialObject(geometry, materials) { 158 | const group = new THREE.Group(); 159 | for (let i = 0, l = materials.length; i < l; i++) { 160 | group.add(new THREE.Mesh(geometry, materials[i])); 161 | } 162 | return group; 163 | }, 164 | initControls(type, camera, params = {}) { // 初始化相机控制器 165 | const constructor = `${type}Controls`; 166 | if (!this.constructorCheck(constructor)) return; 167 | const control = new THREE[constructor](camera); 168 | assignment(control, params); 169 | return control; 170 | }, 171 | listenEvent(eventName, camera, objList, callback) { // 监听鼠标&键盘行为 172 | function handleEvent(event) { 173 | let vector = new THREE.Vector3((event.clientX / window.innerWidth) * 2 - 1, -(event.clientY / window.innerHeight) * 2 + 1, 0.5); 174 | vector = vector.unproject(camera); 175 | const raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize()); 176 | const intersects = raycaster.intersectObjects(objList); 177 | callback && callback(intersects, event); 178 | } 179 | document.addEventListener(eventName, handleEvent, false); 180 | }, 181 | loadTexture(path) { // 材质loader 182 | return new THREE.TextureLoader().load(path); 183 | }, 184 | createPoints(geom, matParam = {}, mapParam = []) { // 创建粒子云 185 | const defaults = { 186 | color: 0xffffff, 187 | size: 1, 188 | map: this.generateSprite(mapParam), 189 | transparent: true, 190 | }; 191 | matParam = Object.assign({}, defaults, matParam); 192 | if (matParam.map) matParam.blending = THREE.AdditiveBlending; 193 | const material = new THREE.PointsMaterial(matParam); 194 | const cloud = new THREE.Points(geom, material); 195 | cloud.sortParticles = true; 196 | return cloud; 197 | }, 198 | generateSprite(params) { // 粒子云材质 map 函数 199 | const canvas = document.createElement('canvas'); 200 | canvas.width = 32; 201 | canvas.height = 32; 202 | const context = canvas.getContext('2d'); 203 | const gradient = context.createRadialGradient(canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, canvas.width / 2); 204 | const defaults = [{ 205 | pro: 0, 206 | color: 'rgba(255,255,255,1)', 207 | }, { 208 | pro: 0.9, 209 | color: 'rgba(255,255,255,1)', 210 | }, { 211 | pro: 1, 212 | color: 'rgba(0,0,0,1)', 213 | }]; 214 | const colorList = params.length ? params : defaults; 215 | colorList.forEach((item) => { 216 | gradient.addColorStop(item.pro, item.color); 217 | }); 218 | 219 | context.fillStyle = gradient; 220 | context.fillRect(0, 0, canvas.width, canvas.height); 221 | const texture = new THREE.Texture(canvas); 222 | texture.needsUpdate = true; 223 | return texture; 224 | }, 225 | bindTwinkle(target, params = {}) { // 添加闪烁动画 226 | const opaSrc = { opacity: 0 }; 227 | const defaults = { 228 | inTime: 500, 229 | duration: 0, 230 | outTime: 1000, 231 | delay: Math.floor(Math.random() * 3000), 232 | }; 233 | params = Object.assign({}, defaults, params); 234 | 235 | function onUpdate(obj) { 236 | if (target.material) target.material.opacity = obj.opacity; 237 | } 238 | 239 | const tween = new TWEEN.Tween(opaSrc) 240 | .to({ opacity: 1 }, params.inTime) 241 | .easing(TWEEN.Easing.Sinusoidal.InOut) 242 | .delay(params.delay) 243 | .onUpdate(onUpdate); 244 | const tweenBack = new TWEEN.Tween(opaSrc) 245 | .to({ opacity: 0 }, params.outTime) 246 | .easing(TWEEN.Easing.Sinusoidal.InOut) 247 | .delay(params.duration) 248 | .onUpdate(onUpdate); 249 | 250 | tween.chain(tweenBack); 251 | tweenBack.chain(tween); 252 | target.tween = tween; 253 | target.tweenBack = tweenBack; 254 | }, 255 | textSprite(message, params = {}) { 256 | const defaults = { 257 | canvasWidth: 128, 258 | canvasHeight: 128, 259 | fontFace: 'Arial', 260 | fontSize: 20, 261 | scale: 5, 262 | borderThickness: 4, 263 | textColor: '#000000', 264 | }; 265 | params = Object.assign({}, defaults, params); 266 | const canvas = document.createElement('canvas'); 267 | canvas.width = params.canvasWidth; 268 | canvas.height = params.canvasHeight; 269 | canvas.style.width = `${params.canvasWidth / 2}px`; 270 | canvas.style.height = `${params.canvasHeight / 2}px`; 271 | const context = canvas.getContext('2d'); 272 | context.font = `${params.fontSize}px ${params.fontFace}`; 273 | 274 | context.lineWidth = params.borderThickness; 275 | context.fillStyle = params.textColor; 276 | context.textAlign = 'center'; 277 | context.fillText(message, canvas.width / 2, canvas.height / 2 + (params.fontSize / 2.5)); 278 | 279 | const texture = new THREE.Texture(canvas); 280 | texture.needsUpdate = true; 281 | const spriteMaterial = new THREE.SpriteMaterial({ map: texture }); 282 | const sprite = new THREE.Sprite(spriteMaterial); 283 | sprite.scale.set(params.scale, params.scale, params.scale); 284 | return sprite; 285 | }, 286 | initTween(params) { 287 | const { start, end, duration, delay, easing, repeat, yoyo, onStart, onUpdate, onStop, onComplete } = params; 288 | const tween = new TWEEN.Tween(start) 289 | .to(end, duration); 290 | 291 | if (easing) tween.easing(TWEEN.Easing.Sinusoidal[easing]); 292 | if (delay) tween.delay(delay); 293 | if (repeat) tween.repeat(repeat); 294 | if (yoyo) tween.yoyo(true); 295 | 296 | if (onStart) tween.onStart(onStart); 297 | if (onUpdate) tween.onUpdate(onUpdate); 298 | if (onStop) tween.onStop(onStop); 299 | if (onComplete) tween.onComplete(onComplete); 300 | 301 | return tween; 302 | }, 303 | }, 304 | beforeDestroy() { 305 | if (!this.renderer) return; 306 | this.renderer.dispose(); 307 | this.renderer.forceContextLoss(); 308 | this.renderer.context = null; 309 | this.renderer.domElement = null; 310 | this.renderer = null; 311 | }, 312 | }; -------------------------------------------------------------------------------- /src/router.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Router from 'vue-router' 3 | import Index from './views/Index.vue' 4 | 5 | Vue.use(Router) 6 | 7 | export default new Router({ 8 | // mode: 'history', 9 | base: process.env.BASE_URL, 10 | routes: [ 11 | { 12 | path: '/', 13 | name: 'index', 14 | component: Index, 15 | }, 16 | // 点阵地球 17 | { 18 | path: '/earth', 19 | name: 'earth', 20 | component: () => import('./views/Earth'), 21 | }, 22 | // 3D地球 23 | { 24 | path: '/map', 25 | name: '3DMap', 26 | component: () => import('./views/Map3d'), 27 | }, 28 | { 29 | path: '/trailer', 30 | name: 'trailer', 31 | component: () => import('./views/Trailer'), 32 | }, 33 | // 柱状图 34 | { 35 | path: '/histogram', 36 | name: 'histogram', 37 | component: () => import('./views/Histogram'), 38 | }, 39 | // 饼图 40 | { 41 | path: '/pie', 42 | name: 'pieChart', 43 | component: () => import('./views/PieChart'), 44 | }, 45 | // 点状球 46 | { 47 | path: '/points', 48 | name: 'points', 49 | component: () => import('./views/Points'), 50 | }, 51 | // 着色器 52 | { 53 | path: '/shader', 54 | name: 'shader', 55 | component: () => import('./views/Shader'), 56 | }, 57 | // 反射 58 | { 59 | path: '/reflection', 60 | name: 'reflection', 61 | component: () => import('./views/Reflection'), 62 | } 63 | ] 64 | }) 65 | -------------------------------------------------------------------------------- /src/store.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Vuex from 'vuex' 3 | 4 | Vue.use(Vuex) 5 | 6 | export default new Vuex.Store({ 7 | state: { 8 | actCardList: [], 9 | title: '', 10 | titleType: '', 11 | connectProgress: '', 12 | picIndex: 0, 13 | roundIndex: 0, // 动画播放轮数，每轮展示的装卸货照片不同 14 | }, 15 | mutations: { 16 | updateUserInfo(state, userInfo) { 17 | if (state.userInfo) { 18 | state.userInfo = { ...state.userInfo, ...userInfo }; 19 | } else { 20 | state.userInfo = { ...userInfo }; 21 | } 22 | }, 23 | setTitle(state, params) { 24 | state.title = params.title; 25 | state.titleType = params.type || 'basic'; 26 | if (params.type === 'connect') { // 接挂阶段 27 | state.connectProgress = params.progress; 28 | } 29 | }, 30 | setActCardList(state, list) { 31 | state.actCardList = list; 32 | if (list.indexOf('guide') > -1) { 33 | // const url = require(`@/assets/imgs/guide.gif?${Math.round(Math.random() * 100)}`); 34 | const url = require('@/assets/imgs/guide.gif'); 35 | document.querySelector('#guideGif').src = url; 36 | } 37 | }, 38 | showPic(state, index) { 39 | state.picIndex = index; 40 | }, 41 | nextRound(state) { 42 | state.roundIndex++; 43 | if (state.roundIndex > 4) { 44 | state.roundIndex = 0; 45 | } 46 | }, 47 | }, 48 | actions: { 49 | 50 | } 51 | }) 52 | -------------------------------------------------------------------------------- /src/views/Histogram.vue: -------------------------------------------------------------------------------- 1 | 7 | 272 | -------------------------------------------------------------------------------- /src/views/Index.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 22 | 23 | -------------------------------------------------------------------------------- /src/views/PieChart.vue: -------------------------------------------------------------------------------- 1 | 11 | 278 | -------------------------------------------------------------------------------- /src/views/Points.vue: -------------------------------------------------------------------------------- 1 | 7 | 172 | -------------------------------------------------------------------------------- /src/views/Reflection.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | -------------------------------------------------------------------------------- /src/views/Shader.vue: -------------------------------------------------------------------------------- 1 | 8 | 143 | 144 | -------------------------------------------------------------------------------- /src/views/Trailer.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 168 | 169 | -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | publicPath: '', 3 | } --------------------------------------------------------------------------------