HTML5+Three.js实现可拖拽的虚拟天空环境全景动画效果源码.zip资源-CSDN文库

共25个文件

png：10个

js：10个

css：3个

版权申诉

html5

192 浏览量 2022-11-03 23:55:25 上传评论收藏 2.07MB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

HTML5+Three.js实现可拖拽的虚拟天空环境全景动画效果源码.zip （25个子文件）

132677795532588806

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 4KB

jquery-ui.js 426KB

THREEx.FullScreen.js 3KB

Three.js 794KB

Detector.js 2KB

info.js 569B

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>Skybox (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 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 cube; 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(100, 100, 10, 10); var floor = new THREE.Mesh(floorGeometry, floorMaterial); floor.position.y = -0.5; floor.rotation.x = Math.PI / 2; scene.add(floor); //////////// // CUSTOM // //////////// // axes var axes = new THREE.AxisHelper(100); scene.add( axes ); 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 ); } function animate() { requestAnimationFrame( animate ); render(); update(); } function update() { if ( keyboard.pressed("z") ) { // do something } controls.update(); stats.update(); } function render() { renderer.render( scene, camera ); } </script> </body> </html>

评论收藏

内容反馈

版权申诉