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

时间：2016-08-05 21:32:20 阅读：372 评论：0 收藏：0 [点我收藏+]

标签：

<!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>

标签：

原文地址：http://www.cnblogs.com/ForRickHuan/p/5742757.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行