three.js线条材质和动态流动效果

深碍√TFBOYSˉ_ 2021-11-14 11:04 706阅读 0赞

先看效果：  
![在这里插入图片描述][20190731174648397.gif]  
源码如下：

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
    
            canvas {
                display: block;
            }
    
            #myBox {
                width: 100vw;
                height: 100vh;
                /* margin: 10vh auto; */
            }
        </style>
    </head>
    
    <body>
        <div id="myBox"></div>
        <script type="x-shader/x-vertex" id="vertexshader">
    
            attribute float size;
            attribute vec3 customColor;
    
            varying vec3 vColor;
    
            void main() {
    
                vColor = customColor;
    
                vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
    
                gl_PointSize = size * ( 300.0 / -mvPosition.z );
    
                gl_Position = projectionMatrix * mvPosition;
    
            }
    
        </script>
    
        <script type="x-shader/x-fragment" id="fragmentshader">
    
            uniform vec3 color;
            uniform sampler2D pointTexture;
    
            varying vec3 vColor;
    
            void main() {
    
                gl_FragColor = vec4( color * vColor, 1.0 );
                gl_FragColor = gl_FragColor * texture2D( pointTexture, gl_PointCoord );
    
            }
    
        </script>
        <script type="module">
            import * as THREE from './js/three-src/three.module.js';
            import { OrbitControls } from './js/obj-control/OrbitControls.js';
            var renderer, scene, camera, stats;
    
            var sphere;
    
            var WIDTH = window.innerWidth;
            var HEIGHT = window.innerHeight;
            var maxPoints = 256;
            var drawCount = 1;
            init();
            animate();
    
            function init() {
    
                camera = new THREE.PerspectiveCamera(40, WIDTH / HEIGHT, 1, 10000);
                camera.position.z = 200;
    
                scene = new THREE.Scene();
    
                // var amount = 100000;
                var amount = 1000;
    
                var radius = 200;
    
                var positions = new Float32Array(amount * 3);
                var colors = new Float32Array(amount * 3);
                var sizes = new Float32Array(amount);
    
                var vertex = new THREE.Vector3();
                var color = new THREE.Color(0xffffff);
    
                for (var i = 0; i < amount; i++) {
    
                    vertex.x = (Math.random() * 2 - 1) * radius;
                    vertex.y = (Math.random() * 2 - 1) * radius;
                    vertex.z = (Math.random() * 2 - 1) * radius;
                    vertex.toArray(positions, i * 3);
    
                    if (vertex.x < 0) {
    
                        color.setHSL(0.5 + 0.1 * (i / amount), 0.7, 0.5);
    
                    } else {
    
                        color.setHSL(0.0 + 0.1 * (i / amount), 0.9, 0.5);
    
                    }
    
                    color.toArray(colors, i * 3);
    
                    sizes[i] = 20; //线粗细
    
                }
                var curve = new THREE.CatmullRomCurve3();
                function Point(pos) {
                    this.vector = new THREE.Vector3(pos.x, pos.y, pos.z);
                }
                var points = [
                    new Point({ x: -100, y: 0, z: 0 }),
                    new Point({ x: -50, y: 50, z: 0 }),
                    new Point({ x: 100.199427036501952, y: 0, z: 0 }),
                ]
                points.forEach(function (point) {
                    curve.points.push(point.vector);
                });
                var geometry = new THREE.Geometry();
                geometry.vertices = curve.getPoints(amount - 1);
                var pointArr = [];
                var colorArr = [];
                var objArr = geometry.vertices;
                for (var i = 0; i < objArr.length; i++) {
                    pointArr.push(objArr[i].x);
                    pointArr.push(objArr[i].y);
                    pointArr.push(objArr[i].z);
                    colorArr.push(0);
                    colorArr.push(0);
                    colorArr.push(1);
                }
                // console.log(positions)
                // geometry.setPositions(pointArr);
                pointArr = new Float32Array(pointArr);
                colorArr = new Float32Array(colorArr);
                // console.log(pointArr)
                // console.log(colors)
                var geometry = new THREE.BufferGeometry();
                geometry.addAttribute('position', new THREE.BufferAttribute(pointArr, 3));
                geometry.addAttribute('customColor', new THREE.BufferAttribute(colors, 3));
                geometry.addAttribute('size', new THREE.BufferAttribute(sizes, 1));
    
    
    
                var material = new THREE.ShaderMaterial({
    
                    uniforms: {
                        color: { value: new THREE.Color(0xf0ffff) },
                        pointTexture: { value: new THREE.TextureLoader().load("images/spark1.png") }
                    },
                    vertexShader: document.getElementById('vertexshader').textContent,
                    fragmentShader: document.getElementById('fragmentshader').textContent,
    
                    // blending: THREE.AdditiveBlending,
                    depthTest: false,
                    depthWrite: false,
                    transparent: true
    
                });
    
                sphere = new THREE.Points(geometry, material);
                scene.add(sphere);
    
                //
    
                renderer = new THREE.WebGLRenderer();
                renderer.setPixelRatio(window.devicePixelRatio);
                renderer.setSize(WIDTH, HEIGHT);
    
                var container = document.getElementById('myBox');
                container.appendChild(renderer.domElement);
                var controls = new OrbitControls(camera, renderer.domElement);//控制鼠标移动镜头移动
                controls.damping = 0.2;
    
                window.addEventListener('resize', onWindowResize, false);
    
            }
    
            function onWindowResize() {
    
                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();
    
                renderer.setSize(window.innerWidth, window.innerHeight);
    
            }
    
            function animate() {
    
                requestAnimationFrame(animate);
    
                render();
    
            }
    
            function render() {
    
                var time = Date.now() * 0.005;
    
                // sphere.rotation.z = 0.01 * time;
    
                var geometry = sphere.geometry;
                var attributes = geometry.attributes;
    
                var arr = attributes.position.array.toString().split(",");
    
    
                var delArray = arr.splice(0, 9);
                var newArray = arr.concat(delArray);
    
                attributes.position.array = new Float32Array(newArray);
                attributes.position.needsUpdate = true;
                renderer.render(scene, camera);
    
            }
    
    
        </script>
    </body>
    
    </html>

最近正在做的项目用到了three.js，就做了个小效果，欢迎大家一起讨论。

[20190731174648397.gif]: /images/20211114/688f3f5dbf884615910a08d130542834.png