<!DOCTYPE html>

<html lang="en">

<head>

    <title>three.js canvas - lines - colors</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;

        }

        #info {

            position: absolute;

            top: 10px; width: 100%;

            color: #ffffff;

            padding: 5px;

            font-family: Monospace;

            font-size: 13px;

            text-align: center;

            z-index:100;

        }

        a {

            color: orange;

            text-decoration: none;

        }

        a:hover {

            color: #0080ff;

        }

    </style>

</head>

<body>

<div id="info">

    <a href="http://threejs.org" target="_blank">three.js</a> - color lines

    [<a href="http://en.wikipedia.org/wiki/Hilbert_curve">Hilbert curve</a> thanks to <a href="http://www.openprocessing.org/visuals/?visualID=15599">Thomas Diewald</a>]

</div>

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

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

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

<script src="js/Detector.js"></script>

<script src="js/libs/stats.min.js"></script>

<script src="js/geometries/hilbert3D.js"></script>

<script>

    if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

    var mouseX = 0, mouseY = 0,

            windowHalfX = window.innerWidth / 2,

            windowHalfY = window.innerHeight / 2,

            camera, scene, renderer, material;

            var zoom=20;

             var line;

    init();

    animate();

    function init() {

        var i, container;

        container = document.createElement( 'div' );

        document.body.appendChild( container );

        camera = new THREE.PerspectiveCamera( 33, window.innerWidth / window.innerHeight, 1, 10000 );

        camera.position.z = 500;

        scene = new THREE.Scene();

        renderer = new THREE.CanvasRenderer();

        renderer.setPixelRatio( window.devicePixelRatio );

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

        container.appendChild( renderer.domElement );

        var geometry3 = new THREE.Geometry(),

                points = hilbert3D( new THREE.Vector3( 0,0,0 ), 200.0, 2, 0, 1, 2, 3, 4, 5, 6, 7 ), //起点，范围，迭代次数。

                colors3 = [];

        for ( i = 0; i < points.length; i ++ ) {

            geometry3.vertices.push( points[ i ] );

            colors3[ i ] = new THREE.Color( 0xffffff );

            colors3[ i ].setHSL( i / points.length, 1.0, 0.5 );

        }

        geometry3.colors = colors3;

        // lines

        material = new THREE.LineBasicMaterial( { color: 0xffffff, opacity: 1, linewidth: 3, vertexColors: THREE.VertexColors } );

       var p, scale = 0.3, d = 225;

        line = new THREE.Line(geometry3, material );

        line.scale.x = line.scale.y = line.scale.z =  scale*1.5;

        line.position.x = 0;

        line.position.y = 0;

        line.position.z = 0;

        scene.add( line );

        //

        stats = new Stats();

        //container.appendChild( stats.dom );

        //

        document.addEventListener( 'mousemove', onDocumentMouseMove, false );

        document.addEventListener( 'touchstart', onDocumentTouchStart, false );

        document.addEventListener( 'touchmove', onDocumentTouchMove, false );

        document.addEventListener( 'mousewheel', onMouseWheel, 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 onMouseWheel(event){

        if(event.wheelDelta > 0){ //前滚

            camera.position.z-=zoom;

        }else

        {

            camera.position.z+=zoom;

        }

    }

    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();

        stats.update();

    }

    function render() {

        camera.position.x += ( +mouseX - camera.position.x ) *0.05 ;

        camera.position.y += ( -mouseY + 200 - camera.position.y )*0.05 ;

        camera.lookAt( scene.position );

        var time = Date.now() * 0.0005;

//        for ( var i = 0; i < scene.children.length; i ++ ) {

//

//            var object = scene.children[ i ];

//            if ( object instanceof THREE.Line ) object.rotation.y = time * ( i % 2 ? 1 : -1 );

//

//        }

        line.rotation.y+=0.01;  //代替上一段代码旋转

        renderer.render(scene, camera );

    }

</script>

</body>

</html>

THREE.js代码备份——canvas - lines - colors(希尔伯特曲线3D、用HSL设置线颜色)的更多相关文章

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

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

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

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

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

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

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

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

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

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

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

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

  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. 如何使用Fiddler调试线上JS代码

    大家平时肯定都用过火狐的Firebug或者谷歌的调试工具来调试JS,但遗憾的是我们不能像编辑html,css那样来直接新增或者删除JS代码. 虽然可以通过调试工具的控制台来动态执行JS代码,但有时候却 ...

随机推荐

  1. ubuntu 11.10 安装apache2 tomcat6

    ubuntu 11.10 安装apache2 tomcat6 导读 Tomcat是Apache 软件基金会(Apache Software Foundation)的Jakarta 项目中的一个核心项目 ...

  2. Laravel 5.1使用命令行模式(artisan)运行php脚本

    Laravel有内置命令调度器,可以方便的实现Cron. 任务调度定义在app/Console/Kernel.php文件的schedule方法中,该方法已经包含了一个示例.Laravel里有两种方法执 ...

  3. UIView的生命周期

    一. 大体流程: (loadView/nib)文件来加载view到内存-->viewDidLoad函数进一步初始化这些view-->内存不足时, 调用viewDidUnload函数释放vi ...

  4. Coin Test

    描述 As is known to all,if you throw a coin up and let it droped on the desk there are usually three r ...

  5. [Arduino] 逗号分隔文本到数组的两种方法

    以下是今日练习通过逗号来分割字符数组/字符串的2个例子和方法" 1.通过indexOf函数 /* *Splitsplit sketch *split a comma-separated st ...

  6. HTML笔记1

    HTML和css技术 HTML和css技术 html的介绍 网页的基本结构 今天学习的标签 标签属性 浏览器 DW快捷键 相对路径和绝对路径 HTML当中的颜色模式 网页当中常用的图片格式 html的 ...

  7. [转]在WPF中使用WinForm控件方法

    本文转自:http://blog.csdn.net/lianchangshuai/article/details/6415241 下面以在Wpf中添加ZedGraph(用于创建任意数据的二维线型.条型 ...

  8. Win10 VMware虚拟机无法打开内核设备“\\.\Global\vmx86“

    前几项与Win7配置相同 用管理员模式打开CMD 运行 net start vmci net start vmx86 net start VMnetuserif 这三条命令 为了不用每次启动都这样,修 ...

  9. 查询score中选学多门课程的同学中分数为非最高分成绩的记录。

    20.查询score中选学多门课程的同学中分数为非最高分成绩的记录. select * from score a where sno in ( select sno from score group ...

  10. EF Code First 数据迁移命令

    只需要开启程序管理控制台(Package Manager Console) 然后输入  Enable-Migrations -ContextTypeName youContextdb(你的数据库上下文 ...