<!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(随机点、画线)的更多相关文章

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  9. 代码备份 | 博客侧边栏公告（支持HTML代码）（支持JS代码）

    博客侧边栏公告(支持HTML代码)(支持JS代码) <div id='btnList'> <a class="ivu-btn ivu-btn-primary" h ...

随机推荐

  1. iOS开发——UI篇Swift篇&玩转UItableView（四）自定义&封装

    UItableView自定义&封装 一:Model class AppsModel: NSObject { //定义模型的三个属性 var imageName:String! //图片名称 v ...

  2. careercup-高等难度 18.9

    18.9 随机生成一些数字并传入某个方法.编写一个程序,每当收到新字符数字时,找出并记录中位数. 类似:设计一个数据结构,包括两个函数,插入数据和获得中位数 解法: 一种解法是使用两个优先级堆:一个大 ...

  3. android学习日记14--网络通信

    一.Android网络通信 android网络通信一般有三种:java.net.*(标准Java接口).org.apache接口(基于http协议)和android.net.*(Android网络接口 ...

  4. RC2加密算法

    1.introduction RC2是一种传统的私钥块加密算法,曾经被考虑作为DES算法的替代品.输入和输出块大小都是64bits.而密钥是可变的,从1byte到128bytes,现在常用的是8字节. ...

  5. PHP自动分表程序

    http://blog.zol.com.cn/2210/article_2209590.html /** * 分表程序 *  * @author Shen Xi shen.xi@zol.com.cn  ...

  6. 关于解决android4.0系统中菜单无法添加Icon的问题

    在Android4.0系统中,创建菜单Menu,然后通过setIcon方法给菜单添加图标是无效的,图标不会显出来,而之前的系统中是可以显示出来的.这个问题的根本原因在于4.0系统中,涉及到菜单的源码类 ...

  7. solr 高亮配置

    solrj中配置: 两种高亮开启设置 // solrParams.setHighlight(true); solrParams.setParam("hl", "true& ...

  8. Xcode中修改整个项目工程名称步骤

    1:首先选中项目WaterDropTest.xcodeproj文件后单击鼠标->输入我们要重新命名的工程名,然后会弹出一个对话框,点击rename按钮 2.xcode菜单中选->produ ...

  9. Linux常用命令之awk

    标题:awk命令的使用 作用:awk是非常好用的数据处理工具,主要处理每一行的字段内的数据,默认的字段的分割符为空格键或[tab]键 一.awk脚本的基本结构: awk 'BEGIN{print &q ...

  10. 第02篇. Jetty 9 实战之安装/运行/部署

    一直以来,想改变一些自己早已经习惯的事情. 一直都听说jetty跟Tomcat一样,是一个web容器. 一直都是在说等等,再等等,等有时间的时候! 一直都是给自己一些逃避的理由 1. 首先从Jetty ...