three.js实现信号波效果
图例

步骤
- 创建平面,添加贴图,平移几何体
- 缩放
代码
<template><div class="app"><div ref="canvesRef" class="canvas-wrap"></div></div>
</template><script setup>
import { ref, onMounted } from "vue";
import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";const canvesRef = ref(null);
const canvasWidth = window.innerWidth;
const canvasHeight = window.innerHeight;
let scene;
let camera;
let renderer;
let axesHelper;
let cameraControls;
let mesh;
var l = 60;
var s = 1;
init();
render();
function init() {scene = new THREE.Scene();camera = new THREE.PerspectiveCamera(45,canvasWidth / canvasHeight,1,10000);camera.position.set(0, 0, 350);camera.lookAt(0, 0, 0);addModel();axesHelper = new THREE.AxesHelper(200);scene.add(axesHelper);renderer = new THREE.WebGLRenderer();renderer.setSize(canvasWidth, canvasHeight);cameraControls = new OrbitControls(camera, renderer.domElement);
}function addModel() {const g = new THREE.PlaneGeometry(2, 1);g.translate(-1, 0, 0);const m = new THREE.MeshBasicMaterial({color: 0x00ffff,map: new THREE.TextureLoader().load("../src/assets/img/信号波.png"),side: THREE.DoubleSide,transparent: true,});mesh = new THREE.Mesh(g, m);console.log(mesh);scene.add(mesh);
}function render() {renderer.render(scene, camera);s += 0.6;mesh.scale.set(s, s, s);if (s <= l * 0.2) {mesh.material.opacity = (s - 1) / (l * 0.2 - 1); } else if (s > l * 0.2 && s <= l) {mesh.material.opacity = 1 - (s - l * 0.2) / (l - l * 0.2); } else {s = 1.0;}requestAnimationFrame(render);
}
onMounted(() => {canvesRef.value.appendChild(renderer.domElement);
});
</script><style lang="scss" scoped>
.app {position: relative;
}
</style>
图片(透明的)
