当前位置: 首页 > Web前端 > vue.js

Threejs添加报警点

时间:2023-04-01 00:19:43 vue.js

1.鍒濆鍖栧満鏅紝鍒涘缓鎶ヨ鐐规坊鍔犲埌sceneserverGroup=newTHREE.Group();scene.add(serverGroup);pointGroup=this.addAletPoint([1.5,112,0])pointGroup.mesh.name='zhongxin'serverGroup.add(pointGroup.mesh);serverGroup.add(pointGroup.mesh2);//娣诲姞鎶ヨ鐐筧ddAletPoint(position){letvertexShader=['varyingvec3vVertexWorldPosition;','varyingvec3vVertexNormal;','鏀瑰彉vec4vFragColor锛?,'voidmain(){','vVertexNormal=normalize(normalMatrix*normal);',//灏嗘硶绾胯浆鎹负瑙嗗浘鍧愭爣绯?vVertexWorldPosition=(modelMatrix*vec4(position,1.0)).xyz;',//灏嗛《鐐硅浆鎹负涓栫晫鍧愭爣绯?//setgl_Position','gl_Position=projectionMatrix*modelViewMatrix*vec4(position,1.0);','}'].join('\n')letfragmentShader1=['uniformvec3glowColor;','uniformfloatcoefficient;','uniformfloatpower;','varyingvec3vVertexNormal;','varyingvec3vVertexWorldPosition;','varyingvec4vFragColor;','voidmain(){','vec3worldCameraToVertex=vVertexWorldPosition-cameraPosition;',//浠庣浉鏈轰綅缃埌椤剁偣浣嶇疆worldcoordinatesystem'vec3viewCameraToVertex=(viewMatrix*vec4(worldCameraToVertex,0.0)).xyz;',//鎽勫儚鏈轰綅缃埌瑙嗗浘鍧愭爣绯讳腑椤剁偣浣嶇疆鐨勮窛绂?viewCameraToVertex=normalize(viewCameraToVertex);',//Normalization'floatintensity=pow(coefficient+dot(vVertexNormal,viewCameraToVertex),power);','gl_FragColor=vec4(glowColor,intensity);','}'].join('\n')//瑕佺偣閫忔槑搴︽鍦ㄩ檷浣巐etsphere=newTHREE.SphereBufferGeometry(2,16,16)letmaterial=newTHREE.ShaderMaterial({uniforms:{coefficient:{type:'f',value:1.0},power:{type:'f',value:1},glowColor:{type:'c',value:newTHREE.Color('#ff0000')}},vertexShader:vertexShader,fragmentShader:fragmentShader1,娣峰悎:THREE.NormalBlending,//depthWrite:false,//depthTest:true,transparent:true})letmesh=newTHREE.Mesh(sphere,material)letsphere2=newTHREE.SphereBufferGeometry(0.1,16,16)letmaterial2=newTHREE.MeshPhongMaterial({color:newTHREE.Color('#ff0000')//depthWrite:false,//depthTest:true})letmesh2=newTHREE.Mesh(sphere2,material2)mesh.position.set(...position)//锛岄珮搴︼紝mesh2.position.set(...position)//锛岄珮搴︼紝return{mesh:mesh,mesh2:mesh2}},2.鍘熶綔鑰呭湴鍧€锛氿煈囸煈囸煈噃ttps://segmentfault.com/u/鍝?..3.鎺у埗鎺у埗鎶ヨ鐐规樉绀哄拰闂儊锛坙ightI鍦╠ata()涓凡缁忓垵濮嬪寲锛屼綔涓哄厜婧愮殑鐩村緞锛岀敱scale鎺у埗锛?/鎶ヨ鐐规樉绀哄拰闂儊openPointe(){letpointe=serverGroup.children.filter(item=>item.type=="Mesh")if(this.lightI<100){this.lightI=this.lightI+10letj=this.lightI/100pointe.forEach(element=>{if(element.name=="zhongxin"){element.material.opacity=1element.scale.set(j,j,j);}});}else{this.lightI=0}},//鎶ヨ鐐归殣钘忎笉闂儊closePointe(){letpointe=serverGroup.children.filter(item=>item.type=="Mesh")pointe.forEach(element=>{element.material.opacity=0element.scale.set(0,0,0);});this.lightI=0},