HTML5+Three.js实现的可拖拽玻璃曲面折射全景动画效果源码.zip资源-CSDN文库

共26个文件

js：11个

png：10个

css：3个

版权申诉

html5

198 浏览量 2022-11-03 23:50:30 上传评论收藏 2.09MB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

HTML5+Three.js实现的可拖拽玻璃曲面折射全景动画效果源码.zip （26个子文件）

132677794290458144

css

images

ui-icons_222222_256x240.png 7KB

ui-bg_flat_75_ffffff_40x100.png 208B

info.css 1KB

base.css 115B

jquery-ui.css 31KB

images

icon-close-16.png 914B

dawnmountain-xpos.png 356KB

dawnmountain-zpos.png 246KB

dawnmountain-zneg.png 347KB

checkerboard.jpg 2KB

dawnmountain-xneg.png 311KB

dawnmountain-yneg.png 324KB

icon-info.png 3KB

dawnmountain-ypos.png 172KB

index.html 6KB

jquery-ui.js 426KB

THREEx.FullScreen.js 3KB

Three.js 794KB

Detector.js 2KB

info.js 569B

DAT.GUI.min.js 44KB

OrbitControls.js 8KB

THREEx.WindowResize.js 1KB

THREEx.KeyboardState.js 3KB

jquery-1.9.1.js 262KB

Stats.js 3KB

<!doctype html> <html lang="en"> <head> <title>Refraction (Three.js)</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <link rel=stylesheet href="css/base.css"/> </head> <body> <script src="js/Three.js"></script> <script src="js/Detector.js"></script> <script src="js/Stats.js"></script> <script src="js/OrbitControls.js"></script> <script src="js/THREEx.KeyboardState.js"></script> <script src="js/THREEx.FullScreen.js"></script> <script src="js/THREEx.WindowResize.js"></script>  <script type='text/javascript' src='js/DAT.GUI.min.js'></script>  <script src="js/jquery-1.9.1.js"></script> <script src="js/jquery-ui.js"></script> <link rel=stylesheet href="css/jquery-ui.css" /> <link rel=stylesheet href="css/info.css"/> <script src="js/info.js"></script> <div id="infoButton"></div> <div id="infoBox" title="Demo Information"> This three.js demo is part of a collection at <a href="http://stemkoski.github.io/Three.js/">http://stemkoski.github.io/Three.js/</a> </div>  <div id="ThreeJS" style="position: absolute; left:0px; top:0px"></div> <script> /* Three.js "tutorials by example" Author: Lee Stemkoski Date: July 2013 (three.js v59dev) */ // MAIN // standard global variables var container, scene, camera, renderer, controls, stats; var keyboard = new THREEx.KeyboardState(); var clock = new THREE.Clock(); // custom global variables var refractSphere, refractSphereCamera; // for refract material init(); animate(); // FUNCTIONS function init() { // SCENE scene = new THREE.Scene(); // CAMERA var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight; var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.1, FAR = 20000; camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR); scene.add(camera); camera.position.set(0,150,400); camera.lookAt(scene.position); // RENDERER if ( Detector.webgl ) renderer = new THREE.WebGLRenderer( {antialias:true} ); else renderer = new THREE.CanvasRenderer(); renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT); container = document.getElementById( 'ThreeJS' ); container.appendChild( renderer.domElement ); // EVENTS THREEx.WindowResize(renderer, camera); THREEx.FullScreen.bindKey({ charCode : 'm'.charCodeAt(0) }); // CONTROLS controls = new THREE.OrbitControls( camera, renderer.domElement ); // STATS stats = new Stats(); stats.domElement.style.position = 'absolute'; stats.domElement.style.bottom = '0px'; stats.domElement.style.zIndex = 100; container.appendChild( stats.domElement ); // LIGHT var light = new THREE.PointLight(0xffffff); light.position.set(0,250,0); scene.add(light); // FLOOR var floorTexture = new THREE.ImageUtils.loadTexture( 'images/checkerboard.jpg' ); floorTexture.wrapS = floorTexture.wrapT = THREE.RepeatWrapping; floorTexture.repeat.set( 10, 10 ); var floorMaterial = new THREE.MeshBasicMaterial( { map: floorTexture, side:THREE.DoubleSide } ); var floorGeometry = new THREE.PlaneGeometry(1000, 1000, 10, 10); var floor = new THREE.Mesh(floorGeometry, floorMaterial); floor.position.y = -40.5; floor.rotation.x = Math.PI / 2; scene.add(floor); // SKYBOX var imagePrefix = "images/dawnmountain-"; var directions = ["xpos", "xneg", "ypos", "yneg", "zpos", "zneg"]; var imageSuffix = ".png"; var skyGeometry = new THREE.CubeGeometry( 5000, 5000, 5000 ); var materialArray = []; for (var i = 0; i < 6; i++) materialArray.push( new THREE.MeshBasicMaterial({ map: THREE.ImageUtils.loadTexture( imagePrefix + directions[i] + imageSuffix ), side: THREE.BackSide })); var skyMaterial = new THREE.MeshFaceMaterial( materialArray ); var skyBox = new THREE.Mesh( skyGeometry, skyMaterial ); scene.add( skyBox ); //////////// // CUSTOM // //////////// var sphereGeom = new THREE.SphereGeometry( 80, 64, 32 ); refractSphereCamera = new THREE.CubeCamera( 0.1, 5000, 512 ); scene.add( refractSphereCamera ); refractSphereCamera.renderTarget.mapping = new THREE.CubeRefractionMapping(); var refractMaterial = new THREE.MeshBasicMaterial( { color: 0xccccff, envMap: refractSphereCamera.renderTarget, refractionRatio: 0.985, reflectivity: 0.9 } ); refractSphere = new THREE.Mesh( sphereGeom, refractMaterial ); refractSphere.position.set(0,50,0); refractSphereCamera.position = refractSphere.position; scene.add(refractSphere); // experiment with parameters gui = new dat.GUI(); parameters = { a: 0.985, b: 0.900 }; var aGUI = gui.add( parameters, 'a' ).min(0.915).max(1.000).step(0.001).name("refractionRatio").listen(); aGUI.onChange( function(value) { refractMaterial.refractionRatio = parameters.a; } ); var bGUI = gui.add( parameters, 'b' ).min(0.600).max(1.200).step(0.001).name("reflectivity").listen(); bGUI.onChange( function(value) { refractMaterial.reflectivity = parameters.b; } ); } function animate() { requestAnimationFrame( animate ); render(); update(); } function update() { if ( keyboard.pressed("z") ) { // do something } controls.update(); stats.update(); } function render() { // move the CubeCamera to the position of the object // that has a reflective surface, "take a picture" in each direction // and apply it to the surface. // need to hide surface before and after so that it does not // "get in the way" of the camera refractSphere.visible = false; refractSphereCamera.updateCubeMap( renderer, scene ); refractSphere.visible = true; renderer.render( scene, camera ); } </script> </body> </html>

评论收藏

内容反馈

版权申诉