├── .gitignore ├── .parcelrc ├── LICENSE ├── README.md ├── SurfaceSampling ├── Elephant_Model.obj ├── Turtle_Model.obj ├── Whale_Model.obj ├── dotTexture.png ├── favicon.8e42b0a2.ico ├── index.4750667a.js ├── index.c89b3780.css ├── index.html ├── index2.dc7117e9.js ├── index2.html ├── index3.195efc78.js ├── index3.d5dbdd68.js └── index3.html ├── package.json ├── src ├── css │ └── base.css ├── img │ └── favicon.ico ├── index.html ├── index2.html ├── index3.html └── js │ ├── demo1.js │ ├── demo2.js │ └── demo3.js └── static ├── Elephant_Model.obj ├── Turtle_Model.obj ├── Whale_Model.obj └── dotTexture.png /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /.cache 3 | /.parcel-cache 4 | /dist 5 | package-lock.json -------------------------------------------------------------------------------- /.parcelrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["@parcel/config-default"] 3 | } 4 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2009 - 2020 [Codrops](https://tympanus.net/codrops) 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Surface Sampling in Three.js 2 | 3 | Demos for the tutorial on how to use the MeshSurfaceSampler in Three.js to create interesting effects. 4 | 5 | ![SurfaceSampling](https://tympanus.net/codrops/wp-content/uploads/2021/08/SurfaceSampling_featured.jpg) 6 | 7 | [Article on Codrops](https://tympanus.net/codrops/?p=56350) 8 | 9 | [Demo](http://tympanus.net/Tutorials/SurfaceSampling/) 10 | 11 | 12 | ## Installation 13 | 14 | Install dependencies: 15 | 16 | ``` 17 | npm install 18 | ``` 19 | 20 | Compile the code for development and start a local server: 21 | 22 | ``` 23 | npm start 24 | ``` 25 | 26 | Create the build: 27 | 28 | ``` 29 | npm run build 30 | ``` 31 | 32 | ## Credits 33 | 34 | - Elephant by Poly by Google [CC-BY](https://creativecommons.org/licenses/by/3.0/) via [Poly Pizza](https://poly.pizza/m/cx0-TiCjDOx) 35 | - Turtle by Poly by Google [CC-BY](https://creativecommons.org/licenses/by/3.0/) via [Poly Pizza](https://poly.pizza/m/fklSEvGm1Q8) 36 | - Whale by Poly by Google [CC-BY](https://creativecommons.org/licenses/by/3.0/) via [Poly Pizza](https://poly.pizza/m/15cXqVGk0jA) 37 | 38 | 39 | ## Misc 40 | 41 | Follow Mamboleoo: [Twitter](https://twitter.com/Mamboleoo), [Website](https://www.mamboleoo.be/), [Instagram](http://instagram.com/) 42 | 43 | Follow Codrops: [Twitter](http://www.twitter.com/codrops), [Facebook](http://www.facebook.com/codrops), [GitHub](https://github.com/codrops), [Instagram](https://www.instagram.com/codropsss/) 44 | 45 | ## License 46 | [MIT](LICENSE) 47 | 48 | Made with :blue_heart: by [Codrops](http://www.codrops.com) 49 | 50 | 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /SurfaceSampling/Whale_Model.obj: -------------------------------------------------------------------------------- 1 | # Blender v2.78 (sub 0) OBJ File: '11.blend' 2 | # www.blender.org 3 | mtllib Whale_01.mtl 4 | g Whale_01_Cube.030 5 | v 2.649302 3.335124 11.421713 6 | v 2.456870 4.913739 12.282640 7 | v 2.456870 3.026039 -9.365199 8 | v 2.456870 4.913739 -9.365199 9 | v 3.297266 3.887881 5.066693 10 | v 3.297266 3.887881 -1.782097 11 | v 2.884368 7.890207 -1.782097 12 | v 3.268029 7.890207 5.066693 13 | v 1.226829 2.749860 -14.792251 14 | v 1.226829 3.637748 -14.792251 15 | v 0.765314 3.948975 -18.271288 16 | v 0.765314 4.758584 -17.906759 17 | v 4.294227 5.097378 -21.532961 18 | v 4.294227 5.581161 -21.610840 19 | v 2.456870 3.969889 -9.365199 20 | v 2.456870 3.698189 12.282640 21 | v 3.826203 5.577024 -1.782097 22 | v 3.826203 5.577024 5.066693 23 | v 1.226829 3.193804 -14.792251 24 | v 0.765314 4.353779 -18.089024 25 | v 4.294227 5.339270 -21.571901 26 | v 2.756947 3.766988 12.488275 27 | v 3.551858 5.112614 7.048861 28 | v 3.297266 3.887881 1.642298 29 | v 3.125302 7.890207 1.642298 30 | v 2.890163 3.666754 6.540733 31 | v 3.826203 5.577024 1.642298 32 | v 4.580739 4.463918 3.359166 33 | v 4.253168 3.909211 3.496471 34 | v 3.973488 4.463918 1.910440 35 | v 3.645917 3.909211 2.047746 36 | v 5.644648 3.451464 3.165004 37 | v 5.462325 3.069712 3.367783 38 | v 5.037396 3.451464 1.025462 39 | v 4.855073 3.069712 1.228241 40 | v 7.612432 2.024736 1.671728 41 | v 7.463050 1.698768 1.854115 42 | v 7.066248 2.024736 -0.252651 43 | v 6.916867 1.698768 -0.070265 44 | v 8.411956 1.341013 0.190014 45 | v 8.146020 1.170798 0.318676 46 | v 7.939060 1.395975 -0.638079 47 | v 7.673125 1.225760 -0.509417 48 | v 3.501872 5.449457 6.905017 49 | v 3.474612 5.536933 6.929285 50 | v 3.449546 5.580217 7.009509 51 | v 3.441357 5.553955 7.098693 52 | v 3.454840 5.473529 7.144598 53 | v 3.482099 5.386053 7.120329 54 | v 3.507164 5.342769 7.040106 55 | v 3.515355 5.369031 6.950921 56 | v 3.478356 5.461493 7.024807 57 | v 3.257278 5.303384 7.014836 58 | v 3.232213 5.346668 7.095059 59 | v 3.204954 5.434144 7.119327 60 | v 3.191470 5.514570 7.073423 61 | v 3.199660 5.540833 6.984238 62 | v 3.224726 5.497549 6.904015 63 | v 3.251985 5.410072 6.879746 64 | v 3.265468 5.329647 6.925650 65 | v -2.649302 3.335124 11.421713 66 | v -2.456870 4.913739 12.282640 67 | v -2.456870 3.026039 -9.365199 68 | v -2.456870 4.913739 -9.365199 69 | v -3.297266 3.887881 5.066693 70 | v -3.297266 3.887881 -1.782097 71 | v -2.884368 7.890207 -1.782097 72 | v -3.268029 7.890207 5.066693 73 | v -1.226829 2.749860 -14.792251 74 | v -1.226829 3.637748 -14.792251 75 | v -0.765314 3.948975 -18.271288 76 | v -0.765314 4.758584 -17.906759 77 | v -4.294227 5.097378 -21.532961 78 | v -4.294227 5.581161 -21.610840 79 | v 0.000000 3.026039 -9.365199 80 | v 0.000000 5.486299 -9.365199 81 | v 0.000000 2.804420 11.738708 82 | v 0.000000 4.913739 13.255231 83 | v 0.000000 8.727837 -1.782097 84 | v 0.000000 8.727837 5.066693 85 | v 0.000000 3.263841 -1.782097 86 | v 0.000000 3.263841 5.066693 87 | v 0.000000 2.749860 -14.792251 88 | v 0.000000 4.210308 -14.792251 89 | v 0.000000 3.948975 -18.271288 90 | v 0.000000 4.905577 -17.906759 91 | v 0.000000 4.959630 -22.481094 92 | v 0.000000 5.443414 -22.558971 93 | v -2.456870 3.969889 -9.365199 94 | v -2.456870 3.698189 12.282640 95 | v -3.826203 5.577024 -1.782097 96 | v -3.826203 5.577024 5.066693 97 | v -1.226829 3.193804 -14.792251 98 | v -0.765314 4.353779 -18.089024 99 | v -4.294227 5.339270 -21.571901 100 | v 0.000000 5.201522 -22.520033 101 | v 0.000000 3.698189 13.255231 102 | v -2.756947 3.766988 12.488275 103 | v 0.000000 3.766988 13.589819 104 | v -3.551858 5.112614 7.048861 105 | v 0.000000 3.202827 6.790276 106 | v -3.297266 3.887881 1.642298 107 | v -3.125302 7.890207 1.642298 108 | v 0.000000 3.263841 1.642298 109 | v 0.000000 9.131529 1.550321 110 | v -2.890163 3.666754 6.540733 111 | v -3.826203 5.577024 1.642298 112 | v -4.580739 4.463918 3.359166 113 | v -4.253168 3.909211 3.496471 114 | v -3.973488 4.463918 1.910440 115 | v -3.645917 3.909211 2.047746 116 | v -5.644648 3.451464 3.165004 117 | v -5.462325 3.069712 3.367783 118 | v -5.037396 3.451464 1.025462 119 | v -4.855073 3.069712 1.228241 120 | v -7.612432 2.024736 1.671728 121 | v -7.463050 1.698768 1.854115 122 | v -7.066248 2.024736 -0.252651 123 | v -6.916867 1.698768 -0.070265 124 | v -8.370578 1.323100 0.208343 125 | v -8.146020 1.170798 0.318676 126 | v -7.897683 1.378061 -0.619750 127 | v -7.673125 1.225760 -0.509417 128 | v 0.000000 5.493881 6.619561 129 | v -3.501872 5.449457 6.905017 130 | v -3.474612 5.536933 6.929285 131 | v -3.449546 5.580217 7.009509 132 | v -3.441357 5.553955 7.098693 133 | v -3.454840 5.473529 7.144598 134 | v -3.482099 5.386053 7.120329 135 | v -3.507164 5.342769 7.040106 136 | v -3.515355 5.369031 6.950921 137 | v -3.478356 5.461493 7.024807 138 | v -3.257278 5.303384 7.014836 139 | v -3.232213 5.346668 7.095059 140 | v -3.204954 5.434144 7.119327 141 | v -3.191470 5.514570 7.073423 142 | v -3.199660 5.540833 6.984238 143 | v -3.224726 5.497549 6.904015 144 | v -3.251985 5.410072 6.879746 145 | v -3.265468 5.329647 6.925650 146 | v 0.000000 8.946201 1.805551 147 | v 0.626064 8.778406 0.993308 148 | v 0.000000 8.946201 0.345149 149 | v -0.626064 8.778406 0.993308 150 | v 0.379534 9.029808 0.993308 151 | v 0.000000 9.131529 0.600380 152 | v -0.379534 9.029808 0.993308 153 | v 0.000000 9.137475 1.281038 154 | v 0.226618 9.076737 0.993308 155 | v 0.000000 9.137475 0.758692 156 | v -0.226618 9.076737 0.993308 157 | v 0.000000 8.217013 0.993308 158 | v 2.862449 6.589525 8.674666 159 | v 0.000000 7.008340 9.160961 160 | v 3.141536 4.637607 8.674666 161 | v -2.862449 6.589525 8.674666 162 | v -3.141536 4.637607 8.674666 163 | v 0.000000 3.035833 8.796926 164 | v 3.154403 4.439801 9.920522 165 | v 2.653612 3.432069 8.185859 166 | v -3.154403 4.439801 9.920522 167 | v -2.653612 3.432069 8.185859 168 | vn 0.2874 0.9246 -0.2500 169 | vn 0.9800 0.0863 0.1794 170 | vn 0.9424 0.2725 -0.1940 171 | vn 0.9647 0.2625 -0.0201 172 | vn 0.9917 0.0270 -0.1257 173 | vn 0.9753 0.0000 -0.2210 174 | vn -0.0263 0.9884 0.1498 175 | vn 0.3296 0.9127 0.2417 176 | vn 0.2177 -0.1551 -0.9636 177 | vn 0.7065 -0.1531 0.6909 178 | vn -0.3134 0.9480 -0.0546 179 | vn 0.2367 0.8966 -0.3743 180 | vn 0.1897 0.8779 0.4397 181 | vn 0.3681 0.0000 0.9298 182 | vn 0.7240 -0.1493 0.6734 183 | vn 0.9908 0.0285 -0.1325 184 | vn 0.8106 -0.2779 0.5155 185 | vn 0.9745 -0.1958 -0.1101 186 | vn 0.9543 -0.2988 0.0000 187 | vn -0.2884 0.9571 0.0281 188 | vn 0.9418 0.3344 -0.0331 189 | vn 0.8939 0.4341 -0.1114 190 | vn 0.5355 -0.2537 -0.8055 191 | vn -0.5978 -0.1485 -0.7878 192 | vn 0.2852 0.1862 0.9402 193 | vn -0.5865 0.0253 -0.8096 194 | vn 0.6166 0.7591 -0.2087 195 | vn 0.5070 0.8499 -0.1439 196 | vn 0.6474 0.1073 0.7546 197 | vn 0.4113 -0.8634 -0.2922 198 | vn 0.7867 -0.3325 0.5201 199 | vn -0.5075 -0.1109 -0.8545 200 | vn 0.4892 0.8566 -0.1640 201 | vn -0.2874 0.9246 -0.2500 202 | vn -0.9800 0.0863 0.1794 203 | vn -0.9424 0.2725 -0.1940 204 | vn -0.9647 0.2625 -0.0201 205 | vn -0.9917 0.0270 -0.1257 206 | vn -0.9753 0.0000 -0.2210 207 | vn 0.0263 0.9884 0.1498 208 | vn -0.3296 0.9127 0.2417 209 | vn -0.2177 -0.1551 -0.9636 210 | vn -0.7065 -0.1531 0.6909 211 | vn -0.2893 0.9569 0.0236 212 | vn -0.2367 0.8966 -0.3743 213 | vn -0.1897 0.8779 0.4397 214 | vn -0.3681 0.0000 0.9298 215 | vn -0.7240 -0.1493 0.6734 216 | vn -0.9908 0.0285 -0.1325 217 | vn -0.8106 -0.2779 0.5155 218 | vn -0.9745 -0.1958 -0.1101 219 | vn -0.9543 -0.2988 0.0000 220 | vn 0.3134 0.9480 -0.0546 221 | vn -0.9418 0.3344 -0.0331 222 | vn -0.8939 0.4341 -0.1114 223 | vn -0.5355 -0.2537 -0.8055 224 | vn 0.5978 -0.1485 -0.7878 225 | vn -0.2852 0.1862 0.9402 226 | vn 0.5865 0.0253 -0.8096 227 | vn -0.6166 0.7591 -0.2087 228 | vn -0.5070 0.8499 -0.1439 229 | vn -0.6474 0.1073 0.7546 230 | vn -0.4292 -0.8514 -0.3016 231 | vn -0.8001 -0.3119 0.5124 232 | vn 0.5144 -0.1177 -0.8494 233 | vn -0.5134 0.8405 -0.1733 234 | vn 0.6365 0.6241 -0.4532 235 | vn 0.2884 0.9571 0.0281 236 | vn -0.6890 0.6140 0.3851 237 | vn -0.6365 0.6241 -0.4532 238 | vn 0.6890 0.6140 0.3851 239 | vn 0.2932 0.9554 -0.0359 240 | vn 0.2893 0.9569 0.0236 241 | vn -0.2932 0.9554 -0.0359 242 | vn 0.7494 0.1975 -0.6319 243 | vn -0.6838 0.1802 0.7071 244 | vn -0.7494 0.1975 -0.6319 245 | vn 0.6838 0.1802 0.7071 246 | vn -0.2146 0.9054 0.3663 247 | vn -0.9607 0.1886 0.2037 248 | vn 0.2146 0.9054 0.3663 249 | vn 0.9607 0.1886 0.2037 250 | vn 0.1631 -0.9852 -0.0523 251 | vn 0.1076 -0.9920 0.0660 252 | vn 0.1860 -0.9826 0.0000 253 | vn 0.0723 -0.9668 -0.2452 254 | vn 0.0000 -0.9454 -0.3259 255 | vn 0.0000 -0.9987 0.0508 256 | vn 0.1965 -0.8875 0.4169 257 | vn 0.9143 -0.4050 0.0096 258 | vn 0.9233 -0.3683 0.1090 259 | vn 0.1703 -0.9832 -0.0651 260 | vn -0.5146 -0.8396 0.1742 261 | vn 0.0294 -0.9996 -0.0037 262 | vn -0.4280 -0.8928 0.1406 263 | vn -0.4866 -0.8626 0.1381 264 | vn 0.0865 0.9641 0.2511 265 | vn 0.0749 0.9679 0.2398 266 | vn -0.1631 -0.9852 -0.0523 267 | vn -0.1076 -0.9920 0.0660 268 | vn -0.1860 -0.9826 0.0000 269 | vn -0.0723 -0.9668 -0.2452 270 | vn -0.1965 -0.8875 0.4169 271 | vn -0.9143 -0.4050 0.0096 272 | vn -0.9233 -0.3683 0.1090 273 | vn -0.1703 -0.9832 -0.0651 274 | vn 0.5146 -0.8396 0.1742 275 | vn -0.0294 -0.9996 -0.0037 276 | vn 0.4280 -0.8928 0.1406 277 | vn 0.4866 -0.8626 0.1381 278 | vn -0.0865 0.9641 0.2511 279 | vn -0.0749 0.9679 0.2398 280 | vn -0.8908 -0.4531 0.0340 281 | vn -0.1375 -0.9855 -0.0995 282 | vn 0.8908 -0.4531 0.0340 283 | vn 0.1375 -0.9855 -0.0995 284 | vn -0.0753 0.9685 0.2373 285 | vn 0.0753 0.9685 0.2373 286 | vn 0.9540 0.2524 0.1619 287 | vn 0.9540 0.2523 0.1619 288 | vn 0.0524 0.2821 -0.9580 289 | vn 0.1617 -0.4686 -0.8685 290 | vn 0.0864 -0.8652 0.4938 291 | vn -0.1617 0.4686 0.8685 292 | vn -0.0864 0.8652 -0.4938 293 | vn 0.1761 -0.9485 -0.2631 294 | vn -0.0524 -0.2821 0.9580 295 | vn -0.1761 0.9485 0.2631 296 | vn -0.9540 0.2524 0.1619 297 | vn -0.9540 0.2523 0.1619 298 | vn -0.0524 0.2821 -0.9580 299 | vn -0.1617 -0.4686 -0.8685 300 | vn -0.0864 -0.8652 0.4938 301 | vn 0.1617 0.4686 0.8685 302 | vn 0.0864 0.8652 -0.4938 303 | vn -0.1761 -0.9485 -0.2631 304 | vn 0.0524 -0.2821 0.9580 305 | vn 0.1761 0.9485 0.2631 306 | usemtl 039BE5 307 | s off 308 | f 76//1 4//1 10//1 84//1 309 | f 156//2 154//2 2//2 16//2 310 | f 15//3 4//3 7//3 17//3 311 | f 27//4 25//4 8//4 18//4 312 | f 19//5 9//5 11//5 20//5 313 | f 15//6 3//6 9//6 19//6 314 | f 86//7 12//7 14//7 88//7 315 | f 84//8 10//8 12//8 86//8 316 | f 96//9 88//9 14//9 21//9 317 | f 20//10 11//10 13//10 21//10 318 | f 67//11 103//11 145//11 144//11 79//11 319 | f 4//12 76//12 79//12 7//12 320 | f 154//13 155//13 78//13 2//13 321 | f 16//14 2//14 78//14 97//14 322 | f 12//15 20//15 21//15 14//15 323 | f 87//9 96//9 21//9 13//9 324 | f 4//6 15//6 19//6 10//6 325 | f 10//16 19//16 20//16 12//16 326 | f 18//17 5//17 29//17 28//17 327 | f 3//18 15//18 17//18 6//18 328 | f 6//19 17//19 27//19 329 | f 103//20 68//20 80//20 142//20 145//20 330 | f 17//21 7//21 25//21 27//21 331 | f 27//22 18//22 28//22 30//22 332 | f 24//23 27//23 30//23 31//23 333 | f 35//24 34//24 38//24 39//24 334 | f 28//25 29//25 33//25 32//25 335 | f 31//26 30//26 34//26 35//26 336 | f 30//27 28//27 32//27 34//27 337 | f 34//28 32//28 36//28 38//28 338 | f 32//29 33//29 37//29 36//29 339 | f 43//30 42//30 40//30 41//30 340 | f 36//31 37//31 41//31 40//31 341 | f 39//32 38//32 42//32 43//32 342 | f 38//33 36//33 40//33 42//33 343 | f 76//34 84//34 70//34 64//34 344 | f 158//35 90//35 62//35 157//35 345 | f 89//36 91//36 67//36 64//36 346 | f 107//37 92//37 68//37 103//37 347 | f 93//38 94//38 71//38 69//38 348 | f 89//39 93//39 69//39 63//39 349 | f 86//40 88//40 74//40 72//40 350 | f 84//41 86//41 72//41 70//41 351 | f 96//42 95//42 74//42 88//42 352 | f 94//43 95//43 73//43 71//43 353 | f 148//44 105//44 149//44 152//44 354 | f 64//45 67//45 79//45 76//45 355 | f 157//46 62//46 78//46 155//46 356 | f 90//47 97//47 78//47 62//47 357 | f 72//48 74//48 95//48 94//48 358 | f 87//42 73//42 95//42 96//42 359 | f 64//39 70//39 93//39 89//39 360 | f 70//49 72//49 94//49 93//49 361 | f 92//50 108//50 109//50 65//50 362 | f 63//51 66//51 91//51 89//51 363 | f 66//52 107//52 91//52 364 | f 7//53 79//53 144//53 143//53 25//53 365 | f 91//54 107//54 103//54 67//54 366 | f 107//55 110//55 108//55 92//55 367 | f 102//56 111//56 110//56 107//56 368 | f 115//57 119//57 118//57 114//57 369 | f 108//58 112//58 113//58 109//58 370 | f 111//59 115//59 114//59 110//59 371 | f 110//60 114//60 112//60 108//60 372 | f 114//61 118//61 116//61 112//61 373 | f 112//62 116//62 117//62 113//62 374 | f 123//63 121//63 120//63 122//63 375 | f 116//64 120//64 121//64 117//64 376 | f 119//65 123//65 122//65 118//65 377 | f 118//66 122//66 120//66 116//66 378 | f 143//67 144//67 147//67 146//67 379 | f 25//68 143//68 142//68 80//68 8//68 380 | f 145//69 142//69 105//69 148//69 381 | f 144//70 145//70 148//70 147//70 382 | f 142//71 143//71 146//71 105//71 383 | f 146//72 147//72 151//72 150//72 384 | f 105//73 146//73 150//73 149//73 385 | f 147//74 148//74 152//74 151//74 386 | f 152//75 149//75 153//75 387 | f 150//76 151//76 153//76 388 | f 149//77 150//77 153//77 389 | f 151//78 152//78 153//78 390 | f 68//79 157//79 155//79 80//79 391 | f 92//80 158//80 157//80 68//80 392 | f 8//81 80//81 155//81 154//81 393 | f 18//82 8//82 154//82 156//82 394 | usemtl FFFFFF 395 | f 159//83 161//83 1//83 77//83 396 | f 75//84 3//84 6//84 81//84 397 | f 104//85 24//85 5//85 82//85 398 | f 11//86 85//86 87//86 13//86 399 | f 9//87 83//87 85//87 11//87 400 | f 3//88 75//88 83//88 9//88 401 | f 1//89 22//89 99//89 77//89 402 | f 161//90 160//90 22//90 1//90 403 | f 5//91 18//91 23//91 26//91 404 | f 82//92 5//92 26//92 101//92 405 | f 81//85 6//85 24//85 104//85 406 | f 29//93 31//93 35//93 33//93 407 | f 5//94 24//94 31//94 29//94 408 | f 37//95 39//95 43//95 41//95 409 | f 33//96 35//96 39//96 37//96 410 | f 22//97 160//97 23//97 99//97 411 | f 23//98 124//98 99//98 412 | f 159//99 77//99 61//99 163//99 413 | f 75//100 81//100 66//100 63//100 414 | f 104//101 82//101 65//101 102//101 415 | f 71//102 73//102 87//102 85//102 416 | f 69//87 71//87 85//87 83//87 417 | f 63//88 69//88 83//88 75//88 418 | f 61//103 77//103 99//103 98//103 419 | f 163//104 61//104 98//104 162//104 420 | f 65//105 106//105 100//105 92//105 421 | f 82//106 101//106 106//106 65//106 422 | f 81//101 104//101 102//101 66//101 423 | f 109//107 113//107 115//107 111//107 424 | f 65//108 109//108 111//108 102//108 425 | f 117//109 121//109 123//109 119//109 426 | f 113//110 117//110 119//110 115//110 427 | f 98//111 99//111 100//111 162//111 428 | f 100//112 99//112 124//112 429 | f 106//113 163//113 162//113 100//113 430 | f 101//114 159//114 163//114 106//114 431 | f 26//115 23//115 160//115 161//115 432 | f 101//116 26//116 161//116 159//116 433 | f 100//117 124//117 92//117 434 | f 23//118 18//118 124//118 435 | f 27//19 24//19 6//19 436 | f 107//52 66//52 102//52 437 | usemtl 1A1A1A 438 | f 45//119 52//119 44//119 439 | f 44//119 52//119 51//119 440 | f 50//119 52//119 49//119 441 | f 48//119 52//119 47//119 442 | f 46//119 52//119 45//119 443 | f 51//120 52//120 50//120 444 | f 49//119 52//119 48//119 445 | f 47//119 52//119 46//119 446 | f 45//121 44//121 59//121 58//121 447 | f 44//122 51//122 60//122 59//122 448 | f 50//123 49//123 54//123 53//123 449 | f 48//124 47//124 56//124 55//124 450 | f 46//125 45//125 58//125 57//125 451 | f 51//126 50//126 53//126 60//126 452 | f 49//127 48//127 55//127 54//127 453 | f 47//128 46//128 57//128 56//128 454 | f 126//129 125//129 133//129 455 | f 125//129 132//129 133//129 456 | f 131//129 130//129 133//129 457 | f 129//129 128//129 133//129 458 | f 127//129 126//129 133//129 459 | f 132//130 131//130 133//130 460 | f 130//129 129//129 133//129 461 | f 128//129 127//129 133//129 462 | f 126//131 139//131 140//131 125//131 463 | f 125//132 140//132 141//132 132//132 464 | f 131//133 134//133 135//133 130//133 465 | f 129//134 136//134 137//134 128//134 466 | f 127//135 138//135 139//135 126//135 467 | f 132//136 141//136 134//136 131//136 468 | f 130//137 135//137 136//137 129//137 469 | f 128//138 137//138 138//138 127//138 470 | -------------------------------------------------------------------------------- /SurfaceSampling/dotTexture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mamboleoo/SurfaceSampling/289450af19cb652e75ba5a2f5ba28a963464b943/SurfaceSampling/dotTexture.png -------------------------------------------------------------------------------- /SurfaceSampling/favicon.8e42b0a2.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mamboleoo/SurfaceSampling/289450af19cb652e75ba5a2f5ba28a963464b943/SurfaceSampling/favicon.8e42b0a2.ico -------------------------------------------------------------------------------- /SurfaceSampling/index.4750667a.js: -------------------------------------------------------------------------------- 1 | var e="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:{},t={},o={},n=e.parcelRequire9c5a;null==n&&((n=function(e){if(e in t)return t[e].exports;if(e in o){var n=o[e];delete o[e];var i={id:e,exports:{}};return t[e]=i,n.call(i.exports,i,i.exports),i.exports}var r=new Error("Cannot find module '"+e+"'");throw r.code="MODULE_NOT_FOUND",r}).register=function(e,t){o[e]=t},e.parcelRequire9c5a=n);var i=n("bexK8"),r=n("9ZOeg"),s=n("kXB5i");const l=document.querySelector(".content"),a=new i.Scene,d=new i.PerspectiveCamera(75,l.offsetWidth/l.offsetHeight,.1,1e3),u=new i.WebGLRenderer({antialias:!0});u.setSize(l.offsetWidth,l.offsetHeight),l.appendChild(u.domElement),d.position.z=50,d.position.y=50,d.lookAt(0,0,0);const c=new i.Group;a.add(c);const f=[];window.sparkles=f;const h=new i.BufferGeometry,p=new i.ShaderMaterial({uniforms:{pointTexture:{value:(new i.TextureLoader).load("dotTexture.png")}},vertexShader:document.getElementById("vertexshader").textContent,fragmentShader:document.getElementById("fragmentshader").textContent,depthTest:!1,depthWrite:!1,blending:i.AdditiveBlending}),w=new i.Points(h,p);c.add(w);const m=new i.Vector3;let x=null;const g=[];let y=[new i.Color(16428416).multiplyScalar(.5),new i.Color(16738151).multiplyScalar(.5),new i.Color(16727400).multiplyScalar(.5),new i.Color(10957961).multiplyScalar(.5)];let b=null;(new r.OBJLoader).load("Turtle_Model.obj",(e=>{b=e.children[0],b.geometry.rotateX(-.5*Math.PI),b.geometry.rotateY(-.3*Math.PI),function(){x=new s.MeshSurfaceSampler(b).build();for(let e=0;e<6;e++){x.sample(m);const t={colorIndex:e%4,previous:m.clone()};g.push(t)}u.setAnimationLoop(C)}()}),(e=>console.log(e.loaded/e.total*100+"% loaded")),(e=>console.error(e)));const S=[];function v(e){let t=!1;for(;!t;)if(x.sample(m),m.distanceTo(e.previous)<2){e.previous=m.clone();const o=new z;o.setup(e.previous),f.push(o),S.push(y[e.colorIndex].r,y[e.colorIndex].g,y[e.colorIndex].b),h.setAttribute("color",new i.Float32BufferAttribute(S,3)),t=!0}}class z extends i.Vector3{setup(e){this.add(e).multiplyScalar(2),this.dest=e,this._size=5*Math.random()+.5,this.size=1,this.scaleSpeed=.03*Math.random()+.03,this.stop=!1}update(){this.x+=.08*(this.dest.x-this.x),this.y+=.08*(this.dest.y-this.y),this.z+=.08*(this.dest.z-this.z),this.size{v(e),v(e),v(e)})),f.forEach(((e,t)=>{e.stop||e.update(),A[3*t]=e.x,A[3*t+1]=e.y,A[3*t+2]=e.z,B[t]=e.size})),h.setAttribute("position",new i.Float32BufferAttribute(A,3)),h.setAttribute("size",new i.Float32BufferAttribute(B,1)),u.render(a,d)}window.addEventListener("resize",(function(){d.aspect=l.offsetWidth/l.offsetHeight,d.updateProjectionMatrix(),u.setSize(l.offsetWidth,l.offsetHeight)}),!1); -------------------------------------------------------------------------------- /SurfaceSampling/index.c89b3780.css: -------------------------------------------------------------------------------- 1 | *,:after,:before{box-sizing:border-box}:root{font-size:15px}body{--color-text:#111;--color-bg:#fff;--color-link:#ea5d70;--color-link-hover:#000;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--color-bg);color:var(--color-text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;margin:0}.js .loading:after,.js .loading:before{content:"";position:fixed;z-index:1000}.js .loading:before{background:var(--color-bg);height:100%;left:0;top:0;width:100%}.js .loading:after{animation:loaderAnim .7s linear infinite alternate forwards;background:var(--color-link);border-radius:50%;height:60px;left:50%;margin:-30px 0 0 -30px;opacity:.4;top:50%;width:60px}@keyframes loaderAnim{to{opacity:1;transform:scale3d(.5,.5,1)}}a{color:var(--color-link);text-decoration:none}a,a:hover{outline:none}a:hover{color:var(--color-link-hover)}a:focus{background:#d3d3d3;outline:none}a:focus:not(:focus-visible){background:transparent}a:focus-visible{background:transparent;outline:2px solid red}.frame{padding:3rem 5vw;position:relative;text-align:center;z-index:1000}.frame__title{font-size:1rem;font-weight:400;margin:0 0 1rem}.frame__links{display:inline}.frame__demos a:not(:last-child),.frame__links a:not(:last-child){margin-right:1rem}.frame__demos{margin:1rem 0}.frame__demo--current,.frame__demo--current:hover{color:var(--color-text)}.content{align-items:center;display:flex;flex-direction:column;height:calc(100vh - 13rem);justify-content:flex-start;position:relative}@media screen and (min-width:53em){.frame{align-content:space-between;display:grid;grid-template-areas:"title links" "... ..." "... demos";grid-template-columns:75% 25%;grid-template-rows:auto auto auto;height:100vh;left:0;max-width:none;padding:3rem;pointer-events:none;position:fixed;text-align:left;top:0;width:100%;z-index:100}.frame__title-wrap{display:flex;grid-area:title}.frame__title{margin:0}.frame__tagline{margin:0 0 0 1rem;opacity:.5;padding:0 0 0 1rem;position:relative}.frame__demos{grid-area:demos;justify-self:end;margin:0}.frame__links{grid-area:links;justify-self:end;padding:0}.frame a{pointer-events:auto}.content{height:100vh;justify-content:center}} -------------------------------------------------------------------------------- /SurfaceSampling/index.html: -------------------------------------------------------------------------------- 1 | Surface Sampling in Three.js | Demo 1 | Codrops

Surface Sampling in Three.js

-------------------------------------------------------------------------------- /SurfaceSampling/index2.dc7117e9.js: -------------------------------------------------------------------------------- 1 | var t="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:{},e={},r={},i=t.parcelRequire9c5a;null==i&&((i=function(t){if(t in e)return e[t].exports;if(t in r){var i=r[t];delete r[t];var s={id:t,exports:{}};return e[t]=s,i.call(s.exports,s,s.exports),s.exports}var o=new Error("Cannot find module '"+t+"'");throw o.code="MODULE_NOT_FOUND",o}).register=function(t,e){r[t]=e},t.parcelRequire9c5a=i);var s=i("bexK8"),o=i("9ZOeg"),a=i("kXB5i");s=i("bexK8"),s=i("bexK8");class n{constructor(){this.enabled=!0,this.needsSwap=!0,this.clear=!1,this.renderToScreen=!1}setSize(){}render(){console.error("THREE.Pass: .render() must be implemented in derived pass.")}}const l=new s.OrthographicCamera(-1,1,1,-1,0,1),h=new s.BufferGeometry;h.setAttribute("position",new s.Float32BufferAttribute([-1,3,0,-1,-1,0,3,-1,0],3)),h.setAttribute("uv",new s.Float32BufferAttribute([0,2,0,0,2,0],2));class u{constructor(t){this._mesh=new s.Mesh(h,t)}dispose(){this._mesh.geometry.dispose()}render(t){t.render(this._mesh,l)}get material(){return this._mesh.material}set material(t){this._mesh.material=t}}s=i("bexK8");var d={uniforms:{tDiffuse:{value:null},opacity:{value:1}},vertexShader:"\n\n\t\tvarying vec2 vUv;\n\n\t\tvoid main() {\n\n\t\t\tvUv = uv;\n\t\t\tgl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n\n\t\t}",fragmentShader:"\n\n\t\tuniform float opacity;\n\n\t\tuniform sampler2D tDiffuse;\n\n\t\tvarying vec2 vUv;\n\n\t\tvoid main() {\n\n\t\t\tvec4 texel = texture2D( tDiffuse, vUv );\n\t\t\tgl_FragColor = opacity * texel;\n\n\t\t}"};const c={shaderID:"luminosityHighPass",uniforms:{tDiffuse:{value:null},luminosityThreshold:{value:1},smoothWidth:{value:1},defaultColor:{value:new((s=i("bexK8")).Color)(0)},defaultOpacity:{value:0}},vertexShader:"\n\n\t\tvarying vec2 vUv;\n\n\t\tvoid main() {\n\n\t\t\tvUv = uv;\n\n\t\t\tgl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n\n\t\t}",fragmentShader:"\n\n\t\tuniform sampler2D tDiffuse;\n\t\tuniform vec3 defaultColor;\n\t\tuniform float defaultOpacity;\n\t\tuniform float luminosityThreshold;\n\t\tuniform float smoothWidth;\n\n\t\tvarying vec2 vUv;\n\n\t\tvoid main() {\n\n\t\t\tvec4 texel = texture2D( tDiffuse, vUv );\n\n\t\t\tvec3 luma = vec3( 0.299, 0.587, 0.114 );\n\n\t\t\tfloat v = dot( texel.xyz, luma );\n\n\t\t\tvec4 outputColor = vec4( defaultColor.rgb, defaultOpacity );\n\n\t\t\tfloat alpha = smoothstep( luminosityThreshold, luminosityThreshold + smoothWidth, v );\n\n\t\t\tgl_FragColor = mix( outputColor, texel, alpha );\n\n\t\t}"};class f extends n{constructor(t,e,r,i){super(),this.strength=void 0!==e?e:1,this.radius=r,this.threshold=i,this.resolution=void 0!==t?new s.Vector2(t.x,t.y):new s.Vector2(256,256),this.clearColor=new s.Color(0,0,0);const o={minFilter:s.LinearFilter,magFilter:s.LinearFilter,format:s.RGBAFormat};this.renderTargetsHorizontal=[],this.renderTargetsVertical=[],this.nMips=5;let a=Math.round(this.resolution.x/2),n=Math.round(this.resolution.y/2);this.renderTargetBright=new s.WebGLRenderTarget(a,n,o),this.renderTargetBright.texture.name="UnrealBloomPass.bright",this.renderTargetBright.texture.generateMipmaps=!1;for(let t=0;t\n\t\t\t\tvarying vec2 vUv;\n\t\t\t\tuniform sampler2D colorTexture;\n\t\t\t\tuniform vec2 texSize;\n\t\t\t\tuniform vec2 direction;\n\n\t\t\t\tfloat gaussianPdf(in float x, in float sigma) {\n\t\t\t\t\treturn 0.39894 * exp( -0.5 * x * x/( sigma * sigma))/sigma;\n\t\t\t\t}\n\t\t\t\tvoid main() {\n\t\t\t\t\tvec2 invSize = 1.0 / texSize;\n\t\t\t\t\tfloat fSigma = float(SIGMA);\n\t\t\t\t\tfloat weightSum = gaussianPdf(0.0, fSigma);\n\t\t\t\t\tvec3 diffuseSum = texture2D( colorTexture, vUv).rgb * weightSum;\n\t\t\t\t\tfor( int i = 1; i < KERNEL_RADIUS; i ++ ) {\n\t\t\t\t\t\tfloat x = float(i);\n\t\t\t\t\t\tfloat w = gaussianPdf(x, fSigma);\n\t\t\t\t\t\tvec2 uvOffset = direction * invSize * x;\n\t\t\t\t\t\tvec3 sample1 = texture2D( colorTexture, vUv + uvOffset).rgb;\n\t\t\t\t\t\tvec3 sample2 = texture2D( colorTexture, vUv - uvOffset).rgb;\n\t\t\t\t\t\tdiffuseSum += (sample1 + sample2) * w;\n\t\t\t\t\t\tweightSum += 2.0 * w;\n\t\t\t\t\t}\n\t\t\t\t\tgl_FragColor = vec4(diffuseSum/weightSum, 1.0);\n\t\t\t\t}"})}getCompositeMaterial(t){return new s.ShaderMaterial({defines:{NUM_MIPS:t},uniforms:{blurTexture1:{value:null},blurTexture2:{value:null},blurTexture3:{value:null},blurTexture4:{value:null},blurTexture5:{value:null},dirtTexture:{value:null},bloomStrength:{value:1},bloomFactors:{value:null},bloomTintColors:{value:null},bloomRadius:{value:0}},vertexShader:"varying vec2 vUv;\n\t\t\t\tvoid main() {\n\t\t\t\t\tvUv = uv;\n\t\t\t\t\tgl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n\t\t\t\t}",fragmentShader:"varying vec2 vUv;\n\t\t\t\tuniform sampler2D blurTexture1;\n\t\t\t\tuniform sampler2D blurTexture2;\n\t\t\t\tuniform sampler2D blurTexture3;\n\t\t\t\tuniform sampler2D blurTexture4;\n\t\t\t\tuniform sampler2D blurTexture5;\n\t\t\t\tuniform sampler2D dirtTexture;\n\t\t\t\tuniform float bloomStrength;\n\t\t\t\tuniform float bloomRadius;\n\t\t\t\tuniform float bloomFactors[NUM_MIPS];\n\t\t\t\tuniform vec3 bloomTintColors[NUM_MIPS];\n\n\t\t\t\tfloat lerpBloomFactor(const in float factor) {\n\t\t\t\t\tfloat mirrorFactor = 1.2 - factor;\n\t\t\t\t\treturn mix(factor, mirrorFactor, bloomRadius);\n\t\t\t\t}\n\n\t\t\t\tvoid main() {\n\t\t\t\t\tgl_FragColor = bloomStrength * ( lerpBloomFactor(bloomFactors[0]) * vec4(bloomTintColors[0], 1.0) * texture2D(blurTexture1, vUv) +\n\t\t\t\t\t\tlerpBloomFactor(bloomFactors[1]) * vec4(bloomTintColors[1], 1.0) * texture2D(blurTexture2, vUv) +\n\t\t\t\t\t\tlerpBloomFactor(bloomFactors[2]) * vec4(bloomTintColors[2], 1.0) * texture2D(blurTexture3, vUv) +\n\t\t\t\t\t\tlerpBloomFactor(bloomFactors[3]) * vec4(bloomTintColors[3], 1.0) * texture2D(blurTexture4, vUv) +\n\t\t\t\t\t\tlerpBloomFactor(bloomFactors[4]) * vec4(bloomTintColors[4], 1.0) * texture2D(blurTexture5, vUv) );\n\t\t\t\t}"})}}f.BlurDirectionX=new s.Vector2(1,0),f.BlurDirectionY=new s.Vector2(0,1);s=i("bexK8"),s=i("bexK8");class m extends n{constructor(t,e){super(),this.textureID=void 0!==e?e:"tDiffuse",t instanceof s.ShaderMaterial?(this.uniforms=t.uniforms,this.material=t):t&&(this.uniforms=s.UniformsUtils.clone(t.uniforms),this.material=new s.ShaderMaterial({defines:Object.assign({},t.defines),uniforms:this.uniforms,vertexShader:t.vertexShader,fragmentShader:t.fragmentShader})),this.fsQuad=new u(this.material)}render(t,e,r){this.uniforms[this.textureID]&&(this.uniforms[this.textureID].value=r.texture),this.fsQuad.material=this.material,this.renderToScreen?(t.setRenderTarget(null),this.fsQuad.render(t)):(t.setRenderTarget(e),this.clear&&t.clear(t.autoClearColor,t.autoClearDepth,t.autoClearStencil),this.fsQuad.render(t))}}class p extends n{constructor(t,e){super(),this.scene=t,this.camera=e,this.clear=!0,this.needsSwap=!1,this.inverse=!1}render(t,e,r){const i=t.getContext(),s=t.state;let o,a;s.buffers.color.setMask(!1),s.buffers.depth.setMask(!1),s.buffers.color.setLocked(!0),s.buffers.depth.setLocked(!0),this.inverse?(o=0,a=1):(o=1,a=0),s.buffers.stencil.setTest(!0),s.buffers.stencil.setOp(i.REPLACE,i.REPLACE,i.REPLACE),s.buffers.stencil.setFunc(i.ALWAYS,o,4294967295),s.buffers.stencil.setClear(a),s.buffers.stencil.setLocked(!0),t.setRenderTarget(r),this.clear&&t.clear(),t.render(this.scene,this.camera),t.setRenderTarget(e),this.clear&&t.clear(),t.render(this.scene,this.camera),s.buffers.color.setLocked(!1),s.buffers.depth.setLocked(!1),s.buffers.stencil.setLocked(!1),s.buffers.stencil.setFunc(i.EQUAL,1,4294967295),s.buffers.stencil.setOp(i.KEEP,i.KEEP,i.KEEP),s.buffers.stencil.setLocked(!0)}}class v extends n{constructor(){super(),this.needsSwap=!1}render(t){t.state.buffers.stencil.setLocked(!1),t.state.buffers.stencil.setTest(!1)}}new s.OrthographicCamera(-1,1,1,-1,0,1);const g=new s.BufferGeometry;g.setAttribute("position",new s.Float32BufferAttribute([-1,3,0,-1,-1,0,3,-1,0],3)),g.setAttribute("uv",new s.Float32BufferAttribute([0,2,0,0,2,0],2));const x=document.querySelector(".content"),b=new s.Scene,T=new s.PerspectiveCamera(60,x.offsetWidth/x.offsetHeight,.001,50);T.position.z=8;const w=new s.WebGLRenderer;w.setPixelRatio(2),w.setSize(x.offsetWidth,x.offsetHeight),x.appendChild(w.domElement);const M=new class extends n{constructor(t,e,r,i,o){super(),this.scene=t,this.camera=e,this.overrideMaterial=r,this.clearColor=i,this.clearAlpha=void 0!==o?o:0,this.clear=!0,this.clearDepth=!1,this.needsSwap=!1,this._oldClearColor=new s.Color}render(t,e,r){const i=t.autoClear;let s,o;t.autoClear=!1,void 0!==this.overrideMaterial&&(o=this.scene.overrideMaterial,this.scene.overrideMaterial=this.overrideMaterial),this.clearColor&&(t.getClearColor(this._oldClearColor),s=t.getClearAlpha(),t.setClearColor(this.clearColor,this.clearAlpha)),this.clearDepth&&t.clearDepth(),t.setRenderTarget(this.renderToScreen?null:r),this.clear&&t.clear(t.autoClearColor,t.autoClearDepth,t.autoClearStencil),t.render(this.scene,this.camera),this.clearColor&&t.setClearColor(this._oldClearColor,s),void 0!==this.overrideMaterial&&(this.scene.overrideMaterial=o),t.autoClear=i}}(b,T),S=new f(new s.Vector2(x.offsetWidth,x.offsetHeight),1.5,.4,.85);S.threshold=0,S.strength=.6;const C=new class{constructor(t,e){if(this.renderer=t,void 0===e){const r={minFilter:s.LinearFilter,magFilter:s.LinearFilter,format:s.RGBAFormat},i=t.getSize(new s.Vector2);this._pixelRatio=t.getPixelRatio(),this._width=i.width,this._height=i.height,(e=new s.WebGLRenderTarget(this._width*this._pixelRatio,this._height*this._pixelRatio,r)).texture.name="EffectComposer.rt1"}else this._pixelRatio=1,this._width=e.width,this._height=e.height;this.renderTarget1=e,this.renderTarget2=e.clone(),this.renderTarget2.texture.name="EffectComposer.rt2",this.writeBuffer=this.renderTarget1,this.readBuffer=this.renderTarget2,this.renderToScreen=!0,this.passes=[],void 0===d&&console.error("THREE.EffectComposer relies on CopyShader"),void 0===m&&console.error("THREE.EffectComposer relies on ShaderPass"),this.copyPass=new m(d),this.clock=new s.Clock}swapBuffers(){const t=this.readBuffer;this.readBuffer=this.writeBuffer,this.writeBuffer=t}addPass(t){this.passes.push(t),t.setSize(this._width*this._pixelRatio,this._height*this._pixelRatio)}insertPass(t,e){this.passes.splice(e,0,t),t.setSize(this._width*this._pixelRatio,this._height*this._pixelRatio)}removePass(t){const e=this.passes.indexOf(t);-1!==e&&this.passes.splice(e,1)}isLastEnabledPass(t){for(let e=t+1;e{D=t.children[0],D.geometry.scale(.3,.3,.3),D.geometry.translate(0,-2,0),D.geometry.rotateY(.2),function(){z=new a.MeshSurfaceSampler(D).build();for(let t=0;t<6;t++){const e=new s.Line(new s.BufferGeometry,P[t%2]);e.coordinates=[],e.previous=null,F.push(e),y.add(e)}requestAnimationFrame(N)}()}),(t=>console.log(t.loaded/t.total*100+"% loaded")),(t=>console.log("An error happened",t)));const E=new s.Vector3;function L(t){let e=!1;for(safe=0;!e;)if(z.sample(E),t.previous&&E.distanceTo(t.previous)<.3){t.coordinates.push(E.x,E.y,E.z),t.previous=E.clone();for(let e=0;e<2;e++){const e=new V;e.setup(E,t.material.color),B.push(e)}e=!0}else t.previous||(t.previous=E.clone())}class V extends s.Vector3{setup(t,e){this.x=t.x,this.y=t.y,this.z=t.z,this.v=new s.Vector3,this.v.x=s.MathUtils.randFloat(.001,.006),this.v.x*=Math.random()>.5?1:-1,this.v.y=s.MathUtils.randFloat(.001,.006),this.v.y*=Math.random()>.5?1:-1,this.v.z=s.MathUtils.randFloat(.001,.006),this.v.z*=Math.random()>.5?1:-1,this.size=4*Math.random()+1,this.slowDown=.4+.58*Math.random(),this.color=e}update(){(this.v.x>.001||this.v.y>.001||this.v.z>.001)&&(this.add(this.v),this.v.multiplyScalar(this.slowDown))}}class H{setup(t){this.r=12*Math.random()+3,this.phi=Math.random()*Math.PI*2,this.theta=Math.random()*Math.PI,this.v=(new s.Vector2).random().subScalar(.5).multiplyScalar(7e-4),this.x=this.r*Math.sin(this.phi)*Math.sin(this.theta),this.y=this.r*Math.cos(this.phi),this.z=this.r*Math.sin(this.phi)*Math.cos(this.theta),this.size=4*Math.random()+1,this.color=t}update(){this.phi+=this.v.x,this.theta+=this.v.y,this.x=this.r*Math.sin(this.phi)*Math.sin(this.theta),this.y=this.r*Math.cos(this.phi),this.z=this.r*Math.sin(this.phi)*Math.cos(this.theta)}}const Q=[],W=[],O=[],G=[];for(let t=0;t<1500;t++){const t=new H;t.setup(A[Math.floor(Math.random()*A.length)]),W.push(t.x,t.y,t.z),O.push(t.color.r,t.color.g,t.color.b),G.push(t.size),Q.push(t)}const I=new s.BufferGeometry;I.setAttribute("size",new s.Float32BufferAttribute(G,1)),I.setAttribute("color",new s.Float32BufferAttribute(O,3));const k=new s.Points(I,R);b.add(k);let K=0;function N(t){requestAnimationFrame(N),k.rotation.y+=5e-4,y.rotation.x=.1*Math.sin(3e-4*t),y.rotation.y+=.001,t-K>30&&(F.forEach((t=>{B.length<35e3&&(L(t),L(t));const e=new Float32Array(t.coordinates);t.geometry.setAttribute("position",new s.BufferAttribute(e,3)),t.geometry.computeBoundingSphere()})),function(){let t=[],e=[];B.forEach((r=>{t.push(r.size),e.push(r.color.r,r.color.g,r.color.b)})),_.setAttribute("color",new s.Float32BufferAttribute(e,3)),_.setAttribute("size",new s.Float32BufferAttribute(t,1))}(),K=t);let e=[];B.forEach((t=>{t.update(),e.push(t.x,t.y,t.z)})),_.setAttribute("position",new s.Float32BufferAttribute(e,3));let r=[];Q.forEach((t=>{t.update(),r.push(t.x,t.y,t.z)})),I.setAttribute("position",new s.Float32BufferAttribute(r,3)),C.render()}window.addEventListener("resize",(function(){T.aspect=x.offsetWidth/x.offsetHeight,T.updateProjectionMatrix(),C.setSize(x.offsetWidth,x.offsetHeight),w.setSize(x.offsetWidth,x.offsetHeight),S.setSize(x.offsetWidth,x.offsetHeight)})); -------------------------------------------------------------------------------- /SurfaceSampling/index2.html: -------------------------------------------------------------------------------- 1 | Surface Sampling in Three.js | Demo 2 | Codrops

Surface Sampling in Three.js

-------------------------------------------------------------------------------- /SurfaceSampling/index3.d5dbdd68.js: -------------------------------------------------------------------------------- 1 | var e="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:"undefined"!=typeof window?window:"undefined"!=typeof global?global:{},t={},o={},i=e.parcelRequire9c5a;null==i&&((i=function(e){if(e in t)return t[e].exports;if(e in o){var i=o[e];delete o[e];var n={id:e,exports:{}};return t[e]=n,i.call(n.exports,n,n.exports),n.exports}var r=new Error("Cannot find module '"+e+"'");throw r.code="MODULE_NOT_FOUND",r}).register=function(e,t){o[e]=t},e.parcelRequire9c5a=i);var n=i("bexK8"),r=i("9ZOeg"),a=i("kXB5i");const s=document.querySelector(".content"),l=new n.Scene,c=new n.PerspectiveCamera(75,s.offsetWidth/s.offsetHeight,.1,1e3);c.position.z=220,c.position.y=100,c.lookAt(0,0,0);const d=new n.WebGLRenderer({antialias:!0,alpha:!0});d.setSize(s.offsetWidth,s.offsetHeight),s.appendChild(d.domElement);const p=new n.Group;l.add(p);let f=null,u=[];(new r.OBJLoader).load("Elephant_Model.obj",(e=>{f=new a.MeshSurfaceSampler(e.children[0]).build();for(let e=0;e<4;e++){const t=new g(e);u.push(t),p.add(t.line)}d.setAnimationLoop(y)}),(e=>console.log(e.loaded/e.total*100+"% loaded")),(e=>{console.log("oops"),console.error(e)}));const h=new n.Vector3,w=[new n.LineBasicMaterial({color:16428416,transparent:!0,opacity:.5}),new n.LineBasicMaterial({color:16738151,transparent:!0,opacity:.5}),new n.LineBasicMaterial({color:16727400,transparent:!0,opacity:.5}),new n.LineBasicMaterial({color:10957961,transparent:!0,opacity:.5})];class g{constructor(e){this.geometry=new n.BufferGeometry,this.material=w[e%4],this.line=new n.Line(this.geometry,this.material),this.vertices=[],f.sample(h),this.previousPoint=h.clone()}update(){let e=!1;for(;!e;)f.sample(h),h.distanceTo(this.previousPoint)<30&&(this.vertices.push(h.x,h.y,h.z),this.previousPoint=h.clone(),e=!0);this.geometry.setAttribute("position",new n.Float32BufferAttribute(this.vertices,3))}}function y(e){p.rotation.y+=.002,u.forEach((e=>{e.vertices.length<1e4&&e.update()})),d.render(l,c)}window.addEventListener("resize",(function(){c.aspect=s.offsetWidth/s.offsetHeight,c.updateProjectionMatrix(),d.setSize(s.offsetWidth,s.offsetHeight)}),!1); -------------------------------------------------------------------------------- /SurfaceSampling/index3.html: -------------------------------------------------------------------------------- 1 | Surface Sampling in Three.js | Demo 3 | Codrops

Surface Sampling in Three.js

-------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "surfacesampling", 3 | "version": "1.0.0", 4 | "description": "Demos to illustrate the Codrops tutorial about Surface Sampling in Three.js", 5 | "scripts": { 6 | "start": "parcel src/index.html --open", 7 | "build": "parcel build src/index.html --no-content-hash --no-source-maps --public-url ./" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/Mamboleoo/SurfaceSampling.git" 12 | }, 13 | "author": "Codrops", 14 | "license": "MIT", 15 | "bugs": { 16 | "url": "https://github.com/Mamboleoo/SurfaceSampling/issues" 17 | }, 18 | "homepage": "https://github.com/Mamboleoo/SurfaceSampling#readme", 19 | "devDependencies": { 20 | "parcel": "^2.0.0", 21 | "@parcel/config-default": "2.0.0", 22 | "parcel-reporter-static-files-copy": "^1.3.0", 23 | "three": "^0.132.2" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src/css/base.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::after, 3 | *::before { 4 | box-sizing: border-box; 5 | } 6 | 7 | :root { 8 | font-size: 15px; 9 | } 10 | 11 | body { 12 | margin: 0; 13 | --color-text: #111; 14 | --color-bg: #fff; 15 | --color-link: #ea5d70; 16 | --color-link-hover: #000; 17 | color: var(--color-text); 18 | background-color: var(--color-bg); 19 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif; 20 | -webkit-font-smoothing: antialiased; 21 | -moz-osx-font-smoothing: grayscale; 22 | } 23 | 24 | /* Page Loader */ 25 | .js .loading::before, 26 | .js .loading::after { 27 | content: ''; 28 | position: fixed; 29 | z-index: 1000; 30 | } 31 | 32 | .js .loading::before { 33 | top: 0; 34 | left: 0; 35 | width: 100%; 36 | height: 100%; 37 | background: var(--color-bg); 38 | } 39 | 40 | .js .loading::after { 41 | top: 50%; 42 | left: 50%; 43 | width: 60px; 44 | height: 60px; 45 | margin: -30px 0 0 -30px; 46 | border-radius: 50%; 47 | opacity: 0.4; 48 | background: var(--color-link); 49 | animation: loaderAnim 0.7s linear infinite alternate forwards; 50 | 51 | } 52 | 53 | @keyframes loaderAnim { 54 | to { 55 | opacity: 1; 56 | transform: scale3d(0.5,0.5,1); 57 | } 58 | } 59 | 60 | a { 61 | text-decoration: none; 62 | color: var(--color-link); 63 | outline: none; 64 | } 65 | 66 | a:hover { 67 | color: var(--color-link-hover); 68 | outline: none; 69 | } 70 | 71 | /* Better focus styles from https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible */ 72 | a:focus { 73 | /* Provide a fallback style for browsers 74 | that don't support :focus-visible */ 75 | outline: none; 76 | background: lightgrey; 77 | } 78 | 79 | a:focus:not(:focus-visible) { 80 | /* Remove the focus indicator on mouse-focus for browsers 81 | that do support :focus-visible */ 82 | background: transparent; 83 | } 84 | 85 | a:focus-visible { 86 | /* Draw a very noticeable focus style for 87 | keyboard-focus on browsers that do support 88 | :focus-visible */ 89 | outline: 2px solid red; 90 | background: transparent; 91 | } 92 | 93 | .frame { 94 | padding: 3rem 5vw; 95 | text-align: center; 96 | position: relative; 97 | z-index: 1000; 98 | } 99 | 100 | .frame__title { 101 | font-size: 1rem; 102 | margin: 0 0 1rem; 103 | font-weight: normal; 104 | } 105 | 106 | .frame__links { 107 | display: inline; 108 | } 109 | 110 | .frame__links a:not(:last-child), 111 | .frame__demos a:not(:last-child) { 112 | margin-right: 1rem; 113 | } 114 | 115 | .frame__demos { 116 | margin: 1rem 0; 117 | } 118 | 119 | .frame__demo--current, 120 | .frame__demo--current:hover { 121 | color: var(--color-text); 122 | } 123 | 124 | .content { 125 | display: flex; 126 | flex-direction: column; 127 | height: calc(100vh - 13rem); 128 | position: relative; 129 | justify-content: flex-start; 130 | align-items: center; 131 | } 132 | 133 | @media screen and (min-width: 53em) { 134 | .frame { 135 | position: fixed; 136 | text-align: left; 137 | z-index: 100; 138 | top: 0; 139 | left: 0; 140 | display: grid; 141 | align-content: space-between; 142 | width: 100%; 143 | max-width: none; 144 | height: 100vh; 145 | padding: 3rem; 146 | pointer-events: none; 147 | grid-template-columns: 75% 25%; 148 | grid-template-rows: auto auto auto; 149 | grid-template-areas: 'title links' 150 | '... ...' 151 | '... demos'; 152 | } 153 | .frame__title-wrap { 154 | grid-area: title; 155 | display: flex; 156 | } 157 | .frame__title { 158 | margin: 0; 159 | } 160 | .frame__tagline { 161 | position: relative; 162 | margin: 0 0 0 1rem; 163 | padding: 0 0 0 1rem; 164 | opacity: 0.5; 165 | } 166 | .frame__demos { 167 | margin: 0; 168 | grid-area: demos; 169 | justify-self: end; 170 | } 171 | .frame__links { 172 | grid-area: links; 173 | padding: 0; 174 | justify-self: end; 175 | } 176 | .frame a { 177 | pointer-events: auto; 178 | } 179 | .content { 180 | height: 100vh; 181 | justify-content: center; 182 | } 183 | } 184 | -------------------------------------------------------------------------------- /src/img/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mamboleoo/SurfaceSampling/289450af19cb652e75ba5a2f5ba28a963464b943/src/img/favicon.ico -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Surface Sampling in Three.js | Demo 1 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 23 | 24 | 25 |
26 |
27 |
28 |

Surface Sampling in Three.js

29 |
30 | 35 | 40 |
41 |
42 |
43 | 56 | 57 | 66 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /src/index2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Surface Sampling in Three.js | Demo 2 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 23 | 24 | 25 |
26 |
27 |
28 |

Surface Sampling in Three.js

29 | 30 |
31 | 36 | 41 |
42 |
43 |
44 | 58 | 59 | 67 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /src/index3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Surface Sampling in Three.js | Demo 3 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 21 | 22 | 23 |
24 |
25 |
26 |

Surface Sampling in Three.js

27 | 28 |
29 | 34 | 39 |
40 |
41 |
42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /src/js/demo1.js: -------------------------------------------------------------------------------- 1 | import * as THREE from 'three'; 2 | import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js'; 3 | import { MeshSurfaceSampler } from 'three/examples/jsm/math/MeshSurfaceSampler.js'; 4 | 5 | const elContent = document.querySelector('.content'); 6 | const scene = new THREE.Scene(); 7 | const camera = new THREE.PerspectiveCamera( 8 | 75, 9 | elContent.offsetWidth / elContent.offsetHeight, 10 | 0.1, 11 | 1000 12 | ); 13 | 14 | const renderer = new THREE.WebGLRenderer({ 15 | antialias: true 16 | }); 17 | renderer.setSize(elContent.offsetWidth, elContent.offsetHeight); 18 | elContent.appendChild(renderer.domElement); 19 | 20 | camera.position.z = 50; 21 | camera.position.y = 50; 22 | camera.lookAt(0, 0, 0); 23 | 24 | const group = new THREE.Group(); 25 | scene.add(group); 26 | 27 | const sparkles = []; 28 | window.sparkles=sparkles; 29 | const sparklesGeometry = new THREE.BufferGeometry(); 30 | const sparklesMaterial = new THREE.ShaderMaterial({ 31 | uniforms: { 32 | pointTexture: { 33 | value: new THREE.TextureLoader().load('dotTexture.png') 34 | } 35 | }, 36 | vertexShader: document.getElementById("vertexshader").textContent, 37 | fragmentShader: document.getElementById("fragmentshader").textContent, 38 | depthTest: false, 39 | depthWrite: false, 40 | blending: THREE.AdditiveBlending 41 | }); 42 | const points = new THREE.Points(sparklesGeometry, sparklesMaterial); 43 | group.add(points); 44 | 45 | const p1 = new THREE.Vector3(); 46 | let sampler = null; 47 | const lines = []; 48 | let linesColors = [new THREE.Color(0xFAAD80).multiplyScalar(0.5), new THREE.Color(0xFF6767).multiplyScalar(0.5), new THREE.Color(0xFF3D68).multiplyScalar(0.5), new THREE.Color(0xA73489).multiplyScalar(0.5)]; 49 | function initLines() { 50 | sampler = new MeshSurfaceSampler(turtle).build(); 51 | 52 | for (let i = 0; i < 6; i++) { 53 | sampler.sample(p1); 54 | const linesMesh = { 55 | colorIndex: i % 4, 56 | previous: p1.clone() 57 | }; 58 | lines.push(linesMesh); 59 | } 60 | 61 | renderer.setAnimationLoop(render); 62 | } 63 | 64 | let turtle = null; 65 | new OBJLoader().load( 66 | "Turtle_Model.obj", 67 | (obj) => { 68 | turtle = obj.children[0]; 69 | turtle.geometry.rotateX(Math.PI * -0.5); 70 | turtle.geometry.rotateY(Math.PI * -0.3); 71 | initLines(); 72 | }, 73 | (xhr) => console.log((xhr.loaded / xhr.total) * 100 + "% loaded"), 74 | (err) => console.error(err) 75 | ); 76 | 77 | const tempSparklesArrayColors = []; 78 | function findNextVector(line) { 79 | let ok = false; 80 | while (!ok) { 81 | sampler.sample(p1); 82 | 83 | if (p1.distanceTo(line.previous) < 2) { 84 | line.previous = p1.clone(); 85 | 86 | const spark = new Sparkle(); 87 | spark.setup(line.previous); 88 | sparkles.push(spark); 89 | 90 | tempSparklesArrayColors.push(linesColors[line.colorIndex].r, linesColors[line.colorIndex].g, linesColors[line.colorIndex].b); 91 | sparklesGeometry.setAttribute("color", new THREE.Float32BufferAttribute(tempSparklesArrayColors, 3)); 92 | 93 | ok = true; 94 | } 95 | } 96 | } 97 | 98 | class Sparkle extends THREE.Vector3 { 99 | setup(origin) { 100 | this.add(origin).multiplyScalar(2); 101 | this.dest = origin; 102 | 103 | this._size = Math.random() * 5 + 0.5; 104 | this.size = 1; 105 | this.scaleSpeed = Math.random() * 0.03 + 0.03; 106 | this.stop = false; 107 | } 108 | update() { 109 | this.x += (this.dest.x - this.x) * 0.08; 110 | this.y += (this.dest.y - this.y) * 0.08; 111 | this.z += (this.dest.z - this.z) * 0.08; 112 | if (this.size < this._size) { 113 | this.size += this.scaleSpeed; 114 | } else { 115 | // if (this.distanceTo(this.dest) < 0.1) { 116 | // this.stop = true; 117 | // } 118 | } 119 | } 120 | } 121 | 122 | let tempSparklesArray = []; 123 | let tempSparklesArraySizes = []; 124 | function render(a) { 125 | group.rotation.y += 0.002; 126 | 127 | if (sparkles.length < 40000) { 128 | lines.forEach(l => { 129 | findNextVector(l); 130 | findNextVector(l); 131 | findNextVector(l); 132 | }); 133 | } 134 | 135 | sparkles.forEach((s, i) => { 136 | if (!s.stop) { 137 | s.update(); 138 | } 139 | tempSparklesArray[(i * 3)] = s.x; 140 | tempSparklesArray[(i * 3) + 1] = s.y; 141 | tempSparklesArray[(i * 3) + 2] = s.z; 142 | tempSparklesArraySizes[i] = s.size; 143 | }); 144 | sparklesGeometry.setAttribute("position", new THREE.Float32BufferAttribute(tempSparklesArray, 3)); 145 | sparklesGeometry.setAttribute("size", new THREE.Float32BufferAttribute(tempSparklesArraySizes, 1)); 146 | 147 | renderer.render(scene, camera); 148 | } 149 | 150 | window.addEventListener('resize', onWindowResize, false); 151 | 152 | function onWindowResize(){ 153 | camera.aspect = elContent.offsetWidth / elContent.offsetHeight; 154 | camera.updateProjectionMatrix(); 155 | renderer.setSize(elContent.offsetWidth, elContent.offsetHeight); 156 | } 157 | -------------------------------------------------------------------------------- /src/js/demo2.js: -------------------------------------------------------------------------------- 1 | import * as THREE from 'three'; 2 | import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js'; 3 | import { MeshSurfaceSampler } from 'three/examples/jsm/math/MeshSurfaceSampler.js'; 4 | import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js'; 5 | import { UnrealBloomPass } from 'three/examples/jsm/postprocessing/UnrealBloomPass.js'; 6 | import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js'; 7 | 8 | const elContent = document.querySelector('.content'); 9 | const pixelRatio = 2; 10 | 11 | const scene = new THREE.Scene(); 12 | const camera = new THREE.PerspectiveCamera( 13 | 60, 14 | elContent.offsetWidth / elContent.offsetHeight, 15 | 0.001, 16 | 50 17 | ); 18 | camera.position.z = 8; 19 | 20 | const renderer = new THREE.WebGLRenderer(); 21 | renderer.setPixelRatio(pixelRatio); 22 | renderer.setSize(elContent.offsetWidth, elContent.offsetHeight); 23 | elContent.appendChild(renderer.domElement); 24 | 25 | const renderScene = new RenderPass(scene, camera); 26 | 27 | const bloomPass = new UnrealBloomPass( 28 | new THREE.Vector2(elContent.offsetWidth, elContent.offsetHeight), 29 | 1.5, 30 | 0.4, 31 | 0.85 32 | ); 33 | bloomPass.threshold = 0; 34 | bloomPass.strength = 0.6; 35 | 36 | const composer = new EffectComposer(renderer); 37 | composer.setPixelRatio(pixelRatio); 38 | composer.addPass(renderScene); 39 | composer.addPass(bloomPass); 40 | 41 | 42 | const group = new THREE.Group(); 43 | scene.add(group); 44 | 45 | const sparkles = []; 46 | const sparklesGeometry = new THREE.BufferGeometry(); 47 | const sparklesMaterial = new THREE.ShaderMaterial({ 48 | uniforms: { 49 | pointTexture: { 50 | value: new THREE.TextureLoader().load( 51 | "dotTexture.png" 52 | ) 53 | } 54 | }, 55 | vertexShader: document.getElementById("vertexshader").textContent, 56 | fragmentShader: document.getElementById("fragmentshader").textContent, 57 | blending: THREE.AdditiveBlending, 58 | alphaTest: 1.0, 59 | transparent: true 60 | }); 61 | const points = new THREE.Points(sparklesGeometry, sparklesMaterial); 62 | group.add(points); 63 | 64 | let sampler = null; 65 | const lines = []; 66 | let linesMaterials = [ 67 | new THREE.LineBasicMaterial({ transparent: true, color: 0x125D98 }), 68 | new THREE.LineBasicMaterial({ transparent: true, color: 0xCFD6DE }) 69 | ]; 70 | let galaxyColors = [ 71 | new THREE.Color("#f9fbf2").multiplyScalar(0.8), 72 | new THREE.Color("#ffede1").multiplyScalar(0.8), 73 | new THREE.Color("#05c7f2").multiplyScalar(0.8), 74 | new THREE.Color("#0597f2").multiplyScalar(0.8), 75 | new THREE.Color("#0476d9").multiplyScalar(0.8) 76 | ]; 77 | function dots() { 78 | sampler = new MeshSurfaceSampler(whale).build(); 79 | 80 | for (let i = 0; i < 6; i++) { 81 | const linesMesh = new THREE.Line(new THREE.BufferGeometry(), linesMaterials[i % 2]); 82 | linesMesh.coordinates = []; 83 | linesMesh.previous = null; 84 | lines.push(linesMesh); 85 | group.add(linesMesh); 86 | } 87 | requestAnimationFrame(render); 88 | } 89 | 90 | let whale = null; 91 | const loader = new OBJLoader(); 92 | loader.load( 93 | "Whale_Model.obj", 94 | (obj) => { 95 | whale = obj.children[0]; 96 | whale.geometry.scale(0.3, 0.3, 0.3); 97 | whale.geometry.translate(0, -2, 0); 98 | whale.geometry.rotateY(0.2); 99 | dots(); 100 | }, 101 | (xhr) => console.log((xhr.loaded / xhr.total) * 100 + "% loaded"), 102 | (err) => console.log("An error happened", err) 103 | ); 104 | 105 | const p1 = new THREE.Vector3(); 106 | function nextDot(line) { 107 | let ok = false; 108 | while (!ok) { 109 | sampler.sample(p1); 110 | if (line.previous && p1.distanceTo(line.previous) < 0.3) { 111 | line.coordinates.push(p1.x, p1.y, p1.z); 112 | line.previous = p1.clone(); 113 | 114 | for (let i = 0; i < 2; i++) { 115 | const spark = new Sparkle(); 116 | spark.setup(p1, line.material.color); 117 | sparkles.push(spark); 118 | } 119 | ok = true; 120 | } else if (!line.previous) { 121 | line.previous = p1.clone(); 122 | } 123 | } 124 | } 125 | 126 | function updateSparklesGeometry() { 127 | let tempSparklesArraySizes = []; 128 | let tempSparklesArrayColors = []; 129 | sparkles.forEach((s) => { 130 | tempSparklesArraySizes.push(s.size); 131 | tempSparklesArrayColors.push(s.color.r, s.color.g, s.color.b); 132 | }); 133 | sparklesGeometry.setAttribute("color", new THREE.Float32BufferAttribute(tempSparklesArrayColors, 3)); 134 | sparklesGeometry.setAttribute("size", new THREE.Float32BufferAttribute(tempSparklesArraySizes, 1)); 135 | } 136 | 137 | class Sparkle extends THREE.Vector3 { 138 | setup(origin, color) { 139 | this.x = origin.x; 140 | this.y = origin.y; 141 | this.z = origin.z; 142 | this.v = new THREE.Vector3(); 143 | /* X Speed */ 144 | this.v.x = THREE.MathUtils.randFloat(0.001, 0.006); 145 | this.v.x *= Math.random() > 0.5 ? 1 : -1; 146 | /* Y Speed */ 147 | this.v.y = THREE.MathUtils.randFloat(0.001, 0.006); 148 | this.v.y *= Math.random() > 0.5 ? 1 : -1; 149 | /* Z Speed */ 150 | this.v.z = THREE.MathUtils.randFloat(0.001, 0.006); 151 | this.v.z *= Math.random() > 0.5 ? 1 : -1; 152 | 153 | this.size = Math.random() * 4 + 0.5 * pixelRatio; 154 | this.slowDown = 0.4 + Math.random() * 0.58; 155 | this.color = color; 156 | } 157 | update() { 158 | if (this.v.x > 0.001 || this.v.y > 0.001 || this.v.z > 0.001) { 159 | this.add(this.v); 160 | this.v.multiplyScalar(this.slowDown); 161 | } 162 | } 163 | } 164 | 165 | class Star { 166 | setup(color) { 167 | this.r = Math.random() * 12 + 3; 168 | this.phi = Math.random() * Math.PI * 2; 169 | this.theta = Math.random() * Math.PI; 170 | this.v = new THREE.Vector2().random().subScalar(0.5).multiplyScalar(0.0007); 171 | 172 | this.x = this.r * Math.sin(this.phi) * Math.sin(this.theta); 173 | this.y = this.r * Math.cos(this.phi); 174 | this.z = this.r * Math.sin(this.phi) * Math.cos(this.theta); 175 | 176 | this.size = Math.random() * 4 + 0.5 * pixelRatio; 177 | this.color = color; 178 | } 179 | update() { 180 | this.phi += this.v.x; 181 | this.theta += this.v.y; 182 | this.x = this.r * Math.sin(this.phi) * Math.sin(this.theta); 183 | this.y = this.r * Math.cos(this.phi); 184 | this.z = this.r * Math.sin(this.phi) * Math.cos(this.theta); 185 | } 186 | } 187 | 188 | /* Create stars */ 189 | const stars = []; 190 | const galaxyGeometryVertices = []; 191 | const galaxyGeometryColors = []; 192 | const galaxyGeometrySizes = []; 193 | 194 | for (let i = 0; i < 1500; i++) { 195 | const star = new Star(); 196 | star.setup(galaxyColors[Math.floor(Math.random() * galaxyColors.length)]); 197 | galaxyGeometryVertices.push(star.x, star.y, star.z); 198 | galaxyGeometryColors.push(star.color.r, star.color.g, star.color.b); 199 | galaxyGeometrySizes.push(star.size); 200 | stars.push(star); 201 | } 202 | const starsGeometry = new THREE.BufferGeometry(); 203 | starsGeometry.setAttribute( 204 | "size", 205 | new THREE.Float32BufferAttribute(galaxyGeometrySizes, 1) 206 | ); 207 | starsGeometry.setAttribute( 208 | "color", 209 | new THREE.Float32BufferAttribute(galaxyGeometryColors, 3) 210 | ); 211 | const galaxyPoints = new THREE.Points(starsGeometry, sparklesMaterial); 212 | scene.add(galaxyPoints); 213 | 214 | let _prev = 0; 215 | function render(a) { 216 | requestAnimationFrame(render); 217 | 218 | galaxyPoints.rotation.y += 0.0005; 219 | 220 | group.rotation.x = Math.sin(a * 0.0003) * 0.1; 221 | group.rotation.y += 0.001; 222 | 223 | if (a - _prev > 30) { 224 | lines.forEach((l) => { 225 | if (sparkles.length < 35000) { 226 | nextDot(l); 227 | nextDot(l); 228 | } 229 | const tempVertices = new Float32Array(l.coordinates); 230 | l.geometry.setAttribute("position", new THREE.BufferAttribute(tempVertices, 3)); 231 | l.geometry.computeBoundingSphere(); 232 | }); 233 | updateSparklesGeometry(); 234 | _prev = a; 235 | } 236 | 237 | let tempSparklesArray = []; 238 | sparkles.forEach((s) => { 239 | s.update(); 240 | tempSparklesArray.push(s.x, s.y, s.z); 241 | }); 242 | 243 | sparklesGeometry.setAttribute("position", new THREE.Float32BufferAttribute(tempSparklesArray, 3)); 244 | 245 | let tempStarsArray = []; 246 | stars.forEach((s) => { 247 | s.update(); 248 | tempStarsArray.push(s.x, s.y, s.z); 249 | }); 250 | 251 | starsGeometry.setAttribute("position", new THREE.Float32BufferAttribute(tempStarsArray, 3)); 252 | 253 | composer.render(); 254 | } 255 | 256 | function onWindowResize() { 257 | camera.aspect = elContent.offsetWidth / elContent.offsetHeight; 258 | camera.updateProjectionMatrix(); 259 | composer.setSize(elContent.offsetWidth, elContent.offsetHeight); 260 | renderer.setSize(elContent.offsetWidth, elContent.offsetHeight); 261 | bloomPass.setSize(elContent.offsetWidth, elContent.offsetHeight); 262 | } 263 | window.addEventListener("resize", onWindowResize); -------------------------------------------------------------------------------- /src/js/demo3.js: -------------------------------------------------------------------------------- 1 | import * as THREE from 'three'; 2 | import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js'; 3 | import { MeshSurfaceSampler } from 'three/examples/jsm/math/MeshSurfaceSampler.js'; 4 | 5 | const elContent = document.querySelector('.content'); 6 | const scene = new THREE.Scene(); 7 | const camera = new THREE.PerspectiveCamera( 8 | 75, 9 | elContent.offsetWidth / elContent.offsetHeight, 10 | 0.1, 11 | 1000 12 | ); 13 | camera.position.z = 220; 14 | camera.position.y = 100; 15 | camera.lookAt(0,0,0); 16 | 17 | const renderer = new THREE.WebGLRenderer({ 18 | antialias: true, 19 | alpha: true 20 | }); 21 | renderer.setSize(elContent.offsetWidth, elContent.offsetHeight); 22 | elContent.appendChild(renderer.domElement); 23 | 24 | const group = new THREE.Group(); 25 | scene.add(group); 26 | 27 | let sampler = null; 28 | let elephant = null; 29 | let paths = []; 30 | new OBJLoader().load( 31 | "Elephant_Model.obj", 32 | (obj) => { 33 | sampler = new MeshSurfaceSampler(obj.children[0]).build(); 34 | 35 | for (let i = 0;i < 4; i++) { 36 | const path = new Path(i); 37 | paths.push(path); 38 | group.add(path.line); 39 | } 40 | 41 | renderer.setAnimationLoop(render); 42 | }, 43 | (xhr) => console.log((xhr.loaded / xhr.total) * 100 + "% loaded"), 44 | (err) => { 45 | console.log('oops'); 46 | console.error(err) 47 | } 48 | ); 49 | 50 | const tempPosition = new THREE.Vector3(); 51 | const materials = [new THREE.LineBasicMaterial({color: 0xFAAD80, transparent: true, opacity: 0.5}), 52 | new THREE.LineBasicMaterial({color: 0xFF6767, transparent: true, opacity: 0.5}), 53 | new THREE.LineBasicMaterial({color: 0xFF3D68, transparent: true, opacity: 0.5}), 54 | new THREE.LineBasicMaterial({color: 0xA73489, transparent: true, opacity: 0.5})]; 55 | class Path { 56 | constructor (index) { 57 | this.geometry = new THREE.BufferGeometry(); 58 | this.material = materials[index % 4]; 59 | this.line = new THREE.Line(this.geometry, this.material); 60 | this.vertices = []; 61 | 62 | sampler.sample(tempPosition); 63 | this.previousPoint = tempPosition.clone(); 64 | } 65 | update () { 66 | let pointFound = false; 67 | while (!pointFound) { 68 | sampler.sample(tempPosition); 69 | if (tempPosition.distanceTo(this.previousPoint) < 30) { 70 | this.vertices.push(tempPosition.x, tempPosition.y, tempPosition.z); 71 | this.previousPoint = tempPosition.clone(); 72 | pointFound = true; 73 | } 74 | } 75 | this.geometry.setAttribute("position", new THREE.Float32BufferAttribute(this.vertices, 3)); 76 | } 77 | } 78 | 79 | 80 | function render(a) { 81 | group.rotation.y += 0.002; 82 | 83 | paths.forEach(path => { 84 | if (path.vertices.length < 10000) { 85 | path.update(); 86 | } 87 | }); 88 | 89 | renderer.render(scene, camera); 90 | } 91 | 92 | window.addEventListener("resize", onWindowResize, false); 93 | 94 | function onWindowResize() { 95 | camera.aspect = elContent.offsetWidth / elContent.offsetHeight; 96 | camera.updateProjectionMatrix(); 97 | renderer.setSize(elContent.offsetWidth, elContent.offsetHeight); 98 | } -------------------------------------------------------------------------------- /static/Whale_Model.obj: -------------------------------------------------------------------------------- 1 | # Blender v2.78 (sub 0) OBJ File: '11.blend' 2 | # www.blender.org 3 | mtllib Whale_01.mtl 4 | g Whale_01_Cube.030 5 | v 2.649302 3.335124 11.421713 6 | v 2.456870 4.913739 12.282640 7 | v 2.456870 3.026039 -9.365199 8 | v 2.456870 4.913739 -9.365199 9 | v 3.297266 3.887881 5.066693 10 | v 3.297266 3.887881 -1.782097 11 | v 2.884368 7.890207 -1.782097 12 | v 3.268029 7.890207 5.066693 13 | v 1.226829 2.749860 -14.792251 14 | v 1.226829 3.637748 -14.792251 15 | v 0.765314 3.948975 -18.271288 16 | v 0.765314 4.758584 -17.906759 17 | v 4.294227 5.097378 -21.532961 18 | v 4.294227 5.581161 -21.610840 19 | v 2.456870 3.969889 -9.365199 20 | v 2.456870 3.698189 12.282640 21 | v 3.826203 5.577024 -1.782097 22 | v 3.826203 5.577024 5.066693 23 | v 1.226829 3.193804 -14.792251 24 | v 0.765314 4.353779 -18.089024 25 | v 4.294227 5.339270 -21.571901 26 | v 2.756947 3.766988 12.488275 27 | v 3.551858 5.112614 7.048861 28 | v 3.297266 3.887881 1.642298 29 | v 3.125302 7.890207 1.642298 30 | v 2.890163 3.666754 6.540733 31 | v 3.826203 5.577024 1.642298 32 | v 4.580739 4.463918 3.359166 33 | v 4.253168 3.909211 3.496471 34 | v 3.973488 4.463918 1.910440 35 | v 3.645917 3.909211 2.047746 36 | v 5.644648 3.451464 3.165004 37 | v 5.462325 3.069712 3.367783 38 | v 5.037396 3.451464 1.025462 39 | v 4.855073 3.069712 1.228241 40 | v 7.612432 2.024736 1.671728 41 | v 7.463050 1.698768 1.854115 42 | v 7.066248 2.024736 -0.252651 43 | v 6.916867 1.698768 -0.070265 44 | v 8.411956 1.341013 0.190014 45 | v 8.146020 1.170798 0.318676 46 | v 7.939060 1.395975 -0.638079 47 | v 7.673125 1.225760 -0.509417 48 | v 3.501872 5.449457 6.905017 49 | v 3.474612 5.536933 6.929285 50 | v 3.449546 5.580217 7.009509 51 | v 3.441357 5.553955 7.098693 52 | v 3.454840 5.473529 7.144598 53 | v 3.482099 5.386053 7.120329 54 | v 3.507164 5.342769 7.040106 55 | v 3.515355 5.369031 6.950921 56 | v 3.478356 5.461493 7.024807 57 | v 3.257278 5.303384 7.014836 58 | v 3.232213 5.346668 7.095059 59 | v 3.204954 5.434144 7.119327 60 | v 3.191470 5.514570 7.073423 61 | v 3.199660 5.540833 6.984238 62 | v 3.224726 5.497549 6.904015 63 | v 3.251985 5.410072 6.879746 64 | v 3.265468 5.329647 6.925650 65 | v -2.649302 3.335124 11.421713 66 | v -2.456870 4.913739 12.282640 67 | v -2.456870 3.026039 -9.365199 68 | v -2.456870 4.913739 -9.365199 69 | v -3.297266 3.887881 5.066693 70 | v -3.297266 3.887881 -1.782097 71 | v -2.884368 7.890207 -1.782097 72 | v -3.268029 7.890207 5.066693 73 | v -1.226829 2.749860 -14.792251 74 | v -1.226829 3.637748 -14.792251 75 | v -0.765314 3.948975 -18.271288 76 | v -0.765314 4.758584 -17.906759 77 | v -4.294227 5.097378 -21.532961 78 | v -4.294227 5.581161 -21.610840 79 | v 0.000000 3.026039 -9.365199 80 | v 0.000000 5.486299 -9.365199 81 | v 0.000000 2.804420 11.738708 82 | v 0.000000 4.913739 13.255231 83 | v 0.000000 8.727837 -1.782097 84 | v 0.000000 8.727837 5.066693 85 | v 0.000000 3.263841 -1.782097 86 | v 0.000000 3.263841 5.066693 87 | v 0.000000 2.749860 -14.792251 88 | v 0.000000 4.210308 -14.792251 89 | v 0.000000 3.948975 -18.271288 90 | v 0.000000 4.905577 -17.906759 91 | v 0.000000 4.959630 -22.481094 92 | v 0.000000 5.443414 -22.558971 93 | v -2.456870 3.969889 -9.365199 94 | v -2.456870 3.698189 12.282640 95 | v -3.826203 5.577024 -1.782097 96 | v -3.826203 5.577024 5.066693 97 | v -1.226829 3.193804 -14.792251 98 | v -0.765314 4.353779 -18.089024 99 | v -4.294227 5.339270 -21.571901 100 | v 0.000000 5.201522 -22.520033 101 | v 0.000000 3.698189 13.255231 102 | v -2.756947 3.766988 12.488275 103 | v 0.000000 3.766988 13.589819 104 | v -3.551858 5.112614 7.048861 105 | v 0.000000 3.202827 6.790276 106 | v -3.297266 3.887881 1.642298 107 | v -3.125302 7.890207 1.642298 108 | v 0.000000 3.263841 1.642298 109 | v 0.000000 9.131529 1.550321 110 | v -2.890163 3.666754 6.540733 111 | v -3.826203 5.577024 1.642298 112 | v -4.580739 4.463918 3.359166 113 | v -4.253168 3.909211 3.496471 114 | v -3.973488 4.463918 1.910440 115 | v -3.645917 3.909211 2.047746 116 | v -5.644648 3.451464 3.165004 117 | v -5.462325 3.069712 3.367783 118 | v -5.037396 3.451464 1.025462 119 | v -4.855073 3.069712 1.228241 120 | v -7.612432 2.024736 1.671728 121 | v -7.463050 1.698768 1.854115 122 | v -7.066248 2.024736 -0.252651 123 | v -6.916867 1.698768 -0.070265 124 | v -8.370578 1.323100 0.208343 125 | v -8.146020 1.170798 0.318676 126 | v -7.897683 1.378061 -0.619750 127 | v -7.673125 1.225760 -0.509417 128 | v 0.000000 5.493881 6.619561 129 | v -3.501872 5.449457 6.905017 130 | v -3.474612 5.536933 6.929285 131 | v -3.449546 5.580217 7.009509 132 | v -3.441357 5.553955 7.098693 133 | v -3.454840 5.473529 7.144598 134 | v -3.482099 5.386053 7.120329 135 | v -3.507164 5.342769 7.040106 136 | v -3.515355 5.369031 6.950921 137 | v -3.478356 5.461493 7.024807 138 | v -3.257278 5.303384 7.014836 139 | v -3.232213 5.346668 7.095059 140 | v -3.204954 5.434144 7.119327 141 | v -3.191470 5.514570 7.073423 142 | v -3.199660 5.540833 6.984238 143 | v -3.224726 5.497549 6.904015 144 | v -3.251985 5.410072 6.879746 145 | v -3.265468 5.329647 6.925650 146 | v 0.000000 8.946201 1.805551 147 | v 0.626064 8.778406 0.993308 148 | v 0.000000 8.946201 0.345149 149 | v -0.626064 8.778406 0.993308 150 | v 0.379534 9.029808 0.993308 151 | v 0.000000 9.131529 0.600380 152 | v -0.379534 9.029808 0.993308 153 | v 0.000000 9.137475 1.281038 154 | v 0.226618 9.076737 0.993308 155 | v 0.000000 9.137475 0.758692 156 | v -0.226618 9.076737 0.993308 157 | v 0.000000 8.217013 0.993308 158 | v 2.862449 6.589525 8.674666 159 | v 0.000000 7.008340 9.160961 160 | v 3.141536 4.637607 8.674666 161 | v -2.862449 6.589525 8.674666 162 | v -3.141536 4.637607 8.674666 163 | v 0.000000 3.035833 8.796926 164 | v 3.154403 4.439801 9.920522 165 | v 2.653612 3.432069 8.185859 166 | v -3.154403 4.439801 9.920522 167 | v -2.653612 3.432069 8.185859 168 | vn 0.2874 0.9246 -0.2500 169 | vn 0.9800 0.0863 0.1794 170 | vn 0.9424 0.2725 -0.1940 171 | vn 0.9647 0.2625 -0.0201 172 | vn 0.9917 0.0270 -0.1257 173 | vn 0.9753 0.0000 -0.2210 174 | vn -0.0263 0.9884 0.1498 175 | vn 0.3296 0.9127 0.2417 176 | vn 0.2177 -0.1551 -0.9636 177 | vn 0.7065 -0.1531 0.6909 178 | vn -0.3134 0.9480 -0.0546 179 | vn 0.2367 0.8966 -0.3743 180 | vn 0.1897 0.8779 0.4397 181 | vn 0.3681 0.0000 0.9298 182 | vn 0.7240 -0.1493 0.6734 183 | vn 0.9908 0.0285 -0.1325 184 | vn 0.8106 -0.2779 0.5155 185 | vn 0.9745 -0.1958 -0.1101 186 | vn 0.9543 -0.2988 0.0000 187 | vn -0.2884 0.9571 0.0281 188 | vn 0.9418 0.3344 -0.0331 189 | vn 0.8939 0.4341 -0.1114 190 | vn 0.5355 -0.2537 -0.8055 191 | vn -0.5978 -0.1485 -0.7878 192 | vn 0.2852 0.1862 0.9402 193 | vn -0.5865 0.0253 -0.8096 194 | vn 0.6166 0.7591 -0.2087 195 | vn 0.5070 0.8499 -0.1439 196 | vn 0.6474 0.1073 0.7546 197 | vn 0.4113 -0.8634 -0.2922 198 | vn 0.7867 -0.3325 0.5201 199 | vn -0.5075 -0.1109 -0.8545 200 | vn 0.4892 0.8566 -0.1640 201 | vn -0.2874 0.9246 -0.2500 202 | vn -0.9800 0.0863 0.1794 203 | vn -0.9424 0.2725 -0.1940 204 | vn -0.9647 0.2625 -0.0201 205 | vn -0.9917 0.0270 -0.1257 206 | vn -0.9753 0.0000 -0.2210 207 | vn 0.0263 0.9884 0.1498 208 | vn -0.3296 0.9127 0.2417 209 | vn -0.2177 -0.1551 -0.9636 210 | vn -0.7065 -0.1531 0.6909 211 | vn -0.2893 0.9569 0.0236 212 | vn -0.2367 0.8966 -0.3743 213 | vn -0.1897 0.8779 0.4397 214 | vn -0.3681 0.0000 0.9298 215 | vn -0.7240 -0.1493 0.6734 216 | vn -0.9908 0.0285 -0.1325 217 | vn -0.8106 -0.2779 0.5155 218 | vn -0.9745 -0.1958 -0.1101 219 | vn -0.9543 -0.2988 0.0000 220 | vn 0.3134 0.9480 -0.0546 221 | vn -0.9418 0.3344 -0.0331 222 | vn -0.8939 0.4341 -0.1114 223 | vn -0.5355 -0.2537 -0.8055 224 | vn 0.5978 -0.1485 -0.7878 225 | vn -0.2852 0.1862 0.9402 226 | vn 0.5865 0.0253 -0.8096 227 | vn -0.6166 0.7591 -0.2087 228 | vn -0.5070 0.8499 -0.1439 229 | vn -0.6474 0.1073 0.7546 230 | vn -0.4292 -0.8514 -0.3016 231 | vn -0.8001 -0.3119 0.5124 232 | vn 0.5144 -0.1177 -0.8494 233 | vn -0.5134 0.8405 -0.1733 234 | vn 0.6365 0.6241 -0.4532 235 | vn 0.2884 0.9571 0.0281 236 | vn -0.6890 0.6140 0.3851 237 | vn -0.6365 0.6241 -0.4532 238 | vn 0.6890 0.6140 0.3851 239 | vn 0.2932 0.9554 -0.0359 240 | vn 0.2893 0.9569 0.0236 241 | vn -0.2932 0.9554 -0.0359 242 | vn 0.7494 0.1975 -0.6319 243 | vn -0.6838 0.1802 0.7071 244 | vn -0.7494 0.1975 -0.6319 245 | vn 0.6838 0.1802 0.7071 246 | vn -0.2146 0.9054 0.3663 247 | vn -0.9607 0.1886 0.2037 248 | vn 0.2146 0.9054 0.3663 249 | vn 0.9607 0.1886 0.2037 250 | vn 0.1631 -0.9852 -0.0523 251 | vn 0.1076 -0.9920 0.0660 252 | vn 0.1860 -0.9826 0.0000 253 | vn 0.0723 -0.9668 -0.2452 254 | vn 0.0000 -0.9454 -0.3259 255 | vn 0.0000 -0.9987 0.0508 256 | vn 0.1965 -0.8875 0.4169 257 | vn 0.9143 -0.4050 0.0096 258 | vn 0.9233 -0.3683 0.1090 259 | vn 0.1703 -0.9832 -0.0651 260 | vn -0.5146 -0.8396 0.1742 261 | vn 0.0294 -0.9996 -0.0037 262 | vn -0.4280 -0.8928 0.1406 263 | vn -0.4866 -0.8626 0.1381 264 | vn 0.0865 0.9641 0.2511 265 | vn 0.0749 0.9679 0.2398 266 | vn -0.1631 -0.9852 -0.0523 267 | vn -0.1076 -0.9920 0.0660 268 | vn -0.1860 -0.9826 0.0000 269 | vn -0.0723 -0.9668 -0.2452 270 | vn -0.1965 -0.8875 0.4169 271 | vn -0.9143 -0.4050 0.0096 272 | vn -0.9233 -0.3683 0.1090 273 | vn -0.1703 -0.9832 -0.0651 274 | vn 0.5146 -0.8396 0.1742 275 | vn -0.0294 -0.9996 -0.0037 276 | vn 0.4280 -0.8928 0.1406 277 | vn 0.4866 -0.8626 0.1381 278 | vn -0.0865 0.9641 0.2511 279 | vn -0.0749 0.9679 0.2398 280 | vn -0.8908 -0.4531 0.0340 281 | vn -0.1375 -0.9855 -0.0995 282 | vn 0.8908 -0.4531 0.0340 283 | vn 0.1375 -0.9855 -0.0995 284 | vn -0.0753 0.9685 0.2373 285 | vn 0.0753 0.9685 0.2373 286 | vn 0.9540 0.2524 0.1619 287 | vn 0.9540 0.2523 0.1619 288 | vn 0.0524 0.2821 -0.9580 289 | vn 0.1617 -0.4686 -0.8685 290 | vn 0.0864 -0.8652 0.4938 291 | vn -0.1617 0.4686 0.8685 292 | vn -0.0864 0.8652 -0.4938 293 | vn 0.1761 -0.9485 -0.2631 294 | vn -0.0524 -0.2821 0.9580 295 | vn -0.1761 0.9485 0.2631 296 | vn -0.9540 0.2524 0.1619 297 | vn -0.9540 0.2523 0.1619 298 | vn -0.0524 0.2821 -0.9580 299 | vn -0.1617 -0.4686 -0.8685 300 | vn -0.0864 -0.8652 0.4938 301 | vn 0.1617 0.4686 0.8685 302 | vn 0.0864 0.8652 -0.4938 303 | vn -0.1761 -0.9485 -0.2631 304 | vn 0.0524 -0.2821 0.9580 305 | vn 0.1761 0.9485 0.2631 306 | usemtl 039BE5 307 | s off 308 | f 76//1 4//1 10//1 84//1 309 | f 156//2 154//2 2//2 16//2 310 | f 15//3 4//3 7//3 17//3 311 | f 27//4 25//4 8//4 18//4 312 | f 19//5 9//5 11//5 20//5 313 | f 15//6 3//6 9//6 19//6 314 | f 86//7 12//7 14//7 88//7 315 | f 84//8 10//8 12//8 86//8 316 | f 96//9 88//9 14//9 21//9 317 | f 20//10 11//10 13//10 21//10 318 | f 67//11 103//11 145//11 144//11 79//11 319 | f 4//12 76//12 79//12 7//12 320 | f 154//13 155//13 78//13 2//13 321 | f 16//14 2//14 78//14 97//14 322 | f 12//15 20//15 21//15 14//15 323 | f 87//9 96//9 21//9 13//9 324 | f 4//6 15//6 19//6 10//6 325 | f 10//16 19//16 20//16 12//16 326 | f 18//17 5//17 29//17 28//17 327 | f 3//18 15//18 17//18 6//18 328 | f 6//19 17//19 27//19 329 | f 103//20 68//20 80//20 142//20 145//20 330 | f 17//21 7//21 25//21 27//21 331 | f 27//22 18//22 28//22 30//22 332 | f 24//23 27//23 30//23 31//23 333 | f 35//24 34//24 38//24 39//24 334 | f 28//25 29//25 33//25 32//25 335 | f 31//26 30//26 34//26 35//26 336 | f 30//27 28//27 32//27 34//27 337 | f 34//28 32//28 36//28 38//28 338 | f 32//29 33//29 37//29 36//29 339 | f 43//30 42//30 40//30 41//30 340 | f 36//31 37//31 41//31 40//31 341 | f 39//32 38//32 42//32 43//32 342 | f 38//33 36//33 40//33 42//33 343 | f 76//34 84//34 70//34 64//34 344 | f 158//35 90//35 62//35 157//35 345 | f 89//36 91//36 67//36 64//36 346 | f 107//37 92//37 68//37 103//37 347 | f 93//38 94//38 71//38 69//38 348 | f 89//39 93//39 69//39 63//39 349 | f 86//40 88//40 74//40 72//40 350 | f 84//41 86//41 72//41 70//41 351 | f 96//42 95//42 74//42 88//42 352 | f 94//43 95//43 73//43 71//43 353 | f 148//44 105//44 149//44 152//44 354 | f 64//45 67//45 79//45 76//45 355 | f 157//46 62//46 78//46 155//46 356 | f 90//47 97//47 78//47 62//47 357 | f 72//48 74//48 95//48 94//48 358 | f 87//42 73//42 95//42 96//42 359 | f 64//39 70//39 93//39 89//39 360 | f 70//49 72//49 94//49 93//49 361 | f 92//50 108//50 109//50 65//50 362 | f 63//51 66//51 91//51 89//51 363 | f 66//52 107//52 91//52 364 | f 7//53 79//53 144//53 143//53 25//53 365 | f 91//54 107//54 103//54 67//54 366 | f 107//55 110//55 108//55 92//55 367 | f 102//56 111//56 110//56 107//56 368 | f 115//57 119//57 118//57 114//57 369 | f 108//58 112//58 113//58 109//58 370 | f 111//59 115//59 114//59 110//59 371 | f 110//60 114//60 112//60 108//60 372 | f 114//61 118//61 116//61 112//61 373 | f 112//62 116//62 117//62 113//62 374 | f 123//63 121//63 120//63 122//63 375 | f 116//64 120//64 121//64 117//64 376 | f 119//65 123//65 122//65 118//65 377 | f 118//66 122//66 120//66 116//66 378 | f 143//67 144//67 147//67 146//67 379 | f 25//68 143//68 142//68 80//68 8//68 380 | f 145//69 142//69 105//69 148//69 381 | f 144//70 145//70 148//70 147//70 382 | f 142//71 143//71 146//71 105//71 383 | f 146//72 147//72 151//72 150//72 384 | f 105//73 146//73 150//73 149//73 385 | f 147//74 148//74 152//74 151//74 386 | f 152//75 149//75 153//75 387 | f 150//76 151//76 153//76 388 | f 149//77 150//77 153//77 389 | f 151//78 152//78 153//78 390 | f 68//79 157//79 155//79 80//79 391 | f 92//80 158//80 157//80 68//80 392 | f 8//81 80//81 155//81 154//81 393 | f 18//82 8//82 154//82 156//82 394 | usemtl FFFFFF 395 | f 159//83 161//83 1//83 77//83 396 | f 75//84 3//84 6//84 81//84 397 | f 104//85 24//85 5//85 82//85 398 | f 11//86 85//86 87//86 13//86 399 | f 9//87 83//87 85//87 11//87 400 | f 3//88 75//88 83//88 9//88 401 | f 1//89 22//89 99//89 77//89 402 | f 161//90 160//90 22//90 1//90 403 | f 5//91 18//91 23//91 26//91 404 | f 82//92 5//92 26//92 101//92 405 | f 81//85 6//85 24//85 104//85 406 | f 29//93 31//93 35//93 33//93 407 | f 5//94 24//94 31//94 29//94 408 | f 37//95 39//95 43//95 41//95 409 | f 33//96 35//96 39//96 37//96 410 | f 22//97 160//97 23//97 99//97 411 | f 23//98 124//98 99//98 412 | f 159//99 77//99 61//99 163//99 413 | f 75//100 81//100 66//100 63//100 414 | f 104//101 82//101 65//101 102//101 415 | f 71//102 73//102 87//102 85//102 416 | f 69//87 71//87 85//87 83//87 417 | f 63//88 69//88 83//88 75//88 418 | f 61//103 77//103 99//103 98//103 419 | f 163//104 61//104 98//104 162//104 420 | f 65//105 106//105 100//105 92//105 421 | f 82//106 101//106 106//106 65//106 422 | f 81//101 104//101 102//101 66//101 423 | f 109//107 113//107 115//107 111//107 424 | f 65//108 109//108 111//108 102//108 425 | f 117//109 121//109 123//109 119//109 426 | f 113//110 117//110 119//110 115//110 427 | f 98//111 99//111 100//111 162//111 428 | f 100//112 99//112 124//112 429 | f 106//113 163//113 162//113 100//113 430 | f 101//114 159//114 163//114 106//114 431 | f 26//115 23//115 160//115 161//115 432 | f 101//116 26//116 161//116 159//116 433 | f 100//117 124//117 92//117 434 | f 23//118 18//118 124//118 435 | f 27//19 24//19 6//19 436 | f 107//52 66//52 102//52 437 | usemtl 1A1A1A 438 | f 45//119 52//119 44//119 439 | f 44//119 52//119 51//119 440 | f 50//119 52//119 49//119 441 | f 48//119 52//119 47//119 442 | f 46//119 52//119 45//119 443 | f 51//120 52//120 50//120 444 | f 49//119 52//119 48//119 445 | f 47//119 52//119 46//119 446 | f 45//121 44//121 59//121 58//121 447 | f 44//122 51//122 60//122 59//122 448 | f 50//123 49//123 54//123 53//123 449 | f 48//124 47//124 56//124 55//124 450 | f 46//125 45//125 58//125 57//125 451 | f 51//126 50//126 53//126 60//126 452 | f 49//127 48//127 55//127 54//127 453 | f 47//128 46//128 57//128 56//128 454 | f 126//129 125//129 133//129 455 | f 125//129 132//129 133//129 456 | f 131//129 130//129 133//129 457 | f 129//129 128//129 133//129 458 | f 127//129 126//129 133//129 459 | f 132//130 131//130 133//130 460 | f 130//129 129//129 133//129 461 | f 128//129 127//129 133//129 462 | f 126//131 139//131 140//131 125//131 463 | f 125//132 140//132 141//132 132//132 464 | f 131//133 134//133 135//133 130//133 465 | f 129//134 136//134 137//134 128//134 466 | f 127//135 138//135 139//135 126//135 467 | f 132//136 141//136 134//136 131//136 468 | f 130//137 135//137 136//137 129//137 469 | f 128//138 137//138 138//138 127//138 470 | -------------------------------------------------------------------------------- /static/dotTexture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Mamboleoo/SurfaceSampling/289450af19cb652e75ba5a2f5ba28a963464b943/static/dotTexture.png --------------------------------------------------------------------------------