站长字体,c做的网站,石家庄建站外贸网站,门户网站开发介绍在遇到区域展示的时候我们就能看到炫酷的区域选中效果#xff0c;那么代码是怎么编辑的呢#xff0c;今天咱们就好好说说#xff0c;下面看实现效果。 思路#xff1a;
首先#xff0c;光墙肯定有多个#xff0c;那么必须要创建一个新的js文件来作为他的原型对象。这个光… 在遇到区域展示的时候我们就能看到炫酷的区域选中效果那么代码是怎么编辑的呢今天咱们就好好说说下面看实现效果。 思路
首先光墙肯定有多个那么必须要创建一个新的js文件来作为他的原型对象。这个光墙是用c写的但是必须是拿js包裹的否则加入不进Vue项目中。City文件加载引入根据具体的传入参数一一对应上位置。 创建lightwall.js文件传1表示是一个方的光柱2是个圆的光柱
import * as THREE from three;
import vertexShader from /shader/lightWall/vertex.js;
import fragmentShader from /shader/lightWall/fragment.js;
export default class LightWall {constructor(type 1,radius 5,radius1 5,length 2,position { x: 0, z: 0 },) {this.geometry null//type是1表示方形柱2是圆形柱if (type 1) {this.geometry new THREE.BoxBufferGeometry(radius,20,radius1,);}if (type 2) {this.geometry new THREE.CylinderBufferGeometry(radius,radius1,20,32,1,true);}this.material new THREE.ShaderMaterial({vertexShader: vertexShader,fragmentShader: fragmentShader,transparent: true,side: THREE.DoubleSide,});this.mesh new THREE.Mesh(this.geometry, this.material);this.mesh.position.set(position.x, 78, position.z);this.mesh.geometry.computeBoundingBox();this.mesh.scale.set(length, 2, length);// console.log(mesh.geometry.boundingBox);let { min, max } this.mesh.geometry.boundingBox;// 获取物体的高度差let uHeight max.y - min.y;this.material.uniforms.uHeight {value: uHeight,};}remove () {this.mesh.remove();this.mesh.removeFromParent();this.mesh.geometry.dispose();this.mesh.material.dispose();}
}
再就是引入光墙的c代码也就是上面引入的vertex.js
const fragmentShader /*glsl*/
varying vec3 vPosition;
uniform float uHeight;
void main(){// 设置混合的百分比float gradMix (vPosition.yuHeight/2.0)/uHeight;gl_FragColor vec4(0.7,0.5,0.35,1.0-gradMix);}
export default fragmentShader
最后在主文件使用引入到scene中
// 添加光墙
import LightWall from ./LightWall;
const lightWall new LightWall(1, 12, 24, 10, { x: -78, z: -48 });
scene.add(lightWall.mesh); 以上就把这个光墙封装为一个类当使用的时候只需要new就行了是不是很方便呢当然你也可以扩展增加参数使用这个东西如果又不会的可以私信或者留言哦。
