three.js 光墙效果实现
需求:
要实现一个围栏效果的光墙
方案:
当前只介绍贴图实现方案,其他的材质,uv什么的 咱确实玩不来.
实现:
1.就是创建一个缓冲几何,然后通过计算哪个面贴图哪个面不贴图,(这个是我直接拷贝的别人的,只是实现了一个矩形效果,更多效果直接传入相应的二维坐标(x,z)就行)
LightWallModel(data) { // 光墙效果 let texture=new THREE.TextureLoader().load(this.Model.service + "/models/up-time.png") texture.wrapS=THREE.RepeatWrapping texture.wrapT=THREE.RepeatWrapping let data = [ 0, 0, 25, 0, 25, 25, 0, 25, 0, 0 ] var geometry = new THREE.BufferGeometry() var posArr = [] var h = 5 var uvrr = [] for (let i = 0; i < data.length - 2; i += 2) { posArr.push(data[i], data[i + 1], 0, data[i + 2], data[i + 3], 0, data[i + 2], data[i + 3], h) posArr.push(data[i], data[i + 1], 0, data[i + 2], data[i + 3], h, data[i], data[i + 1], h) uvrr.push(0, 0, 1, 0, 1, 1) uvrr.push(0, 0, 1, 1, 0, 1) } geometry.attributes.position = new THREE.BufferAttribute(new Float32Array(posArr), 3) geometry.attributes.uv = new THREE.BufferAttribute(new Float32Array(uvrr), 2) // new THREE.TextureLoader().load("http://localhost:3000/file/getFile/map/wall.png") geometry.computeVertexNormals() var material = new THREE.MeshLambertMaterial({ map:texture, color: 0x00ffff, side: THREE.DoubleSide, transparent: true, // opacity:0.5, depthTest: false }) let mesh = new THREE.Mesh(geometry, material) mesh.rotateX(-Math.PI / 2) // editor.scene.scene.add(mesh) this.scene.add(mesh); texture.offset.y-=0.01 },