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

<!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设置线颜色)的更多相关文章

THREE.js代码备份——canvas - geometry - earth(球体贴纹理)
<!DOCTYPE html> <html lang="en"> <head> <title>three.js canvas - g ...
THREE.js代码备份——webgl - custom attributes [lines]（自定义字体显示、控制字图的各个属性）
<!DOCTYPE html> <html lang="en"> <head> <title>three.js webgl - cu ...
THREE.js代码备份——canvas_lines(随机点、画线)
<!DOCTYPE html> <html lang="en"> <head> <title>three.js canvas - l ...
THREE.js代码备份——线框cube、按键、鼠标控制
<!DOCTYPE html> <html lang="en"> <head> <title>three.js canvas - g ...
THREE.js代码备份——webgl - scene animation（通过加载json文件来加载动画和模型）
<!DOCTYPE html> <html lang="en"> <head> <title>three.js webgl - sc ...
THREE.js代码备份——webgl - geometry - dynamic(模拟海浪，通过时间（毫秒）来控制平面点的运动模拟海浪，鼠标控制写在另外的js中)
HTML: <!DOCTYPE html> <html lang="en"> <head> <title>three.js webg ...
THREE.js代码备份——webgl - materials - cube refraction [balls](以上下左右前后6张图片构成立体场景、透明球体效果)
<!DOCTYPE html> <html lang="en"> <head> <title>three.js webgl - ma ...
THREE.js代码备份——canvas_ascii_effect(以AscII码显示图形)
<!DOCTYPE html> <html lang="en"> <head> <title>three.js - ASCII Ef ...
如何使用Fiddler调试线上JS代码
大家平时肯定都用过火狐的Firebug或者谷歌的调试工具来调试JS,但遗憾的是我们不能像编辑html,css那样来直接新增或者删除JS代码. 虽然可以通过调试工具的控制台来动态执行JS代码,但有时候却 ...

随机推荐

acdreamoj1108（The kth number）
题目链接:http://acdream.info/problem? pid=1108 题意:n个数的数列,m次查询某个区间出现次数第k多的数出现的次数.n,m<=100000 解法:这个由于是离 ...
基于jquery的侧边栏分享导航
今天给大家分享一款基于jquery的侧边栏分享导航.这款分享钮一直固定于左侧,鼠标经过的时候凸出显示,这款分享按钮适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲 ...
Systemd 入门教程：实战篇
Systemd 入门教程:实战篇上一篇文章,介绍了 Systemd 的主要命令,这篇文章主要介绍如何使用 Systemd 来管理我们的服务,以及各项的含义: 一.开机启动对于那些支持 System ...
Java_Hbase优化
1.datanode的最大文件数 vi $HADOOP_HOME/conf/hdfs-site.xml <property> <name>dfs.datanode.max.xc ...
[置顶] HashMap HashTable HashSet区别剖析
HashMap.HashSet.HashTable之间的区别是Java程序员的一个常见面试题目,在此仅以此博客记录,并深入源代码进行分析: 在分析之前,先将其区别列于下面 1:HashSet底层采用的 ...
Socket 之原理与编程基础
一.Socket简介 Socket是进程通讯的一种方式,即调用这个网络库的一些API函数实现分布在不同主机的相关进程之间的数据交换. 几个定义: (1)IP地址:即依照TCP/IP协议分配给本地主机的 ...
Remoting
一. Remoting基础什么是Remoting,简而言之,我们可以将其看作是一种分布式处理方式.从微软的产品角度来看,可以说Remoting就是DCOM的一种升级,它改善了很多功能,并极 ...
C# mvc--ORM框架中EF的作用和特点
存放于System.Linq.QueryAble 静态类中并且所有的扩展方法扩展自 IqueryAble<TSource>泛型接口上用途: 接收lambda表达式利用EF生成对应的s ...
android基础学习之布局
我学习android第一步接触的就是布局的学习.布局是androidUI的基础,是重中之重.总的来说android有6种布局,分别是线性布局LinearLayout.相对布局RelativeLayou ...
Java Script基础（三）函数
一.JavaScript中的函数在JavaScript中,函数类似于Java中的方法,是执行特定功能的代码块,可以重复调用.JavaScript中的函数分为两种,一种是系统函数,另一种是自定义函数. ...

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

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

随机推荐

热门专题