可视化-threejs文字滚动效果

	var texture_up;
    this.planeUp = []
	var flyShader = {
        vertexshader: `
        varying vec2 vUv;
        varying float u_opacity;
        uniform sampler2D texture;
        uniform float time;
        uniform float vsize;
        uniform float vheight;
        void main() { 
            vUv = vec2(uv.x,uv.y - time);
            float op = (position.y + vheight / 2.0) / vheight;   
            u_opacity = sin( op * 3.1415);
            vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
            gl_Position = projectionMatrix * mvPosition;
            gl_PointSize = vsize * 300.0 / (-mvPosition.z);
        }`,
        fragmentshader: `
            varying vec2 vUv;
            varying float u_opacity;
            uniform sampler2D texture;
            uniform vec3 vcolor; 
            void main() {
                gl_FragColor = vec4(vcolor,u_opacity)*texture2D( texture, vUv );
            }
        `
    }
	function initContent() {
        // 生成内容
        var w = 16, h = 64; // 宽高
        texture_up = createCanvas(w, h, '101010', 4); // 展示的字体
        texture_up.wrapS = THREE.RepeatWrapping; // 纹理设置
        texture_up.wrapT = THREE.RepeatWrapping;
        for (let index = 0; index < 40; index++) {
            var p = addUpPlane(w, h, texture_up, new THREE.Vector3(random(), random(), random()));
            thm.scene.add(p);
            thm.planeUp.push(p);
        }
    }
    /**
     * [addUpPlane 创建mesh]
     *
     * @param   {[type]}  width     [width 宽度]
     * @param   {[type]}  height    [height 高度]
     * @param   {[type]}  textur    [textur 纹理]
     * @param   {[type]}  position  [position 位置]
     *
     * @return  {[type]}            [return mesh]
     */
    function addUpPlane(width, height, textur, position) {
        textur.repeat.x = 1;
        textur.repeat.y = 1;
        var planeGeometry = new THREE.PlaneBufferGeometry(width, height, 1, 32);
        var material = new THREE.ShaderMaterial({
            uniforms: {
                time: { value: 0 },// time
                texture: { value: textur }, // 图片
                vsize: { value: 400 }, // 大小
                vcolor: { value: new THREE.Color(0.0, 1.0, 1.0) }, // 颜色
                vheight: { value: height }
            },
            transparent: true,
            depthTest: false,
            fragmentShader: flyShader.fragmentshader,
            vertexShader: flyShader.vertexshader
        })
        var plane_up = new THREE.Mesh(planeGeometry, material);
        plane_up.rotation.x -= Math.PI / 2;
        plane_up.position.copy(position);
        return plane_up;
    }
    /**
     * [createCanvas 创建纹理]
     *
     * @param   {[type]}  w     [w 宽度]
     * @param   {[type]}  h     [h 高度]
     * @param   {[type]}  text  [text 字体]
     * @param   {[type]}  dpi   [dpi 越高纹理越清晰]
     *
     * @return  {[type]}        [return 纹理]
     */
    function createCanvas(w, h, text, dpi) {
        //数字展示动效 
        dpi = dpi || 4;
        text = String(text);
        var width = w * dpi;
        var height = h * dpi;
        let canvas = document.createElement('canvas');
        canvas.width = width;
        canvas.height = height;
        var ctx = canvas.getContext("2d");
        ctx.fillStyle = "rgba(0,0,0,0)";
        var size = width / 2;
        ctx.font = size + "px 微软雅黑"//和css中的font一样，不过没有了行高
        ctx.textAlign = 'left'//和css中的text-align一样
        ctx.textBaseline = 'left'//这个是文本基线的意思
        ctx.fillStyle = '#ffffff';//你的字体颜色  
        for (let i = 0; i < text.length; i++) {
            ctx.fillText(text[i], (width - size) / 2, i * (height / (text.length - 1)));
        }
        var textur = new THREE.Texture(canvas);
        textur.needsUpdate = true;
        return textur;
    }

// rennder 
// 设置纹理偏移
        if (texture_up) {
            texture_up.offset.y -= dt / 4; 
        }
        thm.planeUp.forEach(function (elem) {
            if (elem.material) {
                elem.material.uniforms.time.value += dt / 5;
            }
        })