mirror of
https://gitee.com/ice-gl/icegl-three-vue-tres.git
synced 2025-04-05 06:22:43 +08:00
2 lines
5.8 KiB
JavaScript
2 lines
5.8 KiB
JavaScript
import{Y as h,a2 as B,j as l,ah as j,aE as C,aL as g,w as F,a3 as A,o as u,c as _,U as p,a7 as b,a8 as S,aQ as k,aT as z,aG as w,Z as M,ae as G,a as R,B as V,C as $,s as P,V as T}from"./vendor-76c85ed2.js";import{_ as L}from"./loading.vue_vue_type_script_setup_true_lang-43ced0f9.js";import{_ as D}from"./pagesShow.vue_vue_type_script_setup_true_lang-35f3b154.js";import"./vanilla-307d3a93.esm-959fd761.js";import"./_commonjsHelpers-725317a4.js";const E=["position"],N=["args"],I=h({__name:"radraA",props:{position:{default:[0,0,0]},size:{default:300},radius:{default:240},color:{default:"#ffff00"},opacity:{default:.9},speed:{default:300},followWidth:{default:220}},setup(c,{expose:s}){const e=c,{onLoop:a}=B(),t={value:0},o=l();a(({delta:n})=>{t.value+=n});const i={transparent:!0,blending:j,depthWrite:!1,side:C,depthTest:!0,vertexShader:"\n varying vec3 vPosition;\n void main() {\n vPosition = position;\n vec4 modelPosition = modelMatrix * vec4(position, 1.0);\n vec4 viewPosition = viewMatrix * modelPosition;\n vec4 projectionPosition = projectionMatrix * viewPosition;\n gl_Position = projectionPosition;\n }\n ",fragmentShader:"\n uniform float uRadius; \n uniform float uTime; \n uniform float uSpeed; \n uniform float uFollowWidth; \n varying vec3 vPosition;\n uniform vec3 ncolor;\n float calcAngle(vec3 oFrag){\n float fragAngle;\n const vec3 ox = vec3(1,0,0);\n float dianji = oFrag.x * ox.x + oFrag.z*ox.z;\n float oFrag_length = length(oFrag); // length是内置函数\n float ox_length = length(ox); // length是内置函数\n float yuxian = dianji / (oFrag_length * ox_length);\n fragAngle = acos(yuxian);\n fragAngle = degrees(fragAngle);\n if(oFrag.z > 0.0) {\n fragAngle = -fragAngle + 360.0;\n }\n float scanAngle = uTime * uSpeed - floor(uTime * uSpeed / 360.0) * 360.0;\n float angle = scanAngle - fragAngle;\n if(angle < 0.0){\n angle = angle + 360.0;\n }\n return angle;\n }\n void main() {\n // length内置函数，取向量的长度\n if(length(vPosition) == 0.0 || length(vPosition) > uRadius-2.0){\n gl_FragColor = vec4( ncolor, 1.0 );\n } else {\n float angle = calcAngle(vPosition);\n if(angle < uFollowWidth){\n // 尾焰区域\n float opacity = 1.0 - angle / uFollowWidth; \n gl_FragColor = vec4( ncolor, 1.0 * opacity ); \n } else {\n // 其他位置的像素均为透明\n gl_FragColor = vec4( ncolor, 0.0 ); \n }\n }\n }\n ",uniforms:{uSpeed:{value:e.speed},uRadius:{value:e.radius},uTime:t,uFollowWidth:{value:e.followWidth},ncolor:{value:new g(e.color)}}};F(o,(n,d)=>{if(n&&d===void 0){const m=new k().makeRotationX(-Math.PI/180*90);o.value.applyMatrix4(m)}});const r=l();return A(()=>{e.color&&(i.uniforms.ncolor.value=new g(e.color)),e.radius&&(i.uniforms.uRadius.value=e.radius)}),l(-Math.PI/180*90),s({MeshRef:r}),(n,d)=>(u(),_("TresMesh",{ref_key:"MeshRef",ref:r,position:e.position},[p("TresCircleGeometry",{ref_key:"TresCircleGeometryRef",ref:o,args:[e.size,1e3]},null,8,N),p("TresShaderMaterial",b(S(i)),null,16)],8,E))}}),O=["position"],Q=["args"],U=h({__name:"radraB",props:{position:{default:[0,0,0]},radius:{default:10},maxRadius:{default:200},color:{default:"#ffff00"},opacity:{default:.5},period:{default:2},height:{default:100}},setup(c,{expose:s}){const e=c,a=l(),t=l(1),o=l(.1),i={color:e.color,opacity:e.opacity,transparent:!0,depthWrite:!0,depthTest:!0,side:C,vertexShader:"\n varying vec4 vPosition;\n void main() {\n vPosition = modelMatrix * vec4(position,1.0);\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n }\n ",fragmentShader:"\n uniform vec3 uColor; // 光墙半径 \n uniform vec3 uMax; \n uniform vec3 uMin;\n uniform mat4 modelMatrix; // 世界矩阵\n varying vec4 vPosition; // 接收顶点着色传递进来的位置数据\n void main() {\n // 转世界坐标\n vec4 uMax_world = modelMatrix * vec4(uMax,1.0);\n vec4 uMin_world = modelMatrix * vec4(uMin,1.0);\n // 根据像素点世界坐标的y轴高度,设置透明度\n float opacity =1.0 - (vPosition.y - uMin_world.y) / (uMax_world.y -uMin_world.y); \n gl_FragColor = vec4( uColor, opacity);\n }\n ",uniforms:{uMax:t,uMin:o,uColor:{value:new g(e.color)}}},r=l();let n=null;F(r,(f,v)=>{f&&v===void 0&&(r.value.computeBoundingBox(),t.value=r.value.boundingBox.max,o.value=r.value.boundingBox.min,n=a.value.scale.clone())});const d=l(new z(new w(0,0,0),new w(0,e.height,0)));A(()=>{e.color&&(i.uniforms.uColor.value=new g(e.color))});const{onLoop:m}=B(),x={value:0};return m(({delta:f})=>{x.value+=f;const y=(x.value%e.period/e.period*(e.maxRadius-e.radius)+e.radius)/e.radius,W=new k().makeScale(y,1,y);n&&(a.value.scale.copy(n.clone().applyMatrix4(W)),a.value.updateMatrix())}),s({MeshRef:a}),(f,v)=>(u(),_("TresMesh",{ref_key:"MeshRef",ref:a,position:e.position,renderOrder:1001},[p("TresTubeGeometry",{ref_key:"TresTubeGeometryRef",ref:r,args:[d.value,20,e.radius,100,!1]},null,8,Q),p("TresShaderMaterial",b(S(i)),null,16)],8,O))}}),K=h({__name:"radars",setup(c){const s=l(),e=M({show:!0,color:"#00c0ff",radius:300}),a=new G({title:"雷达效果",expanded:!0}),t=a.addFolder({title:"A型"});t.addBinding(e,"show",{label:"显示"}),t.addBinding(e,"color",{label:"颜色"}),t.addBinding(e,"radius",{label:"大小",min:1,max:400,step:10});const o=M({show:!0,color:"#ffff00",maxRadius:300}),i=a.addFolder({title:"B型"});return i.addBinding(o,"show",{label:"显示"}),i.addBinding(o,"color",{label:"颜色"}),i.addBinding(o,"maxRadius",{label:"大小",min:10,max:400,step:10}),(r,n)=>(u(),_($,null,[R(L),R(D,null,{ability:V(()=>[e.show?(u(),P(I,{key:0,ref_key:"radraARef",ref:s,color:e.color,radius:e.radius,size:300,position:[10,60,0]},null,8,["color","radius"])):T("",!0),o.show?(u(),P(U,{key:1,position:[600,30,0],color:o.color,height:80,maxRadius:o.maxRadius},null,8,["color","maxRadius"])):T("",!0)]),_:1})],64))}});export{K as default};
|