three.js波浪线条

最新推荐文章于 2024-04-28 16:14:34 发布

可乐大牛

最新推荐文章于 2024-04-28 16:14:34 发布

阅读量578

点赞数 1

分类专栏：杂谈

本文链接：https://blog.csdn.net/qq_44173974/article/details/115101884

版权

杂谈专栏收录该内容

38 篇文章 10 订阅

订阅专栏

效果：
在这里插入图片描述

three.js包

网盘链接
提取码：y0i6

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app"></div>
<script type="" src="js/three.js"></script>
<script type="text/javascript">
    function Initialize(id) {
        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();
            console.log(camera)

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

            document.querySelector("#app").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();
    }

    Initialize("app");
</script>
</body>
</html>

可乐大牛

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
three.js波浪线条

效果：three.js包网盘链接提取码：y0i6代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div id="app"></div><script type="" src="js/three
复制链接

扫一扫