Here is a very simple Three.JS sketch, resulting following render:
As you may see this THREE.BufferGeometry is a 8x8 matrix and by setting UVs in this way:
for(var i = 0; i < points.length; i += 4){ quad_uvs.push(...[0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0]); }
uvs = new Float32Array(quad_uvs);
geometry.setAttribute( 'uv', new THREE.BufferAttribute( uvs, 2 ) );
It applies texture to each 8x8 segment, however I need to place texture over the entire geometry.
How I could update uv mapping for achieving it?
var img = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAAQABAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCAIAAgADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDwSiiivxo/0tCiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiuq8I/Crxj49Xd4d8MarrEWcGa0tHeIH3fG0fiaqMZTdoq7Ma1elhoOpWmoxXVtJfezlaK9gf9kT4wRweafA1+VxnCywlv8AvkPn9K8/8V/D3xP4EmWPxF4e1PRGY7UN/avErn/ZLDDfhWs6Famrzg16pnBhs2y/GT9nhsRCcu0ZRb+5M5+iiisD1QooooAKKKKACiiigAooooAKKKKACitrwx4J8Q+Nbprbw/oeo63OuNyafavMVz0ztBx+Nei2/wCyL8YLmDzk8C34TGcSSRI3/fLOD+lbQoVaivCDfomeZic1y/BS5MViIQfaUop/i0eQUV2Pi34O+OPAcTTeIPCer6Vbr1uZ7RxCP+2gG39a46s5QlB2krM66GIo4qHtKE1OPdNNfegoooqToCiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKnsrK41K8gtLSCS6up5FiighQs8jscBVA5JJOABUFfeP/BP79n+GKwPxM1y1ElxKWh0WOVf9WoJWSfB7k5VT2AY9xXbg8LLGVlSj832R8vxJn9DhvLp4+vq1pGP80nsv1fZJnQ/s2/sL6N4V0+11/wCIdnFrOvyKJE0iXD2tnnkBx0lf1zlR0AON1fW9vbQ2dvHBBEkEEahUjjUKqgdAAOAKyfGvjLSvh94V1LxFrdyLTS9PiM00nU+gVR3ZiQoHckCvyt+Ov7T/AIv+NusXQuL+fS/De8i20W2kKxKmeDLj/WPjqW4znAA4r7itXwuTU1CEbt9Or82/68j+WctyrPfEnG1MVia3LTi9ZO/LG/2YR72813k7vX9WY/FGjTXv2OPV7F7vOPIW5QyZ9Nuc1Z1TSrLW7Cax1Gzgv7KZdsttdRLJG49GVgQR9a/D3pX0H+zx+2B4p+Ees2djrV/da94QdhHNZ3LmSS2TP34GPIx12Z2nnoeRxUM/p1JclaFk+t7/AH6H0+aeEeLwdB18txPtJx15XHlbt/K+Z69k7ep7J+05+wpbW9hd+KPhpbPG0IaW78PKS4Zepa3zzkc/u+c/w44U/DBBUkEEEcEGv3B0fV7PX9Js9T064S7sLyFLi3njOVkjYAqw9iCK/Pf9vn4BReCvEcPjzQ7UQ6RrMxjv4Yh8sN2ctvx2EgBP+8D/AHhXNm+WQhH6zh1p1S/NHs+HfHGJxFdZJm0m5bQk97r7Er7vs3r0d9D5Fooor5A/o4KKKKACiiigAooooAK+z/2Xf2HF8U2Fp4s+IkM0OmzKJbLQwxjknU8iSYjlVI6KME5BJA4PHfsOfs/R/FLxpL4o1u2E3hrQZFIikXKXd1jcqH1VBhmHugOQTX6WXFxFaW8k80iQwRKXeRyFVFAyST2AFfW5RlkasfrFdXXRfqz+efEXjmvgKrybKp8tT7clur7Rj2dtW91olre1PQvD+l+F9Mh07R9OtdLsIRiO2s4VijUeyqAKZd+J9GsLr7Nc6tY21znHky3KK/5E5r84v2mf2y/EHxI1u90TwjqNxovhCBzEstqxinv8cF3YYYIeyDHH3sngfMTMXYsxJYnJJ6muyvn1OlLkoQ5kut7L5HzWU+E2NzCgsVmeJ9lOevLy80tf5m2rPutfN3P3KISeIghZI3XBB5DA/wAxXy7+0V+xB4d+IWn3WseCrS38O+KEUv8AZoFEdpen+6yjiNz2ZcDJ+YHOR8S/Br9ovxn8E9Wgl0fU5bnSA4Nxo11IWtpl7gKfuN/tLg8DORwf1U+F3xJ0j4teB9M8T6LJutLxMtEx+eCQcPE/+0p49+COCK66GKw2cQdKpGzXT9Uz57Nsizzw4xVPHYSvzU5O3MrpP+7ON2temr8mmtPxp1rRb/w7q13pmp2ktjqFpI0M9tOpV43BwQRVKv0M/b5/Z+i8S+G2+Iui2oGr6WgXVFjHNxajgSEd2j7n+5nP3RX5518VjsJLBVnTlt0fdH9P8L8RUOJsthjaStLaUf5ZLdej3Xk+9wooorgPrQooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooA6L4d+Dbn4h+OtB8NWhKz6peR2ocDPlqzDc59lXLH6V+znh/QrLwxoWn6Pp0It7Cwt0toIl6KiKFUfkK/OP/gnj4QXXvjfcaxLHui0TTZZkc/wzSERL/440v5V+llfeZBQUKEqz3k/wX/BP5L8XM0liM0pZdF+7Sjd/wCKX/2qVvVnw1/wUj+Jkka+HPAdpMVSRTqt+in7wyUhU+2RKceynsK+Fq9o/bF8SN4m/aN8Yy790VpOljGvZRFGqMP++gx/GvF6+VzKs6+LqSfR2+7Q/feCsthleQYWjFWcoqb9Z+87+l7eiCiiivNPtz9F/wDgnX8S5PEfw41bwjeSmS40C4EltuPP2abcQo9dsiyfQOor6K+LHw/tPil8Odf8LXgXZqNq0ccjDIilHzRSf8BcK34V+e3/AAT58Svovx+TTt5EesabcWxTsWQCYH6gRN+Zr9Nq/SMpqLE4FQnra8X/AF6M/irxBwksk4oniMN7rly1Y26Pq/8AwKLZ+HOoWFxpV/c2V1EYbq2laGWNuqOpIYH6EGq9e2ftleEF8HftEeKoooxHbahImpRYGM+coZz/AN/PMrxOvz2vSdGrKm+jaP7DyzGxzLA0MbDapGMvvSdvkFFFFYnpBRRRQAU6ONpXVEUu7EBVUZJPoKbXqf7L3hBfHHx98F6ZJH5sC3wu5lPQpCDMQfY7MfjWlKm6tSNNbtpfecWOxcMBhKuLqfDTjKT9Ipv9D9OfgF8M4fhH8JvD3hxYwl3Dbia9YdXuX+aUk98Mdo9lA7V5Z+3t8TJPA3wXbR7OYxah4jn+w5U4YW4G6Yj6jah9pDX0rX51f8FIvE7ah8U/D2hK5aDTdL88rngSTSNu4/3Yo6/RsymsJgXGnpoor+vQ/i/gnDz4g4qpVsX73vSqy82rtf8Ak1vkfI1FFFfmp/boV9j/APBOP4mSaX4z1vwPczH7HqkBvrRGPC3EYAcD3aPk/wDXIV8cV6P+zj4jbwp8d/Auoq+xRqsEEjekcreU/wD467V3YCs6GJhNd/wejPk+K8thm2SYrCyV24Nr/FH3o/ivuP2AvrKDU7K4s7qJZ7W4jaKWJxlXRhhlI9CCRX43fGr4eyfCv4p+JPC7hhFY3bC3ZurQN88TfijLn3zX7MV+ef8AwUl8ILp3xC8MeI449i6pYPaysB96SF85PvtlUfRa+yz6gqmHVXrF/g/+DY/m3wmzSWFzmeAb92tF6f3o6p/dzHx7RRRX5+f18FFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFAH3t/wTN0dY9B8daoR881za2wPoEWRj/wCjBX2xXyP/AME2YVX4R+JJf4m1xlP0FvCR/M19cV+n5VHlwVNeX6s/hPj+o6vE2Mk/5kvujFfofiz8U9TbWvid4u1BzlrvV7ucn/emc/1rl60fEUjS+INTdjlmupWJ995rOr8zm+aTZ/ceFgqVCnTWySX3IKKKKg6T139krUDpn7RvgWYNt3Xxgz/10jeP/wBmr9ca/HT9neQxfHn4fFep12zX8DMoP86/Yuvu+Hn+4mvP9D+T/GGmlmmGqd6dvuk/8z88P+ClGkLb/E7wtqYXDXWkGBj6+XM5/wDalfIFfbv/AAU1iUap8PZP4mhvlP0DQY/ma+Iq+azaPLjaiXl+SP23w+qOrwxg5PtJfdOS/QKKKK8k/QwooooAK+of+CdulC/+PN1csoP2HRbiZSezGSKP+Tmvl6vsD/gmtCrfE3xVL/EujhR9DMhP8hXp5YubGU15nw3HNR0uG8bJfyW+9pfqfodX5W/tz35vf2mPE8ecrbRWcK8/9O0bH9XNfqlX5MftkSNJ+0t43LHJE8A/AW8QH8q+s4gdsLFf3l+TP598IYKWeVpPpSl/6XA8Yooor4A/rsKt6VfvpWqWd7H/AKy2mSZceqsCP5VUooTtqKUVJOL2Z+5iOHUMpypGQR3FfIn/AAUo0gXHwu8L6njLWusfZ846CSGRj+sQ/SvrDRGL6LYMxyxt4ySe52ivnH/goZCsv7P6MwyY9YtmX2O2QfyJr9RzJc+Cqeh/BvBU3h+JcG1/Pb77r9T8zKKKK/Lj+8wooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooA/RD/AIJr3Yf4XeKbXPMes+Zj/egjH/slfX1fCP8AwTN8QKl9460N2G+SO1vYl74UyI5/8fjr7ur9OymXNgqfz/Nn8MeIdB0OJ8Wn1cX98Ys/EbxVB9l8UaxCQR5d5MmD14cisqu4+Oejf8I/8Z/HOn7dqQ61dhB/sGZiv/jpFcPX5rUjyzlF9Gf23gqqr4WlVjtKKf3pMKKKKzOw9K/ZrtTefH74fxgbsazbSY/3XDf0r9hK/J/9i7Sm1b9pXwcuMpBJPcufQJbyEf8Aj20fjX6wV95w/G2HnLz/AER/JfjBVUs3w9LtTv8AfKX+R8Ef8FM7oPr/AICts8x213Jj/eeIf+yV8UV9U/8ABRfxAmp/G3TdNjYFdN0iJHHpI8kjn/x0pXytXzGay58bUa7/AJKx+7cBUHh+GcHCXWLf/gUnL9Qoooryj74KKKKACvrr/gmxdhPix4mts8yaI0gH+7PEP/Z6+Ra+jf2BNcTSP2irC2dgv9pWF1aDJ6kKJcf+Qq9LLZcuMpvz/PQ+K41ouvw5jYL+Rv8A8B979D9Qa/Jz9s+D7P8AtM+NkwRmW2fn/atYW/rX6x1+Xf7fGlNp37R2q3BXAv7K0uQfUCIRfziNfXZ/G+Fi+0l+TP528Iqihn1WD+1Sl/6VB/5nzrRRRX5+f18FFFbngXRj4i8beHtKC7jfajb2oU998irj9acU5NJGdWpGlTlUlsk39x+1Om25tNOtYDnMUSIc+wAr5m/4KKXgtvgLZxZ5uNbt4wPpFM3/ALLX1FXxd/wUv1xYfCngnR9/zXN7cXZTPaONUB/8jH9a/T8zkoYKp6W+/Q/hTgWk8TxNg1/e5v8AwFOX6HwFRRRX5ef3eFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFAHvf7EHjZfBn7QuiJNJ5dtrEcmlSHOOZAGjH4yJGPxr9U6/DnT9QuNJv7a9tJWt7u2lWaGVDhkdSCrD3BANfsh8GfiXZ/F34a6H4otCga8gAuYUOfJuF4lj/Bgceowe9fb8P4hOEqD3Wq/X+vM/lzxfyeUMTQzaC92S5JeTV3H702v+3T87v28fCT+Gv2h9Uuwm2DWbW31CPHT7nlP+O6Jj+NfPFfpH/wAFAvhBP42+HNl4s023afUfDjO1wiDLPaPjeffYyq3spc1+blfP5rQdDFz7S1Xz/wCCfr3h/m0M14fw7T96kuSS7OOi++NmFFFKql2CqCzE4AAySa8g/RT68/4Ju+D21L4leI/EbpmDS9OFsrEdJZnGCP8AgMTj/gVfojXif7Ifwfk+D3wc0+0v4PJ13VGOo6grD5o3cAJGf91AoI7MW9an/ay+LqfCD4OateQTeXrWpKdO04D7wldSGkH+4u5s+oUd6/S8DBYDAqVTSyu/6/A/iDinEz4t4qnSwXvKUlTh2stL+l7yv2Pzb/aH8br8RPjX4w12KTzbae/eK3fOQ0MWIoyPqqKfxrzqiivzepN1Juct27n9qYPDU8FhqeFpfDCKivRKyCiivoHTf2F/izqunWt7b6VYNb3MSTRk6hGCVYAjjPoa0pUKte6pRbt2OXH5rgMrUXjq8aaltzNK9t7XPn6ivoeX9gz4uwxu7aTp+1QWP/Exi6D8a+eKKuHq0Le1i1fuLAZtl+a831GvGpy2vytO172vbvZ/cFdb8JPGR+HvxO8L+IySItO1CGebb1MQYCQfihYfjXJUVlCThJSW6O/EUIYmjOhVV4yTT9GrM/cuKVJ4kljdZI3UMrqchgehBr4O/wCClvhBo9Z8G+KY0JSa3l0yZwOFKN5kYJ9/Ml/75Ne5/sTfFxPib8GrKwuZt+teHQunXSsfmaMD9xJ+KDbnuUaup/ah+E7fGL4N6zotrH5urW4F/pw7m4jBIUf7yl0/4HX6ViorMMA3T6q69V0/Q/iXIak+D+LIU8Y7KnNwk+nLLTm9LNS9D8iaKfNDJbzPFKjRSxsVdHGGUjggg9DTK/Mz+4U76oK9u/Yz8IN4v/aJ8LL5Ze302R9TmOM7BEpKH/v4Yx+NeI1+h/8AwTy+Ds3hfwjqPjrUoGivNdAt7FXGCLRTkv8A8DcD8I1I616uWYd4jFQXRav5HwPHWbwyfIcRUbtKacI+bkraeiu/kfX9fmZ/wUE8cJ4n+OQ0iCQPb6BYx2jAHI858yufydFPutfof8R/Hen/AAz8Daz4n1Rwtpptu0xUnBkfokY92Yqo9zX40+KPEV74v8Saprmov5l/qNzJdzsOm92LHHtk8V9Ln+IUaUaC3er9F/wfyPxDwiyeVfH1s1mvdprlj/ilv90d/wDEjLooor4U/q0KKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACvo39jX9o9fgv4uk0bW5yvhHWZFE7sSRZz9FnA/ukYV/YA/w4PzlRW9CvPDVFVpvVHkZtleGzrBVMBi43hNfNPo15p6o/ciOSDULRXRo7m2nQMrKQ6SIw4IPQgg18QfHb/gnvcX+r3Os/Da5toYbhzJJod6/lrETyRA+CNv+y2Mdm6AeR/s6/tneIfgvbQ6Hq8D+I/CicR2zSbbizGefKc8FevyHj0K85+3vBH7XXwp8dW8bW/i2z0q4YDda6y32N0J7ZfCMf91jX3SxGBzWmo1naXZuzXo+v9aH8qSybirw/wAbOvl8XOk/tRi5RkunPFaxa+VtbSaPgq3/AGIPjNPeeQ3hFYVzgzSala7APXIlJP4AmvqD9m/9hW1+HOr2nibxtdW+s65auJbSwtsta2zjkOxYAyOO3AAIz8xwR9HS/FbwTbwedL4x0COHGfMfVIAv57q8y+IH7a3wr8CW0nk66PEt6Adlpoi+fuP/AF04jA/4Fn2NTTy/L8HL2s53t3a/LQ1xnGHGPEtJ4DD4dxUtH7OEk2uqcm3Zd9V5ux7TrmuWHhrSLzVdUu4rDTrSMzT3M7bUjQdSTX5QftQfHq4+PXxDe/hEkHh/Tw1tpds/BEefmlYdncgE+gCjnGTY/aB/an8VfHq6+y3GNG8MxPvg0e2clSR0aV+PMb04AHYA5J8Wrw81zT63+6o/B+f/AAD9T4C4DfD3/ChmFniGrJLVQT316yeza0S0Td2FFFFfOH7UFftj4D/5Efw7/wBg63/9FLX4nV+h/hr/AIKIfDjRvDmlafPovilprS0igdo7S2KllQKSM3A4yK+myTE0cPKo6srXt+p+G+KWS5jnNHCRy+i6ji53t0uo2/I+t7//AI8bn/rm38jX4c1+jl1/wUd+Gs1tLGuh+KwzoVGbS2xyP+vivzjqs8xNHEez9lK9r/oY+FmSZlk0cZ/aFF0+f2dr9bc9/uugooor5c/eD079nn42X3wJ+Itrr0CPc6bKPs2o2an/AF0BIJx23KQGU+ox0Jr9avCnirSvG/h6x1zRL2PUNLvYxLBcRHhh6HuCDkEHkEEHkV+I9eu/AP8AaY8U/APUmGnMNT0Gd911o1y5ETn++h58t8fxAEHAyDgY+hyrM/qb9lV+B/h/wD8c494F/wBY4rHYGyxEVaz0U10TfRro/k9LNfYf7Sn7Dtl8UdVufE3g65ttE8RXBMl3aXAItbxz1fKgmNz3IBDHk4OSfla7/Yf+M1teGBPCS3K5wJ4tStfLb3+aQEfiBX218O/23fhb47t4VutZ/wCEX1Fh89prK+UqnviYZjI9ywPsK9Ti+K3gmeATx+MdAkhIz5iapAV/PdXvVMBl+Nl7WE7X7Nfkz8kwfF3GPC9JYDEYdyUdF7SEm0uylFq67avsnY+Ovgh/wTzvo9Wt9V+JN1brZwsJF0Swl8xpiD0lkAwF9QmSf7wr7pt7eDT7SKCCOO2toECJGgCpGijAAA4AAFeSeNf2uPhR4HgdrjxdZ6pOoO220ZvtjsfTKZUH/eYV8U/tC/tt+Ifi7ZXGg6Bbv4Z8MS5SZRJuurtfSRhwqnui9eQWYcVXt8BlNNxpO8vLVv1fQy/snivxAxkKuOi4Ul1lFxhFdeWL1k3876JtLa/+23+0rD8VNej8JeG7rzfC+lSl5rqJjsvrgcbh6onIU9CSTyNtfLNFFfD4nETxVV1am7P6oybKMLkWBp4DCK0Y9erfVvzb/wAloFFFFcx7YUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQB//Z";
var renderer, scene, camera, controls, glsl;
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x000000);
document.body.appendChild(renderer.domElement);
scene = new THREE.Scene();
loader = new THREE.TextureLoader();
loader.crossOrigin = "";
camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 51200);
camera.position.set(-2048, 2048, -2048);
controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.05;
controls.screenSpacePanning = false;
controls.minDistance = 8;
controls.maxDistance = 5120;
camera.position.set(208.48355078304965, 45.28894677815297, 310.34089790619583);
controls.target.set(0, 0, 0);
var points = [], indices = [], quad_uvs = [];
for(var x = -512; x < 512; x += 128){
for(var z = -512; z < 512; z += 128){
points.push(new THREE.Vector3(x, 0, z));
points.push(new THREE.Vector3(x + 128 , 0, z));
points.push(new THREE.Vector3(x + 128, 0, z + 128));
points.push(new THREE.Vector3(x, 0, z + 128));
}
}
for(var i = 0; i < points.length; i += 4){
indices.push(i, i + 1, i + 2);
indices.push(i + 2, i + 3, i);
}
var geometry = new THREE.BufferGeometry().setFromPoints(points);
for(var i = 0; i < points.length; i += 4){ quad_uvs.push(...[0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0]); }
uvs = new Float32Array(quad_uvs);
geometry.setAttribute( 'uv', new THREE.BufferAttribute( uvs, 2 ) );
geometry.setIndex( indices );
geometry.computeVertexNormals();
glsl = new THREE.ShaderMaterial( {
uniforms: {
textureA: { type: 't', value: new THREE.TextureLoader().load(img) }
},
vertexShader: document.getElementById( "vertexShader" ).textContent,
fragmentShader: document.getElementById( "fragmentShader" ).textContent
} );
glsl.side = THREE.DoubleSide;
var plane = new THREE.Mesh(geometry, glsl);
scene.add(plane);
animate();
function animate(){
controls.update();
renderer.render(scene, camera);
requestAnimationFrame(animate);
}
body { margin: 0; }
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://unpkg.com/three#0.116.0/build/three.min.js"></script>
<script src="https://unpkg.com/three#0.116.0/examples/js/controls/OrbitControls.js"></script>
</head>
<body>
<script id="vertexShader" type="x-shader/x-vertex">
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
varying vec2 vUv;
uniform sampler2D textureA;
void main() {
gl_FragColor = texture2D(textureA, vUv);
}
</script>
</body>
</html>
I've updated your code with a possible solution. You will see that the geometry is now generated slightly differently. The most important part is that you have to generate your texture coordinates in the range [0,1] across the entire geometry and not just for each quad.
var img = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAAQABAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCAIAAgADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDwSiiivxo/0tCiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiuq8I/Crxj49Xd4d8MarrEWcGa0tHeIH3fG0fiaqMZTdoq7Ma1elhoOpWmoxXVtJfezlaK9gf9kT4wRweafA1+VxnCywlv8AvkPn9K8/8V/D3xP4EmWPxF4e1PRGY7UN/avErn/ZLDDfhWs6Famrzg16pnBhs2y/GT9nhsRCcu0ZRb+5M5+iiisD1QooooAKKKKACiiigAooooAKKKKACitrwx4J8Q+Nbprbw/oeo63OuNyafavMVz0ztBx+Nei2/wCyL8YLmDzk8C34TGcSSRI3/fLOD+lbQoVaivCDfomeZic1y/BS5MViIQfaUop/i0eQUV2Pi34O+OPAcTTeIPCer6Vbr1uZ7RxCP+2gG39a46s5QlB2krM66GIo4qHtKE1OPdNNfegoooqToCiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACii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AUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQB//Z";
var renderer, scene, camera, controls, glsl;
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x000000);
document.body.appendChild(renderer.domElement);
scene = new THREE.Scene();
loader = new THREE.TextureLoader();
loader.crossOrigin = "";
camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 51200);
camera.position.set(-2048, 2048, -2048);
controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.05;
controls.screenSpacePanning = false;
controls.minDistance = 8;
controls.maxDistance = 5120;
camera.position.set(208.48355078304965, 45.28894677815297, 310.34089790619583);
controls.target.set(0, 0, 0);
var points = [], indices = [], uvs = [];
var step = 128;
for(var x = -512; x < 512; x += step){
for(var z = -512; z < 512; z += step){
points.push(x, 0, z);
points.push(x + step , 0, z);
points.push(x + step, 0, z + step);
points.push(x, 0, z + step);
var u = x + 512;
var v = z + 512;
uvs.push(u / 1024, v / 1024);
uvs.push((u + step) / 1024 , v / 1024);
uvs.push((u + step) / 1024 ,(v + step) / 1024);
uvs.push(u / 1024, (v + step) / 1024);
}
}
var geometry = new THREE.BufferGeometry();
geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( points, 3 ) );
geometry.setAttribute( 'uv', new THREE.Float32BufferAttribute( uvs, 2 ) );
var positionAttribute = geometry.getAttribute( 'position' );
for(var i = 0; i < positionAttribute.count; i += 4){
indices.push(i, i + 1, i + 2);
indices.push(i + 2, i + 3, i);
}
geometry.setIndex( indices );
geometry.computeVertexNormals();
glsl = new THREE.ShaderMaterial( {
uniforms: {
textureA: { type: 't', value: new THREE.TextureLoader().load(img) }
},
vertexShader: document.getElementById( "vertexShader" ).textContent,
fragmentShader: document.getElementById( "fragmentShader" ).textContent
} );
glsl.side = THREE.DoubleSide;
var plane = new THREE.Mesh(geometry, glsl);
scene.add(plane);
animate();
function animate(){
controls.update();
renderer.render(scene, camera);
requestAnimationFrame(animate);
}
body { margin: 0; }
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://unpkg.com/three#0.116.0/build/three.min.js"></script>
<script src="https://unpkg.com/three#0.116.0/examples/js/controls/OrbitControls.js"></script>
</head>
<body>
<script id="vertexShader" type="x-shader/x-vertex">
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
varying vec2 vUv;
uniform sampler2D textureA;
void main() {
gl_FragColor = texture2D(textureA, vUv);
}
</script>
</body>
</html>
Related
I did tests on particle systems some time ago. because I'm working on it again at the moment. i want to use a texture but i only get black particles. i think the problem lies in the uv coordinates but i don't know how to use it in this case.
I have described in the code where I suspect the problem.
how do i access the texture coordinates in the shader in this case
var camera, controls, scene, renderer, container;
var PI = Math.PI;
var clock = new THREE.Clock();
var plane;
var MAX_Planes = 2000;
var velocity = [];
var geometry;
function init() {
renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true} );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
container = document.getElementById('container');
renderer.setSize(container.clientWidth, container.clientHeight);
container.appendChild( renderer.domElement );
var aspect = container.clientWidth / container.clientHeight;
scene = new THREE.Scene();
scene.background = new THREE.Color( 0x000000 );
camera = new THREE.PerspectiveCamera( 45, container.clientWidth / container.clientHeight, 1, 100000 );
camera.position.set(0, 0, 4000);
controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.enableZoom = true;
controls.enabled = true;
controls.target.set(0, 0, 0);
//---------------shader---------------
var VertexShader = `
varying vec3 vUv;
uniform vec3 pos;
void main() {
vUv = uv;
vec4 finalPosition;
finalPosition = modelViewMatrix * vec4( pos, 1.0 );
finalPosition.xyz += vec3(position.x, position.y, 0.0);
finalPosition = projectionMatrix * finalPosition;
gl_Position = finalPosition;
}`;
var FragmentShader = `
varying vec3 vUv;
uniform sampler2D tDiffuse;
void main() {
gl_FragColor = vec4(texture2D(tDiffuse, vUv).rgb, 1.);
//gl_FragColor = vec4(1.0, 1.0, 0.8, 1.0); //just for testing
}`;
var loader = new THREE.TextureLoader();
var texture = loader.load( 'textures/test.jpg' ); //the texture is loaded correctly. I tested that with a box
var uniform = {
tDiffuse: {value: texture},
pos: { value: new THREE.Vector3(0,0,0) },
}
var material = new THREE.ShaderMaterial( {
uniforms: uniform,
vertexShader: VertexShader,
fragmentShader: FragmentShader,
transparent: true,
depthTest: false,
depthWrite: false
});
//-------------------------------------------------
//create a plane: points, normals, uv
const vertices = [
{ pos: [-20, -20, 0], norm: [ 0, 0, 1], uv: [0, 1], },
{ pos: [ 20, -20, 0], norm: [ 0, 0, 1], uv: [1, 1], },
{ pos: [-20, 20, 0], norm: [ 0, 0, 1], uv: [0, 0], },
{ pos: [ 20, 20, 0], norm: [ 0, 0, 1], uv: [1, 0], },
];
const numVertices = vertices.length;
const positionNumComponents = 3;
const normalNumComponents = 3;
const uvNumComponents = 2;
//arrays for buffergeometry
const positions = new Float32Array(numVertices * positionNumComponents * MAX_Planes);
const normals = new Float32Array(numVertices * normalNumComponents * MAX_Planes);
const uvs = new Float32Array(numVertices * uvNumComponents * MAX_Planes);
//fill arrays with vertices
var posPointer = 0;
var nrmPointer = 0;
var uvPointer = 0;
for(var i = 0; i <= MAX_Planes; i++) {
var posNdx = 0;
var nrmNdx = 0;
var uvNdx = 0;
for (const vertex of vertices) {
positions.set(vertex.pos, posNdx + posPointer);
normals.set(vertex.norm, nrmNdx + nrmPointer);
uvs.set(vertex.uv, uvNdx + uvPointer);
posNdx += positionNumComponents;
nrmNdx += normalNumComponents;
uvNdx += uvNumComponents;
}
posPointer = i * posNdx;
nrmPointer = i * nrmNdx;
uvPointer = i * uvNdx;
}
//create buffergeometry and assign the attribut arrays
geometry = new THREE.BufferGeometry();
geometry.setAttribute('position', new THREE.BufferAttribute(positions, positionNumComponents));
geometry.setAttribute('normal', new THREE.BufferAttribute(normals, normalNumComponents));
geometry.setAttribute('uv', new THREE.BufferAttribute(uvs, uvNumComponents));
var ndx = 0;
var indices = [];
//instead 6 vertices for the both triangles of a plane i used 4, so reindication is neccessary
for(var i = 0; i < MAX_Planes; i++){
indices.push(ndx, ndx + 1, ndx + 2, ndx + 2, ndx + 1, ndx + 3);
ndx += 4;
}
geometry.setIndex(indices);
var materials = [];
geometry.clearGroups();
for(var i = 0; i < MAX_Planes; i++){
geometry.addGroup( 6*i, 6*(i+1), i );
materials.push(material.clone());
}
plane = new THREE.Mesh(geometry, materials);
scene.add(plane);
//----------------------velocity---------------------------
for(var i = 0; i < MAX_Planes; i++){
velocity[i] = new THREE.Vector3(
Math.random()*2-1,
Math.random()*2-1,
Math.random()*2-1);
}
}//-------End init----------
function animate() {
requestAnimationFrame( animate );
render();
}//-------End animate----------
var loop = 0;
function render() {
loop = loop + 0.5;
for(var i = 0; i < MAX_Planes; i++){
var pos = new THREE.Vector3(0, 0, 0);
pos.x += velocity[i].x*loop;
pos.y += velocity[i].y*loop;
pos.z += velocity[i].z*loop;
plane.material[i].uniforms.pos.value = pos;
}
plane.geometry.attributes.position.needsUpdate = true;
plane.geometry.attributes.uv.needsUpdate = true;
camera.updateMatrixWorld();
camera.updateProjectionMatrix();
renderer.render(scene, camera);
}//-------End render----------
my initial assumption was wrong. I suspect the problem now in the regrouping. with the following line i see the texture
plane = new THREE.Mesh(geometry, material);
but that's no use to me. each group "one plane inside the bufferarray" should have its own material and for that i need the grouping but obviously i'm doing something wrong because i don't see anything with the "materials" array
ah, the problem is that the texture is not cloned when the material is cloned. cloning the material only works if I work purely with shader code without texture. if i want to have the texture i have to instantiate the material every time in the for loop
the title make it looks easy but I'm struggling to get this pie chart shader on my 3d model. For this I'm using three js. here is my code till now:
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Site Prof Matheus</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='./styles/main.css'>
<script type='module' src='./src/main.js'></script>
</head>
<body>
</body>
</html>
main.js:
import * as THREE from 'https://cdn.skypack.dev/three'
import { OrbitControls } from 'https://cdn.skypack.dev/three-stdlib/controls/OrbitControls'
import { GLTFLoader } from 'https://cdn.skypack.dev/three-stdlib/loaders/GLTFLoader'
import { vertexShader } from '../shaders/vertex.glsl.js'
import { fragmentShader } from '../shaders/fragment.glsl.js'
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const loader = new GLTFLoader();
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setClearColor(0x002653, 0.5)
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
renderer.setPixelRatio(window.devicePixelRatio);
const r_material = new THREE.ShaderMaterial({ //Roulette material
uniforms: {
iTime: { value: 1.0 },
resolution: { value: new THREE.Vector2 }
},
vertexShader,
fragmentShader
})
loader.load(
'../roulette.glb',
function (gltf) {
gltf.scene.traverse((o) => {
if (o.isMesh) o.material = r_material;
});
scene.add(gltf.scene);
},
function () { },
function (err) {
console.log('error: ' + err);
}
)
camera.position.z = 5;
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableZoom = true;
controls.enableDamping = true;
function animate() {
requestAnimationFrame(animate);
controls.update();
renderer.render(scene, camera);
};
animate();
vertex.glsl.js:
const vertexShader = /* glsl */`
void main()
{
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
`
// uniform vec3 iResolution;
// uniform int SEGMENTCOUNT;
export { vertexShader };
fragment.glsl.js:
const fragmentShader = /* glsl */`
void main() {
gl_FragColor = vec4(0, 1, 0, 1);
gl_Position
}
`
export { fragmentShader };
and here is my roulette.gbl model
the intended result is to have a shader with colors that I choose, all the parts equal, the colors can repeat and the shader should covers the whole mesh, less the bottom. intended result
PS. i see my object looks a flat plain on the image, i guess just need to add some proper light, here is my object geometry just for sake of curiosity: my mesh geometry
PSS. some antialiasing on the pie chart shader would be very welcome
This is how you can do it, modifying a material with .onBeforeCompile():
body{
overflow: hidden;
margin: 0;
}
<script type="module">
import * as THREE from "https://cdn.skypack.dev/three#0.136.0";
import {
OrbitControls
} from "https://cdn.skypack.dev/three#0.136.0/examples/jsm/controls/OrbitControls";
let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 2000);
camera.position.set(0, 1, 1).setLength(12);
let renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);
window.addEventListener("resize", onWindowResize);
let controls = new OrbitControls(camera, renderer.domElement);
scene.add(new THREE.GridHelper());
let light = new THREE.DirectionalLight(0xffffff, 0.5);
light.position.setScalar(1);
scene.add(light, new THREE.AmbientLight(0xffffff, 0.5));
let path = new THREE.Path();
path.moveTo(0, -1);
path.lineTo(4, -1);
path.absarc(4, -0.5, 0.5, Math.PI * 1.5, 0);
path.absarc(4, 0.5, 0.5, 0, Math.PI * 0.5);
path.lineTo(0, -0.5);
let g = new THREE.LatheGeometry(path.getPoints(50), 72);
let m = new THREE.MeshLambertMaterial({
color: 0x00ff7f,
//wireframe: true,
onBeforeCompile: shader => {
shader.vertexShader = `
varying vec3 vPos;
${shader.vertexShader}
`.replace(
`#include <begin_vertex>`,
`#include <begin_vertex>
vPos = position;
`
);
//console.log(shader.vertexShader);
shader.fragmentShader = `
#define ss(a, b, c) smoothstep(a, b, c)
varying vec3 vPos;
${shader.fragmentShader}
`.replace(
`vec4 diffuseColor = vec4( diffuse, opacity );`,
`
vec3 col = diffuse;
int N = 37;
float a = atan(vPos.x,-vPos.z)+PI;
float r = PI2/float(N);
float cId = floor(a/r);
vec3 br = mod(cId, 2.) == 0. ? vec3(0) : vec3(1, 0, 0); // black / red
br = cId == 0. ? vec3(0, 0.75, 0) : br; // green
float d = length(vPos.xz);
float fw = length(fwidth(vPos.xz));
col = mix(col, br, ss(3. - fw, 3., d) - ss(4., 4. + fw, d));
col = mix(diffuse, col, clamp(sign(vPos.y), 0., 1.));
vec4 diffuseColor = vec4( col, opacity );
`
);
//console.log(shader.fragmentShader);
}
})
let o = new THREE.Mesh(g, m);
o.position.y = 0.5;
o.rotation.y = Math.PI;
scene.add(o);
renderer.setAnimationLoop(() => {
renderer.render(scene, camera);
});
function onWindowResize() {
camera.aspect = innerWidth / innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(innerWidth, innerHeight);
}
</script>
I am newbie to Threejs and I am trying to use axesHelper to visualise the three axis of all the objects in a scene. Earlier I was using simple Meshes and all the helpers were working fine. Recently I've moved few objects to Instanced Meshes and the helpers have stopped working for them. I have confirmed this by trying with two helpers.(arrow and axes helper)
I am using react-three-fiber to write for writing my threejs in JSX style.
Here is the code which used to work for me.
<mesh
position={[geometry.position.x, geometry.position.y, geometry.position.z]}
rotation={angle}
geometry={geometry}>
<meshLambertMaterial color={'red'} />
<axesHelper />
</mesh>
Here is the new one which doesn't work.
<instancedMesh
ref={ref}
args={[(null as unknown) as BufferGeometry, (null as unknown) as Material, objects.length]}>
<coneBufferGeometry args={[0.1, 0.1]}>
<instancedBufferAttribute attachObject={['attributes', 'color']} args={[colorArray, 3]}/>
</coneBufferGeometry>
<meshLambertMaterial vertexColors />
<axesHelper />
</instancedMesh>
So now I wanted to confirm if we can use these helpers for instanced meshes or not? I tried looking into three's documentation but was not able to find any answer related to this question.
I am on Threejs r127.
As an option, you can decompose the matrices of instances and pass these values in attributes for InstancedBufferGeometry, based on geometry of AxesHelper.
It's just an example, not the ultimate solution.
body{
overflow: hidden;
margin: 0;
}
<script type="module">
console.clear();
import * as THREE from "https://threejs.org/build/three.module.js";
import {OrbitControls} from "https://threejs.org/examples/jsm/controls/OrbitControls.js";
let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 1000);
camera.position.set(0, 8, 13);
let renderer = new THREE.WebGLRenderer();
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);
let controls = new OrbitControls(camera, renderer.domElement);
let light = new THREE.DirectionalLight(0xffffff, 1.5);
light.position.setScalar(10);
scene.add(light);
scene.add(new THREE.AmbientLight(0xffffff, 1));
let cylGeom = new THREE.CylinderBufferGeometry(0.5, 1, 2, 8);
let cylMat = new THREE.MeshStandardMaterial({color: "red", roughness: 0.25, metalness: 0.75, polygonOffset: true, polygonOffsetFactor: 1});
let cylinder = new THREE.InstancedMesh(cylGeom, cylMat, 100);
let dummy = new THREE.Object3D();
let mat4 = new THREE.Matrix4();
let counter = 0;
let pos = [];
let rot = [];
let scl = [];
for(let z = 0; z < 10; z++){
for(let x = 0; x < 10; x++){
dummy.position.set(-4.5 + x, 0, -4.5 + z).multiplyScalar(4);
dummy.rotation.set(
Math.random() * Math.PI * 2,
Math.random() * Math.PI * 2,
Math.random() * Math.PI * 2
);
dummy.updateMatrix();
cylinder.setMatrixAt(counter, dummy.matrix);
pos.push(dummy.position.x, dummy.position.y, dummy.position.z);
rot.push(dummy.quaternion.x, dummy.quaternion.y, dummy.quaternion.z, dummy.quaternion.w);
scl.push(dummy.scale.x, dummy.scale.y, dummy.scale.z);
counter++;
}
}
cylinder.instanceMatrix.needsUpdate = true;
console.log(cylinder);
scene.add(cylinder);
let axesHelper = new THREE.AxesHelper(2);
console.log(axesHelper);
let lineGeom = new THREE.InstancedBufferGeometry().copy(axesHelper.geometry);
lineGeom.instanceCount = Infinity;
lineGeom.setAttribute("instT", new THREE.InstancedBufferAttribute(new Float32Array(pos), 3));
lineGeom.setAttribute("instR", new THREE.InstancedBufferAttribute(new Float32Array(rot), 4));
lineGeom.setAttribute("instS", new THREE.InstancedBufferAttribute(new Float32Array(scl), 3));
let lineMat = new THREE.LineBasicMaterial({
vertexColors: true,
onBeforeCompile: shader => {
shader.vertexShader = `
attribute vec3 instT;
attribute vec4 instR;
attribute vec3 instS;
// http://barradeau.com/blog/?p=1109
vec3 trs( inout vec3 position, vec3 T, vec4 R, vec3 S ) {
position *= S;
position += 2.0 * cross( R.xyz, cross( R.xyz, position ) + R.w * position );
position += T;
return position;
}
${shader.vertexShader}
`.replace(
`#include <begin_vertex>`,
`#include <begin_vertex>
transformed = trs(transformed, instT, instR, instS);
`
);
console.log(shader.vertexShader);
}
});
let lines = new THREE.LineSegments(lineGeom, lineMat);
scene.add(lines);
window.addEventListener( 'resize', onWindowResize );
let clock = new THREE.Clock();
renderer.setAnimationLoop(()=>{
let t = clock.getDelta();
for(let i = 0; i < counter; i++){
cylinder.getMatrixAt(i, mat4);
mat4.decompose(dummy.position, dummy.quaternion, dummy.scale);
dummy.rotation.x += t;
dummy.rotation.z += t*.5;
dummy.updateMatrix();
cylinder.setMatrixAt(i, dummy.matrix);
cylinder.instanceMatrix.needsUpdate = true;
linesTRS(i, dummy);
}
renderer.render(scene, camera);
})
function linesTRS(index, o){
lineGeom.attributes.instT.setXYZ(index, o.position.x, o.position.y, o.position.z);
lineGeom.attributes.instT.needsUpdate = true;
lineGeom.attributes.instR.setXYZW(index, o.quaternion.x, o.quaternion.y, o.quaternion.z, o.quaternion.w);
lineGeom.attributes.instR.needsUpdate = true;
lineGeom.attributes.instS.setXYZ(index, o.scale.x, o.scale.y, o.scale.z);
lineGeom.attributes.instS.needsUpdate = true;
}
function onWindowResize() {
camera.aspect = innerWidth / innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( innerWidth, innerHeight );
}
</script>
I am making code to turn a sphere into a cube in a vertex shader, but it seems to turn into this weird shape, my logic was this:
The commented out code was the iterative version.
vec3 p = position;
if(true)
{
if(p.y<s&&p.y>-s){
p.x = -(p.x-s);//p.x-=(p.x-s)*t*0.1;
}
if(p.x<s&&p.x>-s){
p.y = -(p.y-s);//p.y-=(p.y-s)*t*0.1;
}
}
gl_Position = projectionMatrix * modelViewMatrix * vec4( p, 1.0 );
But then that turns this:
Into this:
Any help appreciated.
Use THREE.BoxBufferGeometry() as a base, then add another buffer attribute with coodinates for a sphere formation, then interpolate (mix) those coordinates of the box and the sphere in the shader:
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 100);
camera.position.set(1, 3, 5);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var controls = new THREE.OrbitControls(camera, renderer.domElement);
scene.add(new THREE.GridHelper(10, 10));
var side = 2;
var rad = Math.sqrt(3) * 0.5 * side; // radius of the sphere is a half of cube's diagonal
var geom = new THREE.BoxBufferGeometry(side, side, side, 10, 10, 10);
var pos = geom.attributes.position;
var spherePos = []; // array of coordinates for the sphere formation
var vec3 = new THREE.Vector3(); // vector for re-use
for (let i = 0; i < pos.count; i++) {
vec3.fromBufferAttribute(pos, i).setLength(rad); // create coordinate for the sphere formation
spherePos.push(vec3.x, vec3.y, vec3.z);
}
geom.addAttribute("spherePos", new THREE.BufferAttribute(new Float32Array(spherePos), 3));
var mat = new THREE.ShaderMaterial({
uniforms: {
mixShapes: {
value: 0
}
},
vertexShader: `
uniform float mixShapes;
attribute vec3 spherePos;
void main() {
vec3 pos = mix(position, spherePos, mixShapes); // interpolation between shapes
gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
}
`,
fragmentShader: `
void main() {
gl_FragColor = vec4(1.0, 0.0, 1.0,1.0);
}
`,
wireframe: true
});
var shape = new THREE.Mesh(geom, mat);
scene.add(shape);
var gui = new dat.GUI();
gui.add(mat.uniforms.mixShapes, "value", 0.0, 1.0).name("mixShapes");
renderer.setAnimationLoop(() => {
renderer.render(scene, camera)
});
body {
overflow: hidden;
margin: 0;
}
<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js"></script>
If you want to get a cube from a sphere, you can clamp vertices to min and max vectors of a bounding box you need (but accuracy of this approach depends on the amount of vertices of the sphere):
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 100);
camera.position.set(1, 3, 5);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var controls = new THREE.OrbitControls(camera, renderer.domElement);
scene.add(new THREE.GridHelper(10, 10));
var side = 2;
var rad = Math.sqrt(3) * 0.5 * side; // radius of the sphere is a half of cube's diagonal
var geom = new THREE.SphereBufferGeometry(rad, 36, 36);
var mat = new THREE.ShaderMaterial({
uniforms: {
mixShapes: {
value: 0
}
},
vertexShader: `
uniform float mixShapes;
attribute vec3 spherePos;
void main() {
vec3 pos = clamp(position, vec3(${-side * 0.5}), vec3(${side * 0.5})); // clamp to min and max vectors
gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
}
`,
fragmentShader: `
void main() {
gl_FragColor = vec4(1.0, 0.0, 1.0,1.0);
}
`,
wireframe: true
});
var shape = new THREE.Mesh(geom, mat);
scene.add(shape);
renderer.setAnimationLoop(() => {
renderer.render(scene, camera)
});
body {
overflow: hidden;
margin: 0;
}
<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
I have a sphere created with particles in three.js that works perfectly. Now I wanted to put these particles on top of a texture that I have of a world map simulating a 3D planet, I searched the internet but I did not find any information on how to do it, when I put the texture instead of it being outside it ends up getting inside each particle, how could I do that? Any idea ? Thank you all
here is my code
$( document ).ready(function() {
var globe = document.getElementById('globe')
var Maxwidth = window.innerWidth
var Maxheight = window.innerHeight
var scene = new THREE.Scene();
var renderer = new THREE.WebGLRenderer({antilias:true});
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize(Maxwidth,Maxheight)
globe.appendChild(renderer.domElement)
var camera = new THREE.PerspectiveCamera(60, Maxwidth / Maxheight,1,1000);
camera.position.z = 50;
var controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.enableDamping = true; // an animation loop is required when either damping or auto-rotation are enabled
controls.dampingFactor = 0.25;
controls.panningMode = THREE.HorizontalPanning; // default is
THREE.ScreenSpacePanning
controls.maxPolarAngle = Math.PI / 2;
var geometry = new THREE.SphereGeometry( 200, 42, 42 );
geometry.widthSegments = 42;
var colors = [];
for( var i = 0; i < geometry.vertices.length; i++ ) {
// random color
colors[i] = new THREE.Color();
//colors[i].setHSV( Math.random(), 1.0, 1.0 );
}
geometry.colors = colors;
// texture
var texture = new THREE.Texture( generateTexture( ) );
texture.needsUpdate = true; // important
// particle system material
var material = new THREE.ParticleBasicMaterial( {
size: 5,
map: texture,
blending: THREE.AdditiveBlending, // required
depthTest: false, // required
transparent: true,
opacity: 0.7,
vertexColors: true // optional
} );
material.map = THREE.ImageUtils.loadTexture('../img/point_picker.png')
material.anisotropy = 0;
material.magFilter = THREE.NearestFilter;
material.minFilter = THREE.NearestFilter;
var union = new THREE.ParticleSystem( geometry, material );
function generateTexture( ) {
var size = 128;
var canvas = document.createElement( 'canvas' );
canvas.width = size;
canvas.height = size;
var context = canvas.getContext( '2d' );
var centerX = size / 2;
var centerY = size / 2;
var radius = size / 2;
context.beginPath();
context.arc( centerX, centerY, radius, 0, 2 * Math.PI, false );
context.fillStyle = "#FFFFFF";
context.fill();
return canvas;
}
scene.add(union)
renderer.setClearColor(0x2675AD)
renderer.render(scene,camera)
controls.update();
function render(delta){
requestAnimationFrame(render);
renderer.render(scene,camera)
union.rotation.y += 0.0009
}
render()
});
I need something like this
So, this is the option I was talking about in my comment:
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(1.25, 7, 7);
camera.lookAt(scene.position);
var renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setClearColor(0x080808);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var controls = new THREE.OrbitControls(camera, renderer.domElement);
var geom = new THREE.SphereBufferGeometry(5, 120, 60);
var colors = [];
var color = new THREE.Color();
var q = 0xffffff * 0.25;
for (let i = 0; i < geom.attributes.position.count; i++) {
color.set(Math.random() * q + q * 3);
color.toArray(colors, i * 3);
}
geom.addAttribute('color', new THREE.BufferAttribute(new Float32Array(colors), 3));
var loader = new THREE.TextureLoader();
loader.setCrossOrigin('');
var texture = loader.load('https://learningthreejs.com/data/2013-09-16-how-to-make-the-earth-in-webgl/demo/bower_components/threex.planets/images/earthspec1k.jpg');
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set(1, 1);
var disk = loader.load('https://threejs.org/examples/textures/sprites/circle.png');
var points = new THREE.Points(geom, new THREE.ShaderMaterial({
vertexColors: THREE.VertexColors,
uniforms: {
visibility: {
value: texture
},
shift: {
value: 0
},
shape: {
value: disk
},
size: {
value: 0.125
},
scale: {
value: window.innerHeight / 2
}
},
vertexShader: `
uniform float scale;
uniform float size;
varying vec2 vUv;
varying vec3 vColor;
void main() {
vUv = uv;
vColor = color;
vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
gl_PointSize = size * ( scale / length( mvPosition.xyz ) );
gl_Position = projectionMatrix * mvPosition;
}
`,
fragmentShader: `
uniform sampler2D visibility;
uniform float shift;
uniform sampler2D shape;
varying vec2 vUv;
varying vec3 vColor;
void main() {
vec2 uv = vUv;
uv.x += shift;
vec4 v = texture2D(visibility, uv);
if (length(v.rgb) > 1.0) discard;
gl_FragColor = vec4( vColor, 1.0 );
vec4 shapeData = texture2D( shape, gl_PointCoord );
if (shapeData.a < 0.5) discard;
gl_FragColor = gl_FragColor * shapeData;
}
`,
transparent: true
}));
scene.add(points);
var blackGlobe = new THREE.Mesh(geom, new THREE.MeshBasicMaterial({
color: 0x000000
}));
blackGlobe.scale.setScalar(0.99);
points.add(blackGlobe);
var clock = new THREE.Clock();
var time = 0;
render();
function render() {
requestAnimationFrame(render);
time += clock.getDelta();
points.material.uniforms.shift.value = time * 0.1;
renderer.render(scene, camera);
}
body {
overflow: hidden;
margin: 0;
}
<script src="https://cdn.jsdelivr.net/npm/three#0.91.0/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three#0.91.0/examples/js/controls/OrbitControls.js"></script>