<!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>