<!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. 主函数 main WinMain _tmain _tWinMain 的区别

    main是C/C++的标准入口函数名 WinMain是windows API窗体程序的入口函数.(int WINAPI WinMain()) 中 WINAPI是__stdcall宏,在windef.h ...

  2. 20 Free Open Source Web Media Player Apps

    free Media Players (Free MP3, Video, and Music Player ...) are cool because they let web developers ...

  3. IPC——信号量

    Linux进程间通信——使用信号量 这篇文章将讲述别一种进程间通信的机制——信号量.注意请不要把它与之前所说的信号混淆起来,信号与信号量是不同的两种事物.有关信号的更多内容,可以阅读我的另一篇文章:L ...

  4. hadoop中hbase出现的问题

    在安装hbase中出现问题如下: ERROR: Can't get master address from ZooKeeper; znode data == null 解决办法: 1.删除nameno ...

  5. TCP/IP协议原理与应用笔记24：网际协议（IP）之 IP协议的简介

    1. IP协议:(网际协议) 2. IP协议(不可靠无连接数据报协议) (1)连接 vs. 可靠性 连接:面向连接.无连接 可靠:差错控制.流量控制等 面向连接不一定保证可靠,无连接不一定不可靠 在连 ...

  6. CGFloat、CGPoint、CGSize和CGRect

    CGFloat:是表示浮点数类型. CGPoint:表示二维坐标的点.通过x和y坐标定义.点表示位置值. CGSIZE:表示矩形的宽度和高度.通过宽度和高度来定义. CGRect: 表示矩形的位置和大 ...

  7. C如何使用内存

    栈:   自动变量:auto.变量的地址在栈中.   C语言函数调用的实现: 在调用方,参数从后往前按顺序被堆积在栈中 和函数调用关联的返回信息(返回地址等)也被堆积在栈中. 一旦函数调用结束,局部变 ...

  8. Android隐藏状态栏实现沉浸式体验

    转自: Android状态栏微技巧,带你真正理解沉浸式模式 什么叫沉浸式? 根据百度百科上的定义,沉浸式就是要给用户提供完全沉浸的体验,使用户有一种置身于虚拟世界之中的感觉. 那么对应到Android ...

  9. 重构9-Extract Interface（提取接口）

    我们来介绍一个常常被忽视的重构:提取接口.如果你发现多于一个类使用另外一个类的某些方法,引入接口解除这种依赖往往十分有用.该重构实现起来非常简单,并且能够享受到松耦合带来的好处. public cla ...

  10. Oracle基础 数据泵导出/导入Expdp/impdp(转)

    一.EXPDP和IMPDP使用说明 Oracle Database 10g引入了最新的数据泵(Data Dump)技术,数据泵导出导入(EXPDP和IMPDP)的作用 1)实现逻辑备份和逻辑恢复. 2 ...