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代码,但有时候却 ...

随机推荐

memached+asp.net 4.0 分布式缓存
由于准备做一个商品站点,希望做一个memached缓存.折腾了一个多星期.本机是存进去取出来为空. 各种办法都试过了,还是不行.最后用同事电脑測试是能够的,然后将DEMO公布到阿里云也是能够的.支持. ...
IOS格式规范
IOS格式规范目录概述日期格式 NSDateFormatter格式说明概述日期格式声明时间格式:NSDateFormatter *date_formatter = [[NSDateForm ...
windows下如何github ssh 公钥
windows下如何github ssh 公钥 1. 安装git,从程序目录打开 "Git Bash" 2. 键入命令:ssh-keygen -t rsa -C " ...
oracle 回车、换行符
1.回车换行符 chr(10)是换行符,chr(13)是回车, 增加换行符 select ' update ' || table_name || ' set VALID_STATE ='' ...
archlinux下wifi-menu显示连接超时
/etc/network.d/wlan0 增加: DHCP_TIMEOUT=30
Linux Shell之top命令
TOP是一个动态显示过程,即可以通过用户按键来不断刷新当前状态.如果在前台执行该命令,它将独占前台,直到用户终止该程序为止.比较准确的说,top命令提供了实时的对系统处理器的状态监视.它将显示系统中C ...
Quartz 设置一个半小时任务实现
该文章属于本人原创,转载请注明出处. spring + Quartz 设置定时任务时要求没一个半小时执行一次设置两个相同的定时任务第一个从整点开始每三小时执行一次 ...
javascript函数中的实例对象、类对象、局部变量（局部函数）
定义 function Person(national,age) { this.age = age; //实例对象,每个示例不同 Person.national = national; //类对象,所 ...
Python练习题 028：求3*3矩阵对角线数字之和
[Python练习题 028] 求一个3*3矩阵对角线元素之和 ----------------------------------------------------- 这题解倒是解出来了,但总觉得 ...
使用get方式提交数据
get提交代码 import java.io.InputStream; import java.net.HttpURLConnection; import java.net.MalformedURLE ...

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

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

随机推荐

热门专题