<!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. 树屋阶梯（codevs 1741）

    题目描述 Description 暑假期间,小龙报名了一个模拟野外生存作战训练班来锻炼体魄,训练的第一个晚上,教官就给他们出了个难题.由于地上露营湿气重,必须选择在高处的树屋露营.小龙分配的树屋建立在 ...

  2. war包结构

    一个war包里面必含的两个目录是meta-inf和web-inf文件夹 一个war包里面必含的两个目录是meta-inf和web-inf文件夹 一个war包里面必含的两个目录是meta-inf和web ...

  3. js 推断字符串是否包括某字符串

    var Cts = "bblText"; if(Cts.indexOf("Text") > 0 ) { alert('Cts中包括Text字符串'); } ...

  4. MySQL 调优 —— Using filesort

    出现这个问题的解决办法在于 MySQL 每次查询仅仅能使用一个索引, 而你的 SQL 语句 WHERE 条件和 ORDER BY 的条件不一样, 索引没建好的话. 那么 ORDER BY 就使用不到索 ...

  5. ios 视频播放代码Demo

    方法一: - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. / ...

  6. WPF中控件TextBlock使用（简单）

    TextBlock主要用来显示文字.比方: <TextBlock Name="txtBlockOutpuMessage"   Text="hello" / ...

  7. effective C++ 读书笔记 条款11

    条款11: 在operator= 中处理"自我赋值" 在实现operator=时考虑自我赋值是必要的就像 x=y .我们不知道变量x与y代表的值是否为同一个值(把x和y说成是一个指 ...

  8. HotSpotVM 线程实现浅析

    今天来看下HotSpotVM在Linux下的线程模型. Thread.start HotSpot Runtime Overview 中说道, There are two basic ways for ...

  9. pat解题报告【1082】

    1082. Read Number in Chinese (25) 时间限制   400 ms 内存限制   32000 kB 代码长度限制   16000 B 判题程序     Standard   ...

  10. C/C++大小端模式与位域

    一.大端小端: 1.大端:指数据的高字节保存在内存的低地址中,而数据的低字节保存在内存的高地址中 例如:0x12345678 在内存中的存储为  : 0x0000 0x0001 0x0002 0x00 ...