<!DOCTYPE html>

<html lang="en">

<head>

    <title>three.js webgl - materials - cube refraction [balls]</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:#777;

            padding:0;

            margin:0;

            font-weight: bold;

            overflow:hidden;

        }

        #info {

            position: absolute;

            top: 0px; width: 100%;

            color: #ffffff;

            padding: 5px;

            font-family:Monospace;

            font-size:13px;

            text-align:center;

            z-index:1000;

        }

        a {

            color: #ffffff;

        }

        #oldie a { color:#da0 }

    </style>

</head>

<body>

<div id="info"><a href="http://threejs.org" target="_blank">three.js</a> - webgl cube refraction demo. skybox by <a href="http://www.zfight.com/" target="_blank">Jochum Skoglund</a></div>

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

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

<script>

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

    var container;

    var camera, scene, renderer;

    var mesh, lightMesh, geometry;

    var spheres = [];

    var directionalLight, pointLight;

    var zoom=0;

    var mouseX = 0, mouseY = 0;

    var windowHalfX = window.innerWidth / 2;

    var windowHalfY = window.innerHeight / 2;

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

    document.addEventListener( 'mousewheel', onMouseWheel, false);

    init();

    animate();

    function init() {

        container = document.createElement( 'div' );

        document.body.appendChild( container );

        camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 100000 );

        camera.position.z = 3200;

        scene = new THREE.Scene();

        scene.background = new THREE.CubeTextureLoader()

                .setPath( 'textures/cube/Park3Med/' )

                .load( [ 'px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg' ] );

        var geometry = new THREE.SphereBufferGeometry( 60, 32, 16 );

        var textureCube = new THREE.CubeTextureLoader()

                .setPath( 'textures/cube/Park3Med/' )

                .load( [ 'px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg' ] );

        textureCube.mapping = THREE.CubeRefractionMapping;

        var material = new THREE.MeshBasicMaterial( { color: 0xffffff, envMap: textureCube, refractionRatio: 0.95 } );

        for ( var i = 0; i < 500; i ++ ) {

            var mesh = new THREE.Mesh( geometry, material );

            mesh.position.x = Math.random() * 10000 - 5000;

            mesh.position.y = Math.random() * 10000 - 5000;

            mesh.position.z = Math.random() * 10000 - 5000;

            mesh.scale.x = mesh.scale.y = mesh.scale.z = Math.random() * 3 + 1;

            scene.add( mesh );

            spheres.push( mesh );

        }

        //

        renderer = new THREE.WebGLRenderer();

        renderer.setPixelRatio( window.devicePixelRatio );

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

        container.appendChild( renderer.domElement );

        //

        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 ) * 10;

        mouseY = ( event.clientY - windowHalfY ) * 10;

    }

    function onMouseWheel(event){

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

           zoom-=100;

        }else

        {

            zoom+=100;

        }

    }

    function animate() {

        requestAnimationFrame( animate );

        render();

    }

    function render() {

        var timer = 0.0001 * Date.now();

        for ( var i = 0, il = spheres.length; i < il; i ++ ) {

            var sphere = spheres[ i ];

            //sphere.position.x = 5000 * Math.cos( timer + i );

          //  sphere.position.x =5000*Math.cos( timer + i );

            sphere.position.y -= 500 *0.01;

            if( sphere.position.y<-5000){

                sphere.position.y=5000;

            }

        }

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

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

        camera.position.z+=zoom;

        zoom=0.0;

        camera.lookAt( scene.position );

        renderer.render( scene, camera );

    }

</script>

</body>

</html>

THREE.js代码备份——webgl - materials - cube refraction [balls](以上下左右前后6张图片构成立体场景、透明球体效果)的更多相关文章

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  8. THREE.js代码备份——canvas_ascii_effect(以AscII码显示图形)

    <!DOCTYPE html> <html lang="en"> <head> <title>three.js - ASCII Ef ...

  9. 代码备份 | 博客侧边栏公告（支持HTML代码）（支持JS代码）

    博客侧边栏公告(支持HTML代码)(支持JS代码) <div id='btnList'> <a class="ivu-btn ivu-btn-primary" h ...

随机推荐

  1. 敏捷开发系列学习总结（4）—Git管理工具sourcetree的安装

    现在代码管理都流行用git了,小编以前用过clearcase, svn,vss等.现在用了git后,发现git才是最好的,我觉得它最吸引人的地方应该是它的分布式管理吧.git的具体学习,读者可自己去网 ...

  2. 树状数组&线段树

    先是树状数组. 令这棵树的结点编号为C1,C2...Cn.令每个结点的值为这棵树的值的总和,那么容易发现: C1 = A1 C2 = A1 + A2 C3 = A3 C4 = A1 + A2 + A3 ...

  3. [cogs736][网络流24题#13]星际转移[网络流，网络判定]

    将一个空间站分为天数个点,每次枚举天数,每增加一天就把对应天数的边连上,用网络流判定可行性,即-判断最大流是否不小于k,注意编号不要错位.通过此题,可见一些网络流题目需要用到网络判定方法,但虽然答案具 ...

  4. [Poj2112][USACO2003 US OPEN] Optimal Milking [网络流，最大流][Dinic+当前弧优化]

    题意:有K个挤奶机编号1~K,有C只奶牛编号(K+1)~(C+K),每个挤奶机之多能挤M头牛,现在让奶牛走到挤奶机处,求奶牛所走的最长的一条边至少是多少. 题解:从起点向挤奶机连边,容量为M,从挤奶机 ...

  5. 最大公约数和最小公倍数问题 2001年NOIP全国联赛普及组

    题目描述 Description 输入二个正整数x0,y0(2<=x0<100000,2<=y0<=1000000),求出满足下列条件的P,Q的个数 条件:  1.P,Q是正整 ...

  6. 使用applescript脚本方式以管理员权限运行

    - (BOOL) runProcessAsAdministrator:(NSString*)scriptPath                      withArguments:(NSArray ...

  7. hdu_1863_畅通工程_201403122000

    畅通工程 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  8. ubuntu 配置静态路由

    原文:http://blog.sina.com.cn/s/blog_6fd8d5d90101f1xy.html -------------------------------------------- ...

  9. 使用Win32 API实现生产者消费者线程同步

    使用win32 API创建线程,创建信号量用于线程的同步 创建信号量 语法例如以下 HANDLE semophore; semophore = CreateSemaphore(lpSemaphoreA ...

  10. 改动mysqlpassword

    1.假设没有password,则 mysql -u root mysql> SET PASSWORD FOR 'root'@'localhost' = PASSWORD('newpass'); ...