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

时间：2022-06-25 06:02:05
<!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>

 

标签：

相关文章