<!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. 第三方Push服务：Urban Airship

    转自:http://blog.csdn.net/kmyhy/article/details/7355756 关于推送通知,除了苹果的APNs之外,我们还有其它选择. Urban Airship就是其中 ...

  2. 全栈一路坑之使用django创建博客

    最近在看一篇全栈增长工程师实战,然后学习里面的项目,结果发现作者用的技术太过老旧,好多东西都已经被抛弃了,所以结合着官方文档和自己的一些理解将错误的信息替换一下,边写边学习 准备工作和工具 作者说需要 ...

  3. CSS 之 嵌套 margin-top 处理

    如下代码: <div style=" width:1000px; height:700px; margin:auto;"> <div style=" w ...

  4. HttpSolrServer-采用静态工厂方法,创建HttpSolrServer单实例

    HttpSolrServer线程安全,如果使用下面构造器,必须对所有的请求重用相同的实例.如果实例在运行中创建的,它可能会导致连接泄漏.推荐的做法就是保持每个solr服务url的HttpSolrSer ...

  5. Oracle基础（五） 权限管理

    一.数据库权限分类 权限是指用户对某个功能是否具有执行的权利.在Oracle中,权限分为系统权限和对象权限. 1.系统权限 系统规定用户使用数据库的权限.例如创建表空间,创建表,删除表的权利.这些都属 ...

  6. PHP output_buffering 你了解多少

    一.我们要说一下php中的缓存大概有哪些! 在PHP中,我们可以粗略的将缓存分为客户端缓存(Browser缓存),服务器端缓存(Server缓存).由于PHP是基于B/S架构的,所以,我们可以理解为浏 ...

  7. linux初学 :linux 常用命令(一)

    首先,是关机/重启命令,仅在虚拟机时使用,实际工作中用不到 reboot 一般不跟参数使用,输入指令即可重启 shutdown 一般需要跟参数,例: shutdown -r 延时多少分钟重启,一般使用 ...

  8. 百篇大计敬本年之系统篇《六》—— Ubuntu 16.04开启 root 超级用户

    Ubuntu 16.04系统在一开始安装完成时是无法切换到 root 用户的,普通用户需要使用 root 权限的时候通常需要在执行命令前加 "sudo",需要经常使用root权限的 ...

  9. ShowModal在FireMonkey移动应用程序对话框

    This is the only code that changes between the first and second code snippets: dlg.ShowModal(procedu ...

  10. 判断当前是否运行于Design Mode

    在使用Visual Studio设计XAML时,设计器运行在[设计时]状态.VS在内部运行这些代码,帮你把界面的类真实效果展示出来.一般情况下也不会有什么问题,但是当代码中存在外部资源时,XAML可能 ...