<!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. 深入了解android平台的jni---注册native函数

    注册native函数有两种方法:静态注册和动态注册. 1.静态注册方法 根据函数名找到对应的JNI函数:Java层调用函数时,会从对应的JNI中寻找该函数,如果没有就会报错,如果存在则会建立一个关联联 ...

  2. jqgrid 获取当前页码

    jqgrid 获取当前页码 $('#gridTable').getGridParam('page'); /** *刷新,jqGrid刷新当前列表页代码 */ function refresh(url) ...

  3. 关于c中的%x及其它格式化符

    原文:http://blog.csdn.net/lincyang/article/details/6252443 格式化: %x表示按16进制输出:int a = 16;%02x:输出10:%03x: ...

  4. Autel MaxiDAS DS708 Fatal Application Error illegal operation

    I get one Original Autel MaxiDAS® DS708 Update Service, after complete update, I got a message " ...

  5. jQuery中json对象的复制（数组及对象） .

    1.jQuery自带的$.map方式: $.map(json, function (n) { return n; }); 这种方式原来用于复制数组还可以,今天用它复制数组中的某一条记录,发现字段名称丢 ...

  6. Linux的SOCKET编程详解

    1. 网络中进程之间如何通信 进 程通信的概念最初来源于单机系统.由于每个进程都在自己的地址范围内运行,为保证两个相互通信的进 程之间既互不干扰又协调一致工作,操作系统为进程通信提供了相应设施,如 U ...

  7. java多线程之Future和FutureTask

    Executor框架使用Runnable 作为其基本的任务表示形式.Runnable是一种有局限性的抽象,然后可以写入日志,或者共享的数据结构,但是他不能返回一个值. 许多任务实际上都是存在延迟计算的 ...

  8. 业务系统的JVM启动参数推荐

    关键业务系统的JVM启动参数推荐,原文链接请参见:http://calvin1978.blogcn.com/articles/jvmoption-2.html

  9. js解析xml,获取XMl标签属性值

    <script type="text/javascript"> var xml="<?xml version=\"1.0\" enc ...

  10. 写jQuery插件

    如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了.至于使用jquery好处这里就不再赘述了,用过的都知道.今天我们来讨论下jq ...