<!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. hdu2012 素数判定【C++】

    素数判定 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submis ...

  2. CF410div2 A. Mike and palindrome

    /* CF410div2 A. Mike and palindrome http://codeforces.com/contest/798/problem/A 水题 */ #include <c ...

  3. [Poj3261] [Bzoj1717] [后缀数组论文例题，USACO 2006 December Gold] Milk Patterns [后缀数组可重叠的k次最长重复子串]

    和上一题(POJ1743,上一篇博客)相似,只是二分的判断条件是:是否存在一段后缀的个数不小于k #include <iostream> #include <algorithm> ...

  4. C结构体里的冒号

    unsigned m_ScrollType : 3;                             //uint型,占3bit;     unsigned m_ScrollDirection ...

  5. 关于Spring的xml文档的简单实用配置

    Spring的spring.xml文档的配置 最近在写Spring的配置文件时,发现Spring文档的配置其实没必要那么繁琐记忆,网上的很多文章都写得很繁琐,如果所有的东西按照路径去查找,可以很快的帮 ...

  6. cogs 29. 公路建设

    29. 公路建设 ★   输入文件:road.in   输出文件:road.out   简单对比时间限制:1 s   内存限制:128 MB [问题描述] A 国是一个新兴的国家,有 N 个城市,分别 ...

  7. qt on android之GPS信号的获取

    0.      写在最前面 本人參考安晓辉大侠的一篇博文后.做了Qt on android的GSP相关的实验.为了后面不时之需.故而记录下来. 1.      Qt on Android GPS系统流 ...

  8. 我的Android进阶之旅------&gt;Android中ListView中嵌套(ListView)控件时item的点击事件不起作的问题解决方法

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvb3V5YW5nX3Blbmc=/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...

  9. hive-0.11.0安装方法具体解释

    先决条件:     1)java环境,须要安装java1.6以上版本号     2)hadoop环境,Hadoop-1.2.1的安装方法參考hadoop-1.2.1安装方法具体解释 本文採用的hado ...

  10. 学习笔记——DISTINCT

    DISTINCT印象中向来被人诟病,说它效率低下.但网上那些SQL 面试题答案,却时有用之.其中 COUNT(DISTINCT 句式,我以前很少用,这里做个笔记. 为管理岗位业务培训信息,建立3个表: ...