<!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. 如何在HTML5 图片预览

    HTML5的 File API允许浏览器访问本地文件系统,借助它我们可以实现以前无法实现的本地图片预览功能. 先介绍下该API实现了那些接口: 1.Blob接口,表示原始的二进制数据,通过它可以访问到 ...

  2. C#分屏控件用法实例

    本文实例中的自定义类PictureBox继承于UserControl,最终实现简单的分屏功能.分享给大家供大家参考之用.具体实现代码如下: public partial class PictureCo ...

  3. xml<>编译

    < 用 <    >用 >      表示"空格"

  4. 【阿里云产品公测】云引擎ACE java DEMO 直接部署体验

    作者:阿里云用户啊里新人 本来想根据前几个哥们的公测文章,体验一下,发现他妈的都是php的一下我就,,好吧还有群,群里高手如云,,看着文档(其实文档写的很清晰了!只不过我太懒了!)   哈哈,所以群里 ...

  5. emWin使用外部SRAM的方法

    我用的是stm32,加了1MB的外部SRAM,在使用emWin的时候,将一部分内存分配给emWin使用.其实方法很简单,传入SRAM数据总线地址即可,数据位宽我采用16bit,因为使用的SRAM是16 ...

  6. webapp新体验Rem实现移动端网页适配详解资源

    本来想写一篇,webapp使用Rem的问题,查了一下相关rem的介绍之后,发现很多平台已经解释的很清楚了,图文并茂,于是我便想将其解释资源整理一些,方便以后自己查阅. 腾讯ISUX:web app变革 ...

  7. 第五节 关于SpringMVC中Ajax的配置和应用[下午]

    成熟,不是学会表达,而是学会咽下,当你一点一点学会克制住很多东西,才能驾驭好人生. 还有一周,祥云19就算结算了,一个半月的相处希望,胖先生算一个合格的老师 小白,小蔡,2婷婷,小猴,小恒,小崔,小龙 ...

  8. Windows重新建立图标缓存

    有的时候,快捷方式的图标会因各种优化软件而变得面目全非,这时就需要重新建立图标缓存 新建一个文本文档,把文件的后缀名修改成.bat 的例如 icon.bat 在里面填写下面的内容: rem 关闭exp ...

  9. 【原则】常用windows开发 客户端工具 收集

    1.  Navicat Premium 推荐: mysql客户端, postgreSQL 客户端, Sqlite客户端 2.  robomongo 推荐:mongoDB客户端

  10. iOS小技巧 - 和屏幕等宽的Table分割线

    前言 因为本人也是学习iOS才一个多月,在写程序的过程中经常会遇到一些看似应该很简单,但是要解决好却要知道一点小trick的问题. 因此后面会陆续记一些这类问题,一来加深印象,二来也可以做个备忘录. ...