<!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. Spring Boot-Starter(九)

    说明 在使用非spring boot项目我们集成spring mvc mybatis等框架往往需要大量xml配置, spring 的推出是为了解决项目的复杂度,随着项目的增长,xml配置会越来越臃肿, ...

  2. CodeForces - 357D - Xenia and Hamming

    先上题目: D. Xenia and Hamming time limit per test 1 second memory limit per test 256 megabytes input st ...

  3. LightOJ - 1148 - Mad Counting

    先上题目: 1148 - Mad Counting   PDF (English) Statistics Forum Time Limit: 0.5 second(s) Memory Limit: 3 ...

  4. php svn仓库提交预处理

    需要做的事情 1.检查是否填写注释2.php文件是否有语法错误 pre-commit脚本 hook脚本名称:hooks/pre-commit REPOS="$1" TXN=&quo ...

  5. AngularJS：让submit重新生效

    当我们在html中声明了ng-app后,form的submit就会失效,必须通过angularJS来处理.如果这时还是想用普通的方式提交的话,需要修改form标签,如下所示: <form met ...

  6. ListView的基本使用技巧

    ListView的基本使用技巧 1.headerView和footerView 2.ViewHolder 3.OnScrollListener 4.单行刷新 5.其它细节 ListView提供head ...

  7. Mongodb---记一次事故故障

    2014.06.19.001---故障报告 事故发生时间 事故简述 事故责任方 是否解决 19:21-20:15 IISserverD盘即将溢出 是 一.事故描写叙述: 在19:21收到警报.显示II ...

  8. 原生JS---2

    js中的程序控制语句 常见的程序有三种执行结构: 1. 顺序结构 2. 分支结构 3. 循环结构 顺序结构:程序从第一行开始执行,按顺序执行到最后一行 分支结构:就像一条岔路口,必须选择且只能选择其中 ...

  9. SpringAOP使用注解实现5种通知类型

    spring aop的5种通知类型都有 Before前置通知 AfterReturning后置通知 Around环绕通知 AfterThrowing异常通知 After最终通知 首先创建接口和实现类 ...

  10. css3 选择器 权重问题 （第一部分）

    其实我现在写的这些博文笔记都是我很早之前学习的时候所写的笔记,只不过之前是没有写博客的习惯,所以都是写在word文档中个人需要的时候看而已.最近刚刚开了博客,所以想将自己的笔记贴到博客. 但是现在看来 ...