码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2016-08-03 21:42:10      阅读:229      评论:0      收藏:0      [点我收藏+]

标签:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>three.js canvas - lines - random</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 {
            background-color: #000000;
            margin: 0px;
            overflow: hidden;
        }

        a {
            color:#0078ff;
        }
    </style>
</head>
<body>

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

<script src="js/renderers/Projector.js"></script>
<script src="js/renderers/CanvasRenderer.js"></script>

<script>

    var mouseX = 0, mouseY = 0,

            windowHalfX = window.innerWidth / 2,
            windowHalfY = window.innerHeight / 2,

            SEPARATION = 200,
            AMOUNTX = 10,
            AMOUNTY = 10,

            camera, scene, renderer;

    init();
    animate();

    function init() {

        var container, separation = 100, amountX = 50, amountY = 50,
                particles, particle;

        container = document.createElement(div);
        document.body.appendChild(container);

        camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
        camera.position.z = 100;

        scene = new THREE.Scene();

        renderer = new THREE.CanvasRenderer();
        renderer.setPixelRatio( window.devicePixelRatio );
        renderer.setSize( window.innerWidth, window.innerHeight );
        container.appendChild( renderer.domElement );

        // particles

        var PI2 = Math.PI * 2;
        var material = new THREE.SpriteCanvasMaterial( {

            color: 0x99ff99,   //点的颜色
            program: function ( context ) {

                context.beginPath();
                context.arc( 0, 0, 0.5, 0, PI2, true );  //x,y,半径,startAngle,endAngle,anticlockwise
                context.fill();

            }

        } );

        var geometry = new THREE.Geometry();

        for ( var i = 0; i < 100; i ++ ) {

            particle = new THREE.Sprite( material );
            particle.position.x = Math.random()*2  - 1; //应该是在1-65535之间取值,再x2
            particle.position.y = Math.random() *2 - 1;
            particle.position.z = Math.random() *2 - 1;
            particle.position.normalize();
            particle.position.multiplyScalar( Math.random() * 10 + 450 );//在原有的基础上扩大这么多倍(10以内的随机数+450)
            particle.scale.x = particle.scale.y = 10;
            scene.add( particle );

            geometry.vertices.push( particle.position );

        }

        // lines

        var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0xffffff, opacity: 0.5 } ) );//颜色,不透明度
        scene.add( line );

        document.addEventListener( mousemove, onDocumentMouseMove, false );
        document.addEventListener( touchstart, onDocumentTouchStart, false ); //触屏设备
        document.addEventListener( touchmove, onDocumentTouchMove, false );

        //

        window.addEventListener( resize, onWindowResize, false );

    }

    function onWindowResize() {

        windowHalfX = window.innerWidth / 2;
        windowHalfY = window.innerHeight / 2;

        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();

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

    }

    //

    function onDocumentMouseMove(event) {

        mouseX = event.clientX - windowHalfX;
        mouseY = event.clientY - windowHalfY;

    }

    function onDocumentTouchStart( event ) {

        if ( event.touches.length > 1 ) {

            event.preventDefault();

            mouseX = event.touches[ 0 ].pageX - windowHalfX;
            mouseY = event.touches[ 0 ].pageY - windowHalfY;

        }

    }

    function onDocumentTouchMove( event ) {

        if ( event.touches.length == 1 ) {

            event.preventDefault();

            mouseX = event.touches[ 0 ].pageX - windowHalfX;
            mouseY = event.touches[ 0 ].pageY - windowHalfY;

        }

    }

    //

    function animate() {

        requestAnimationFrame( animate );

        render();

    }

    function render() {

        camera.position.x += ( mouseX - camera.position.x ) * .05;
        camera.position.y += ( - mouseY + 200 - camera.position.y ) * .05;
        camera.lookAt( scene.position );

        renderer.render( scene, camera );

    }

</script>
</body>
</html>

 

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

标签:

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!