<!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. percona-xtrabackup 文档

    https://www.percona.com/doc/percona-xtrabackup/2.4/index.html

  2. 简单的div元素拖拽到div

    drag1 drag2 drag3 代码如下: <!DOCTYPE HTML> <html> <head> <title>div拖拽到div</t ...

  3. 1.7.4.2 Local Parameters in Queries--局部参数

    1. 局部参数 Local parameters是在solr请求中指定一个查询参数.Local parameters提供了一个方式以添加元数据到某个参数类型中,如查询字符串(在solr文档中,Loca ...

  4. solr英文使用的基本分词器和过滤器配置

    solr英文应用的基本分词器和过滤器配置 英文应用分词器和过滤器一般配置顺序 索引(index): 1:空格 WhitespaceTokenizer    2:过滤词(停用词,如:on.of.a.an ...

  5. iOS block进行页面之间传值

    #import <UIKit/UIKit.h> @interface FirstViewController : UIViewController @property (weak, non ...

  6. [Java] 关键字final、static使用总结

    一.final 根据程序上下文环境,Java关键字final有“这是无法改变的”或者“终态的”含义,它可以修饰非抽象类.非抽象类成员方法和变量.你可能出于两种理解而需要阻止改变:设计或效率.final ...

  7. C#中怎么在EXCEL中的单元格中画斜线啊 ？？

    Code Snippet 做法: 1,先添加引用COM,找 Excel 2,using Excel = Microsoft.Office.Interop.Excel; 3, 代码 private Ex ...

  8. asp.net mvc 从数据库中读取图片的实现代码

    首先是创建一个类,继承于ActionResult,记住要引用System.Web.Mvc命名空间,如下: public class ImageResult : ActionResult { publi ...

  9. Oracle 基础 数据库备份与恢复

    一.为什么需要数据备份 造成数据丢失的主要原因: 1.介质故障. 2.用户的错误操作. 3.服务器的彻底崩溃. 4.计算机病毒. 5.不可预料的因素. Oracle中故障类型分为以下4种. 1.语句故 ...

  10. hdu 4055 动态规划

    #include<map> #include<set> #include<cmath> #include<queue> #include<cstd ...