可视化-three.js波浪线条

项目地址下载
DEMO

function Initialize(opt) {
    var camera, scene, renderer;
    var clock = new THREE.Clock();

    var Config = {
        width: 400,// 长度
        number: 5,// 条数
        u_time: 0,// 时间
        ygap: 10,// y 间隔
        zgap: 5,// x 间隔
        speed: 1,// 速度
    }
    var lines = [];
    function init() {
        camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 10000);
        camera.position.set(0, 100, 300);
        camera.lookAt(new THREE.Vector3(0, 0, 0))
        scene = new THREE.Scene();

        renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);

        document.querySelector(opt.id).appendChild(renderer.domElement);//把canvas加载到dom元素中
        df_canvas = renderer.domElement
        if (THREE.OrbitControls) {
            new THREE.OrbitControls(camera, renderer.domElement);
        }
 
        createWave()
        animate()
    }
    function update(dt) {
        let waveArr = [];
        for (let i = 0; i < Config.number; i++) {
            const arr = [];
            var src = new THREE.Vector3(- Config.width / 2, 0, i * 5);
            var dst = new THREE.Vector3(Config.width / 2, 0, i * 5);
            arr.push(src, dst);
            waveArr.push(arr);
        }
        // 计算位置
        waveArr.forEach((elem, i) => {
            let paths = _tranformPath(elem, 0.5);
            paths.forEach((_elem) => {
                _elem.y = Math.cos(_elem.x * 0.05 + i / 2 + dt) * Config.ygap - i;
                _elem.z = Math.sin(_elem.x * 0.05 + i / 2 + dt) * Config.zgap - i;
                _elem.x = _elem.x + i * 2;
            })
            let line = lines[i]
            let position = [];
            paths.forEach((elem) => {
                position.push(elem.x, elem.y, elem.z)
            })
            line.geometry.addAttribute("position", new THREE.Float32BufferAttribute(position, 3))
        })
    }
    function createWave() {
        for (let i = 0; i < Config.number; i++) {
            const arr = [];
            addLine(arr, i / 5)
        }
    }
    function addLine(vecs, op = 1) {
        let geometry = new THREE.BufferGeometry();
        let material = new THREE.LineBasicMaterial({
            color: 0xffffff,
            depthTest: false,
            transparent: true,
            opacity: op
        });
        let line = new THREE.Line(geometry, material);
        scene.add(line);
        lines.push(line);
    }
    function _tranformPath(arr, dpi = 1) {
        const vecs = [];
        for (let i = 1; i < arr.length; i++) {
            let src = arr[i - 1];
            let dst = arr[i];
            let s = new THREE.Vector3(src.x, src.y, src.z);
            let d = new THREE.Vector3(dst.x, dst.y, dst.z);
            let length = s.distanceTo(d) * dpi;
            let len = parseInt(length);
            for (let i = 0; i <= len; i++) {
                vecs.push(s.clone().lerp(d, i / len))
            }
        }
        return vecs;
    }
    function animate() {
        requestAnimationFrame(animate);
        var dt = clock.getDelta();
        if (dt > 0.2) return;
        if (lines) {
            Config.u_time += dt * Config.speed;
            update(Config.u_time);
        }
        renderer.render(scene, camera);
    }
    init();
}