<!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. 【codeforces 766E】Mahmoud and a xor trip

    [题目链接]:http://codeforces.com/contest/766/problem/E [题意] 定义树上任意两点之间的距离为这条简单路径上经过的点; 那些点上的权值的所有异或; 求任意 ...

  2. java中redis的分布式锁工具类

    使用方式 try { if(PublicLock.getLock(lockKey)){ //这里写代码逻辑,执行完后需要释放锁 PublicLock.freeLock(lockKey); } } ca ...

  3. POJ 1821 Fence

    Fence Time Limit: 1000ms Memory Limit: 30000KB This problem will be judged on PKU. Original ID: 1821 ...

  4. Androd自己定义控件（三）飞翔的小火箭

    在前面的自己定义控件概述中已经跟大家分享了Android开发其中自己定义控件的种类. 今天跟大家分享一个非主流的组合控件. 我们在开发其中,难免须要在不同的场合中反复使用一些控件的组合.而Java的最 ...

  5. 关于重置IOS App请求推送的授权请求

    项目要加入推送通知.測试完本地通知后.发现測不了远程通知.于是想重置授权请求. 下面是重置授权请求的方法: 方法一: 通用->还原->抹掉全部内容和设置 可是第一种方法非常费时,抹掉内容预 ...

  6. footer在最低显示

    footer在最低显示 http://stackoverflow.com/questions/585945/how-to-align-content-of-a-div-to-the-bottom

  7. Android中检測字符编码（GB2312,ASCII,UTF8,UNICODE，TOTAL——ENCODINGS)方法（一）

    package com.android.filebrowser;   import java.io.*; import java.net.*;   public class FileEncodingD ...

  8. 详略。。设计模式1——单例。。。。studying

    设计模式1--单例 解决:保证了一个类在内存中仅仅能有一个对象. 怎么做才干保证这个对象是唯一的呢? 思路: 1.假设其它程序可以任意用new创建该类对象,那么就无法控制个数.因此,不让其它程序用ne ...

  9. SIS

    故障: 1.2017-12-14  发现前期测试的钉钉切换校区功能有遗留问题,第二个校区进行考勤后,在考勤记录中编辑考勤记录,出现无权限 原因:编辑考勤记录,传的schoolid不是原先的school ...

  10. JQuery调用WCF服务，部署在iis

    Normal 0 7.8 磅 0 2 false false false EN-US ZH-CN X-NONE /* Style Definitions */ table.MsoNormalTable ...