<!DOCTYPE html>

<html lang="en">

<head>

    <title>three.js webgl - custom attributes [lines]</title>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

    <style>

        body {

            color: #ffffff;

            font-family:Monospace;

            font-size:13px;

            text-align:center;

            font-weight: bold;

            background-color: #000000;

            margin: 0px;

            overflow: hidden;

        }

        #info {

            color: #fff;

            position: absolute;

            top: 0px; width: 100%;

            padding: 5px;

            z-index:100;

        }

    </style>

</head>

<body>

<div id="info"><a href="http://threejs.org" target="_blank">three.js</a> - custom attributes example</div>

<div id="container"></div>

<script src="js/Detector.js"></script>

<script src="js/libs/stats.min.js"></script>

<script src="../build/three.js"></script>

<script type="x-shader/x-vertex" id="vertexshader">

    uniform float amplitude;

    attribute vec3 displacement;

    attribute vec3 customColor;

    varying vec3 vColor;

    void main() {

    vec3 newPosition = position + amplitude * displacement;

    vColor = customColor;

    gl_Position = projectionMatrix * modelViewMatrix * vec4( newPosition, 1.0 );

    }

</script>

<script type="x-shader/x-fragment" id="fragmentshader">

    uniform vec3 color;

    uniform float opacity;

    varying vec3 vColor;

    void main() {

    gl_FragColor = vec4( vColor * color, opacity );

    }

</script>

<script>

    if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

    var renderer, scene, camera, stats;

    var object, uniforms;

    var loader = new THREE.FontLoader();

    loader.load( 'fonts/helvetiker_bold.typeface.json', function ( font ) {

        init( font );

        animate();

    } );

    function init( font ) {

        camera = new THREE.PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 1, 10000 );

        camera.position.z = 400;

        scene = new THREE.Scene();

        uniforms = {

            amplitude: { value:1.0 }, //波动幅度？因后面有设置，所有这里值并没有太大的影响

            opacity:   { value: 0.3}, //不透明度（影响的是字体与Z轴平行面的线的透明度）

            color:     { value: new THREE.Color( 0xff0000 ) }

        };

        var shaderMaterial = new THREE.ShaderMaterial( {

            uniforms:       uniforms,

            vertexShader:   document.getElementById( 'vertexshader' ).textContent,

            fragmentShader: document.getElementById( 'fragmentshader' ).textContent,

            blending:       THREE.AdditiveBlending,

            depthTest:      false,

            transparent:    true

        });

        var geometry = new THREE.TextGeometry( 'K o', {

            font: font,

            size: 50,     //字体大小

            height: 15,   //字体厚度

            curveSegments: 5, //曲线段

            bevelThickness: 0,//齿厚（两侧再次向外延伸）

            bevelSize:1.5,

            bevelEnabled: true,

            bevelSegments: 10,  //曲边由几条折线构成

            steps:40  //影响字体上下侧面的分段（影响的是字体与Z轴平行面的线的分段）

        } );

        geometry.center();

        var vertices = geometry.vertices;

        var buffergeometry = new THREE.BufferGeometry();

        var position = new THREE.Float32Attribute( vertices.length * 3, 3 ).copyVector3sArray( vertices );

        buffergeometry.addAttribute( 'position', position );

        var displacement = new THREE.Float32Attribute( vertices.length * 3, 3 );

        buffergeometry.addAttribute( 'displacement', displacement );

        var customColor = new THREE.Float32Attribute( vertices.length * 3, 3 );

        buffergeometry.addAttribute( 'customColor', customColor );

        var color = new THREE.Color( 0xffffff );

        for( var i = 0, l = customColor.count; i < l; i ++ ) {

            color.setHSL( i / l, 1.0, 0.4 );

            color.toArray( customColor.array, i * customColor.itemSize );

        }

        object = new THREE.Line( buffergeometry, shaderMaterial );

        object.rotation.x = Math.PI*2;

        scene.add( object );

        renderer = new THREE.WebGLRenderer( { antialias: true } );

        renderer.setClearColor( 0x050505 );

        renderer.setPixelRatio( window.devicePixelRatio );

        renderer.setSize( window.innerWidth, window.innerHeight );

        var container = document.getElementById( 'container' );

        container.appendChild( renderer.domElement );

        stats = new Stats();

        container.appendChild( stats.dom );

        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();

        stats.update();

    }

    function render() {

        var time = Date.now() * 0.001;

        object.rotation.y = Math.PI*2+time ;

        uniforms.amplitude.value = Math.sin( 0.5 * time )*0.1;

        uniforms.color.value.offsetHSL( 0.0005, 0, 0 );

        var attributes = object.geometry.attributes;

        var array = attributes.displacement.array;

        for ( var i = 0, l = array.length; i < l; i += 3 ) {

            array[ i     ] += 0.3 * ( 0.5 - Math.random() );

            array[ i + 1 ] += 0.3 * ( 0.5 - Math.random() );

            array[ i + 2 ] += 0.3 * ( 0.5 - Math.random() );

        }

        attributes.displacement.needsUpdate = true;

        renderer.render( scene, camera );

    }

</script>

</body>

</html>

THREE.js代码备份——webgl - custom attributes [lines]（自定义字体显示、控制字图的各个属性）的更多相关文章

  1. THREE.js代码备份——webgl - scene animation（通过加载json文件来加载动画和模型）

    <!DOCTYPE html> <html lang="en"> <head> <title>three.js webgl - sc ...

  2. THREE.js代码备份——webgl - geometry - dynamic(模拟海浪，通过时间（毫秒）来控制平面点的运动模拟海浪，鼠标控制写在另外的js中)

    HTML: <!DOCTYPE html> <html lang="en"> <head> <title>three.js webg ...

  3. THREE.js代码备份——webgl - materials - cube refraction [balls](以上下左右前后6张图片构成立体场景、透明球体效果)

    <!DOCTYPE html> <html lang="en"> <head> <title>three.js webgl - ma ...

  4. THREE.js代码备份——canvas - lines - colors(希尔伯特曲线3D、用HSL设置线颜色)

    <!DOCTYPE html> <html lang="en"> <head> <title>three.js canvas - l ...

  5. THREE.js代码备份——canvas_lines(随机点、画线)

    <!DOCTYPE html> <html lang="en"> <head> <title>three.js canvas - l ...

  6. THREE.js代码备份——线框cube、按键、鼠标控制

    <!DOCTYPE html> <html lang="en"> <head> <title>three.js canvas - g ...

  7. THREE.js代码备份——canvas - geometry - earth(球体贴纹理)

    <!DOCTYPE html> <html lang="en"> <head> <title>three.js canvas - g ...

  8. THREE.js代码备份——canvas_ascii_effect(以AscII码显示图形)

    <!DOCTYPE html> <html lang="en"> <head> <title>three.js - ASCII Ef ...

  9. 图片攻击-BMP图片中注入恶意JS代码 <转载>

    昨天看到一篇文章<hacking throung images>,里面介绍了如何在BMP格式的图片里注入JS代码,使得BMP图片既可以正常显示, 也可以运行其中的JS代码,觉得相当有趣. ...

随机推荐

  1. ReportNG 替换testng过程中遇到的问题

    1. Exception in thread "main" java.lang.NoClassDefFoundError: org/apache/commons/collectio ...

  2. [ZJOI2010]Perm

    [ZJOI2010]Perm 题目 称一个1,2,...,N的排列P1,P2...,Pn是Magic的,当且仅当2<=i<=N时,Pi>Pi/2. 计算1,2,...N的排列中有多少 ...

  3. 暑假集训D21总结

    考试 今天考了一大圈 不可做 题 本来是爆零的,后来把数据改了一下,成功暴力骗了5分= = 刷题 无限水题$ing$,然后就$GG$了 生活 不开心$ing$,没有啥好写的 今天就是莫名的不开心 歌 ...

  4. hdu 4786 最小生成树与最大生成树

    /* 题意 :有一些边权值为1和0,判断是否存在一个生成树使得他的总权值为一个斐波那契数. 解法:建立一个最小生成树向里面加权值为1的边替换为0的边,保证原来的联通.因为权值为1,可直接求出最大生成树 ...

  5. 数字统计(2010年NOIP全国联赛普及组)

    题目描述 请统计某个给定范围[L, R]的所有整数中,数字 2 出现的次数. 比如给定范围[2, 22],数字 2 在数 2 中出现了 1 次,在数 12 中出现 1 次,在数 20 中出 现 1 次 ...

  6. 【ACM】NYOJ_69_数的长度_20130725

    数的长度时间限制:3000 ms  |  内存限制:65535 KB 难度:1描述     N!阶乘是一个非常大的数,大家都知道计算公式是N!=N*(N-1)······*2*1.现在你的任务是计算出 ...

  7. ACdream 1112 Alice and Bob (博弈&amp;&amp;素数筛选优化)

    题目链接:传送门 游戏规则: 没次能够将一堆分成两堆 x = a*b (a!=1&&b!=1)x为原来堆的个数,a,b为新堆的个数. 也能够将原来的堆的个数变成原来堆的约数y.y!=x ...

  8. vbs setkeys 特殊符号

    set keys={~}!^@^#^${%%}{^&^}{^^}{*}{(}{)}{_}{-}{=}{+}.;:'"

  9. P1121 环状最大两段子段和

    P1121 环状最大两段子段和 题目描述 给出一段环状序列,即认为A[1]和A[N]是相邻的,选出其中连续不重叠且非空的两段使得这两段和最大. 输入输出格式 输入格式: 输入文件maxsum2.in的 ...

  10. B1230 [Usaco2008 Nov]lites 开关灯 线段树

    就是线段树维护异或和.之前我线段树区间修改down都是修改当前区间,结果debug出不来,改成每次向下了. 题干: Description Farmer John尝试通过和奶牛们玩益智玩具来保持他的奶 ...