vue-gl
Version:
Vue.js components rendering 3D graphics reactively via three.js
2 lines (1 loc) • 9.2 kB
JavaScript
import{Vector3 as t,Loader as e,FileLoader as s,Group as o,BufferGeometry as i,Float32BufferAttribute as n,LineBasicMaterial as r,Material as a,PointsMaterial as c,MeshPhongMaterial as l,LineSegments as h,Points as u,Mesh as p}from"three";import{VglObject3d as d}from"vue-gl";const m=/^[og]\s*(.+)?/,f=/^mtllib /,g=/^usemtl /,b=/^usemap /,v=new t,j=new t,y=new t,x=new t,w=new t;function V(){const t={objects:[],object:{},vertices:[],normals:[],colors:[],uvs:[],materials:{},materialLibraries:[],startObject:function(t,e){if(this.object&&!1===this.object.fromDeclaration)return this.object.name=t,void(this.object.fromDeclaration=!1!==e);const s=this.object&&"function"==typeof this.object.currentMaterial?this.object.currentMaterial():void 0;if(this.object&&"function"==typeof this.object._finalize&&this.object._finalize(!0),this.object={name:t||"",fromDeclaration:!1!==e,geometry:{vertices:[],normals:[],colors:[],uvs:[],hasUVIndices:!1},materials:[],smooth:!0,startMaterial:function(t,e){const s=this._finalize(!1);s&&(s.inherited||s.groupCount<=0)&&this.materials.splice(s.index,1);const o={index:this.materials.length,name:t||"",mtllib:Array.isArray(e)&&e.length>0?e[e.length-1]:"",smooth:void 0!==s?s.smooth:this.smooth,groupStart:void 0!==s?s.groupEnd:0,groupEnd:-1,groupCount:-1,inherited:!1,clone:function(t){const e={index:"number"==typeof t?t:this.index,name:this.name,mtllib:this.mtllib,smooth:this.smooth,groupStart:0,groupEnd:-1,groupCount:-1,inherited:!1};return e.clone=this.clone.bind(e),e}};return this.materials.push(o),o},currentMaterial:function(){if(this.materials.length>0)return this.materials[this.materials.length-1]},_finalize:function(t){const e=this.currentMaterial();if(e&&-1===e.groupEnd&&(e.groupEnd=this.geometry.vertices.length/3,e.groupCount=e.groupEnd-e.groupStart,e.inherited=!1),t&&this.materials.length>1)for(let t=this.materials.length-1;t>=0;t--)this.materials[t].groupCount<=0&&this.materials.splice(t,1);return t&&0===this.materials.length&&this.materials.push({name:"",smooth:this.smooth}),e}},s&&s.name&&"function"==typeof s.clone){const t=s.clone(0);t.inherited=!0,this.object.materials.push(t)}this.objects.push(this.object)},finalize:function(){this.object&&"function"==typeof this.object._finalize&&this.object._finalize(!0)},parseVertexIndex:function(t,e){const s=parseInt(t,10);return 3*(s>=0?s-1:s+e/3)},parseNormalIndex:function(t,e){const s=parseInt(t,10);return 3*(s>=0?s-1:s+e/3)},parseUVIndex:function(t,e){const s=parseInt(t,10);return 2*(s>=0?s-1:s+e/2)},addVertex:function(t,e,s){const o=this.vertices,i=this.object.geometry.vertices;i.push(o[t+0],o[t+1],o[t+2]),i.push(o[e+0],o[e+1],o[e+2]),i.push(o[s+0],o[s+1],o[s+2])},addVertexPoint:function(t){const e=this.vertices;this.object.geometry.vertices.push(e[t+0],e[t+1],e[t+2])},addVertexLine:function(t){const e=this.vertices;this.object.geometry.vertices.push(e[t+0],e[t+1],e[t+2])},addNormal:function(t,e,s){const o=this.normals,i=this.object.geometry.normals;i.push(o[t+0],o[t+1],o[t+2]),i.push(o[e+0],o[e+1],o[e+2]),i.push(o[s+0],o[s+1],o[s+2])},addFaceNormal:function(t,e,s){const o=this.vertices,i=this.object.geometry.normals;v.fromArray(o,t),j.fromArray(o,e),y.fromArray(o,s),w.subVectors(y,j),x.subVectors(v,j),w.cross(x),w.normalize(),i.push(w.x,w.y,w.z),i.push(w.x,w.y,w.z),i.push(w.x,w.y,w.z)},addColor:function(t,e,s){const o=this.colors,i=this.object.geometry.colors;void 0!==o[t]&&i.push(o[t+0],o[t+1],o[t+2]),void 0!==o[e]&&i.push(o[e+0],o[e+1],o[e+2]),void 0!==o[s]&&i.push(o[s+0],o[s+1],o[s+2])},addUV:function(t,e,s){const o=this.uvs,i=this.object.geometry.uvs;i.push(o[t+0],o[t+1]),i.push(o[e+0],o[e+1]),i.push(o[s+0],o[s+1])},addDefaultUV:function(){const t=this.object.geometry.uvs;t.push(0,0),t.push(0,0),t.push(0,0)},addUVLine:function(t){const e=this.uvs;this.object.geometry.uvs.push(e[t+0],e[t+1])},addFace:function(t,e,s,o,i,n,r,a,c){const l=this.vertices.length;let h=this.parseVertexIndex(t,l),u=this.parseVertexIndex(e,l),p=this.parseVertexIndex(s,l);if(this.addVertex(h,u,p),this.addColor(h,u,p),void 0!==r&&""!==r){const t=this.normals.length;h=this.parseNormalIndex(r,t),u=this.parseNormalIndex(a,t),p=this.parseNormalIndex(c,t),this.addNormal(h,u,p)}else this.addFaceNormal(h,u,p);if(void 0!==o&&""!==o){const t=this.uvs.length;h=this.parseUVIndex(o,t),u=this.parseUVIndex(i,t),p=this.parseUVIndex(n,t),this.addUV(h,u,p),this.object.geometry.hasUVIndices=!0}else this.addDefaultUV()},addPointGeometry:function(t){this.object.geometry.type="Points";const e=this.vertices.length;for(let s=0,o=t.length;s<o;s++){const o=this.parseVertexIndex(t[s],e);this.addVertexPoint(o),this.addColor(o)}},addLineGeometry:function(t,e){this.object.geometry.type="Line";const s=this.vertices.length,o=this.uvs.length;for(let e=0,o=t.length;e<o;e++)this.addVertexLine(this.parseVertexIndex(t[e],s));for(let t=0,s=e.length;t<s;t++)this.addUVLine(this.parseUVIndex(e[t],o))}};return t.startObject("",!1),t}class I extends e{constructor(t){super(t),this.materials=null}load(t,e,o,i){const n=this,r=new s(this.manager);r.setPath(this.path),r.setRequestHeader(this.requestHeader),r.setWithCredentials(this.withCredentials),r.load(t,(function(s){try{e(n.parse(s))}catch(e){i?i(e):console.error(e),n.manager.itemError(t)}}),o,i)}setMaterials(t){return this.materials=t,this}parse(t){const e=new V;-1!==t.indexOf("\r\n")&&(t=t.replace(/\r\n/g,"\n")),-1!==t.indexOf("\\\n")&&(t=t.replace(/\\\n/g,""));const s=t.split("\n");let d="",v="",j=0,y=[];const x="function"==typeof"".trimLeft;for(let t=0,o=s.length;t<o;t++)if(d=s[t],d=x?d.trimLeft():d.trim(),j=d.length,0!==j&&(v=d.charAt(0),"#"!==v))if("v"===v){const t=d.split(/\s+/);switch(t[0]){case"v":e.vertices.push(parseFloat(t[1]),parseFloat(t[2]),parseFloat(t[3])),t.length>=7?e.colors.push(parseFloat(t[4]),parseFloat(t[5]),parseFloat(t[6])):e.colors.push(void 0,void 0,void 0);break;case"vn":e.normals.push(parseFloat(t[1]),parseFloat(t[2]),parseFloat(t[3]));break;case"vt":e.uvs.push(parseFloat(t[1]),parseFloat(t[2]))}}else if("f"===v){const t=d.substr(1).trim().split(/\s+/),s=[];for(let e=0,o=t.length;e<o;e++){const o=t[e];if(o.length>0){const t=o.split("/");s.push(t)}}const o=s[0];for(let t=1,i=s.length-1;t<i;t++){const i=s[t],n=s[t+1];e.addFace(o[0],i[0],n[0],o[1],i[1],n[1],o[2],i[2],n[2])}}else if("l"===v){const t=d.substring(1).trim().split(" ");let s=[];const o=[];if(-1===d.indexOf("/"))s=t;else for(let e=0,i=t.length;e<i;e++){const i=t[e].split("/");""!==i[0]&&s.push(i[0]),""!==i[1]&&o.push(i[1])}e.addLineGeometry(s,o)}else if("p"===v){const t=d.substr(1).trim().split(" ");e.addPointGeometry(t)}else if(null!==(y=m.exec(d))){const t=(" "+y[0].substr(1).trim()).substr(1);e.startObject(t)}else if(g.test(d))e.object.startMaterial(d.substring(7).trim(),e.materialLibraries);else if(f.test(d))e.materialLibraries.push(d.substring(7).trim());else if(b.test(d))console.warn('THREE.OBJLoader: Rendering identifier "usemap" not supported. Textures must be defined in MTL files.');else if("s"===v){if(y=d.split(" "),y.length>1){const t=y[1].trim().toLowerCase();e.object.smooth="0"!==t&&"off"!==t}else e.object.smooth=!0;const t=e.object.currentMaterial();t&&(t.smooth=e.object.smooth)}else{if("\0"===d)continue;console.warn('THREE.OBJLoader: Unexpected line: "'+d+'"')}e.finalize();const w=new o;w.materialLibraries=[].concat(e.materialLibraries);if(!0===!(1===e.objects.length&&0===e.objects[0].geometry.vertices.length))for(let t=0,s=e.objects.length;t<s;t++){const s=e.objects[t],o=s.geometry,d=s.materials,m="Line"===o.type,f="Points"===o.type;let g=!1;if(0===o.vertices.length)continue;const b=new i;b.setAttribute("position",new n(o.vertices,3)),o.normals.length>0&&b.setAttribute("normal",new n(o.normals,3)),o.colors.length>0&&(g=!0,b.setAttribute("color",new n(o.colors,3))),!0===o.hasUVIndices&&b.setAttribute("uv",new n(o.uvs,2));const v=[];for(let t=0,s=d.length;t<s;t++){const s=d[t],o=s.name+"_"+s.smooth+"_"+g;let i=e.materials[o];if(null!==this.materials)if(i=this.materials.create(s.name),!m||!i||i instanceof r){if(f&&i&&!(i instanceof c)){const t=new c({size:10,sizeAttenuation:!1});a.prototype.copy.call(t,i),t.color.copy(i.color),t.map=i.map,i=t}}else{const t=new r;a.prototype.copy.call(t,i),t.color.copy(i.color),i=t}void 0===i&&(i=m?new r:f?new c({size:1,sizeAttenuation:!1}):new l,i.name=s.name,i.flatShading=!s.smooth,i.vertexColors=g,e.materials[o]=i),v.push(i)}let j;if(v.length>1){for(let t=0,e=d.length;t<e;t++){const e=d[t];b.addGroup(e.groupStart,e.groupCount,t)}j=m?new h(b,v):f?new u(b,v):new p(b,v)}else j=m?new h(b,v[0]):f?new u(b,v[0]):new p(b,v[0]);j.name=s.name,w.add(j)}else if(e.vertices.length>0){const t=new c({size:1,sizeAttenuation:!1}),s=new i;s.setAttribute("position",new n(e.vertices,3)),e.colors.length>0&&void 0!==e.colors[0]&&(s.setAttribute("color",new n(e.colors,3)),t.vertexColors=!0);const o=new u(s,t);w.add(o)}return w}}var L,z={extends:d,beforeCreate:function(){L||(L=new I)},data:function(){return{obj:null}},computed:{inst:function(){return this.obj?this.obj:d.computed.inst.call(this)}},props:{src:{type:String,required:!0}},watch:{src:{handler:function(t){var e=this;L.load(t,(function(t){e.obj=t,e.change()}))},immediate:!0}}};export{z as default};