地球 three.js 城市 3d

在网上各种学习，特别是一个用vue写的模拟“最好看地球”那个代码，结合自己的思想改出了这个地球，已经能用了，大家学习下。
直接上代码

<!DOCTYPE html>
<html lang="en"><head><title>three.js canvas - geometry - earth</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 {color: #808080;font-family:Monospace;font-size:13px;text-align:center;background-color: #ffffff;margin: 0px;overflow: hidden;}#info {position: absolute;top: 0px; width: 100%;padding: 5px;}a {color: #0080ff;}</style></head><body><div><div style = "position:absolute;margin-top:50px;margin-left:40px;"></div><div id="container" style = "position:absolute;margin-top:0px;margin-left:0px;"></div></div><script src="earch/three.js"></script><script src="earch/Projector.js"></script><script src="js/tween.min.js" ></script><script>var container;var camera,scene,renderer,cloudsMesh,earth;var group;var mouseX = 0, mouseY = 0;var windowHalfX = window.innerWidth / 2;var windowHalfY = window.innerHeight / 2;var raycaster;var locationGroup=null;var mouse;var objects = [];var targetRotation = 0;var targetRotationOnMouseDown = 0;var mouseX = 0;var mouseXOnMouseDown = 0;var stateforzhuan = "0";var LOCATIONS = [{name: 'namibia',coord: [-19.2, 14.11666667], // 19° 12' S, 13° 67' Eposition: [4.6, -1.29, -2.42],cameraFarPosition: [-20.03, 13.47, -14.61],cameraNearPosition: [-3.54, 2.38, -2.58],imageName: 'earch/i_namibia.png',coordSpriteIndex: 4,videoSprite: [10.80, 19.10],soundSprite: [0, 10.057142857142857]}, {name: 'mariana',coord: [18.25, 142.81666667], // 17° 75' N, 142° 49' Eposition: [-4.390, 2.660, -2.410],cameraFarPosition: [26.46, -6.94, -9.96],cameraNearPosition: [4.52, -1.30, -1.63],imageName: 'earch/i_mariana.png',coordSpriteIndex: 3,videoSprite: [2.80, 8.40],soundSprite: [24, 34.10938775510204]}, {name: 'greenland',coord: [72.16666667, -43], // 71° 70' N, 42° 60' Wposition: [1.880, 5.09, 0.89],cameraFarPosition: [7.24, 26.52, 7.06],cameraNearPosition: [1.30, 4.66, 1.24],imageName: 'earch/i_greenland.png',coordSpriteIndex: 2,videoSprite: [40.20, 47.80],soundSprite: [48, 58.10938775510204]}, {name: 'galapagos',coord: [1.33333333, -91.15], // 01° 20' N, 90° 69' Wposition: [0.550, 0.024, 5.39],cameraFarPosition: [-0.60, 0.14, 28.21],cameraNearPosition: [-0.10, 0.024, 4.99],imageName: 'earch/i_galapagos.png',coordSpriteIndex: 1,videoSprite: [22.00, 37.43],soundSprite: [12, 22.057142857142857]}, {name: 'antarctica',coord: [-77.96666667, -155.63333333], // 77° 58' S, 155° 38' Wposition: [-1.32, -5.05, 0.98],cameraFarPosition: [-7.88, -27.00, 1.87],cameraNearPosition: [-1.39, -4.75, 0.33],imageName: 'earch/i_antarctica.png',coordSpriteIndex: 0,videoSprite: [50.90, 69.00],soundSprite: [36, 46.05714285714286]}];init();animate();function init() {container = document.getElementById( 'container' );camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 0.1, 1000 );camera.position.z = 23;scene = new THREE.Scene();group = new THREE.Group();locationGroup = new THREE.Group();scene.add( group );group.add( locationGroup );//地点LOCATIONS.forEach(location=>{var sprite = createLocationSprite(location)locationGroup.add(sprite)objects.push( sprite )});//地球earth = createEarth();objects.push( earth );group.add(earth);//云彩var cloudsGeo = new THREE.SphereGeometry(5.1,32,32);var cloudsMater = new THREE.MeshPhongMaterial({map:getTexture('earch/earth_cloud.171481f.png'),transparent:true,opacity:1,blending:THREE.additiveBlending});cloudsMesh = new THREE.Mesh(cloudsGeo,cloudsMater);group.add(cloudsMesh);//灯scene.add(new THREE.AmbientLight(0x39393939,0.9));var spotLight = new THREE.SpotLight(0xffffff,1.2);spotLight.position.set(-26,15,15);//角度spotLight.angle = 0.2;//投影spotLight.castShadow = false;spotLight.penumbra = 0.4;spotLight.distance = 124;spotLight.decay = 1;spotLight.shadow.camera.near = 50;spotLight.shadow.camera.far = 200;spotLight.shadow.camera.fov = 35;spotLight.shadow.mapSize.height = 1024;spotLight.shadow.mapSize.width = 1024;scene.add(spotLight);//光影投射器raycaster = new THREE.Raycaster();//鼠标的点mouse = new THREE.Vector2();//渲染renderer = new THREE.WebGLRenderer({antialias:true});renderer.setClearColor(0x000000,0);renderer.setPixelRatio( window.devicePixelRatio );renderer.setSize( window.innerWidth, window.innerHeight );container.appendChild( renderer.domElement );document.addEventListener( 'mousedown', onDocumentMouseDown, false );window.addEventListener( 'resize', onWindowResize, false );}function createEarth () {return new THREE.Mesh(new THREE.SphereGeometry(5, 32, 32),new THREE.MeshPhongMaterial({map: getTexture('earch/earth4.7cddb76.jpg'),bumpMap: getTexture('earch/earth_bump.55b3930.jpg'),bumpScale: 0.15,specularMap: getTexture('earch/earth_spec.jpg'),specular: new THREE.Color('#909090'),shininess: 5,transparent: true}))}function getTexture(str){var loader = new THREE.TextureLoader();return loader.load(str);}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 animate() {requestAnimationFrame( animate );render();}function render() {cloudsMesh.rotation.y += 0.0002;if(stateforzhuan=="1"){group.rotation.y += targetRotation;targetRotation = 0;}else{group.rotation.y += 0.0008;}TWEEN.update();renderer.render( scene, camera );}function createLocationSprite(location){var spriteMaterial = new THREE.SpriteMaterial({map:THREE.ImageUtils.loadTexture(location.imageName),color:0xffffff,fog:true})var sprite = new THREE.Sprite(spriteMaterial)sprite.position.set(location.position[0],location.position[1],location.position[2])sprite.scale.set(1.4,1.4,1.4)return sprite               }//点击function onDocumentMouseDown( event ) {event.preventDefault();//计算在图形中位置 鼠标   x  -1到1之间mouse.x = ( event.clientX / renderer.domElement.clientWidth ) * 2 - 1;mouse.y = - ( event.clientY / renderer.domElement.clientHeight ) * 2 + 1;//从新 从相机到鼠标位置射线 并且获得接触的物体。raycaster.setFromCamera( mouse, camera );var intersects = raycaster.intersectObjects( objects );//除了地球以外的精灵面if ( intersects.length > 0 && intersects[0].face==null) {//点击intersects[ 0 ].object.material.color.setHex( Math.random() * 0xffffff );var tween = new TWEEN.Tween(camera.position).to({ x: 0, y: 0, z: 18 }, 1000).start();}else{onDocumentMouseDownzhuan( event );}}//按下鼠标的时候function onDocumentMouseDownzhuan( event ) {//标志标识正在控制stateforzhuan = "1";event.preventDefault();//移动window.addEventListener( 'mousemove', onDocumentMouseMove, false );window.addEventListener( 'mouseup', onDocumentMouseUp, false );window.addEventListener( 'mouseout', onDocumentMouseOut, false );//mouseXOnMouseDown距离中线的距离mouseXOnMouseDown = event.clientX - windowHalfX;}function onDocumentMouseUp( event ) {stateforzhuan = "0";window.removeEventListener( 'mousemove', onDocumentMouseMove, false );window.removeEventListener( 'mouseup', onDocumentMouseUp, false );window.removeEventListener( 'mouseout', onDocumentMouseOut, false );}function onDocumentMouseOut( event ) {stateforzhuan = "0";window.removeEventListener( 'mousemove', onDocumentMouseMove, false );window.removeEventListener( 'mouseup', onDocumentMouseUp, false );window.removeEventListener( 'mouseout', onDocumentMouseOut, false );}//移动function onDocumentMouseMove( event ) {mouseX = event.clientX - windowHalfX;//mouseXOnMouseDown距离中线的距离targetRotation =  180*( mouseX - mouseXOnMouseDown )*0.000008/3.145926*5;mouseXOnMouseDown = mouseX;}</script></body>
</html>

地球 three.js 城市 3d相关推荐

使用webgl(three.js)搭建3D智慧园区、3D大屏，3D楼宇，智慧灯杆三维展示，3D灯杆，web版3D,bim管理系统——第六课...
前言: 今年是建国70周年,爱国热情异常的高涨,为自己身在如此安全.蓬勃发展的国家深感自豪. 我们公司楼下为庆祝国庆,拉了这样的标语,每个人做好一件事,就组成了我们强大的祖国. 看到这句话,深有感触, ...
html js 3d图片轮播,js实现3D图片逐张轮播幻灯片特效代码分享
本文实例讲述了javascript实现3D图片逐张轮播幻灯片特效.分享给大家供大家参考.具体如下: 这是一款基于javascript实现3D图片逐张轮播幻灯片特效代码,实现过程很简单. 运行效果图:- ...
Three.js - 走进3D的奇妙世界
摘要:本文将通过Three.js的介绍及示例带我们走进3D的奇妙世界. 文章来源:宜信技术学院 & 宜信支付结算团队技术分享第6期-支付结算部支付研发团队前端研发高级工程师-刘琳<thr ...
Cesium在地球上添加一个3D立方体
接此: https://blog.csdn.net/bcbobo21cn/article/details/110300047 var redBox = viewer.entities.add({nam ...
3d旋转相册代码源码_原生 JS 实现 3D 立方体
访问该URL可查看效果:http://is666a.gitee.io/javascript3d_cube/ 项目源码已上传码云:小朋友/JavaScript 3D立方体原生 JS 实现 3D 立方体 ...
使用html+css+js实现3D相册
使用html+css+js实现3D相册,快来上传的照片吧效果图: 代码如下,复制即可用: <!DOCTYPE html> <html lang="en"> ...
JS 实现3D立体效果的首页轮播图（瞬间让你的网站高大上，逼格满满）
还是那句话,废话少说,直接上源代码:http://download.csdn.net/detail/cometwo/9387901 <html> <head> <titl ...
用原生JS实现3D轮播效果
用原生JS实现3D轮播效果实现思路: 先实现无缝轮播效果添加3D效果完善代码增加自动轮播效果效果如下: 视图中显示3张图片,并通过CSS的透视和旋转实现3D效果,当无任何操作时,图片自动循环 ...
three.js实现3D模型展示
开头说明下文章是转载我同事一个哥们的.怕自己以后会用拿过来方便以后使用 three.js实现3D模型展示由于项目需要展示3d模型,所以对three做了点研究,分享出来希望能帮到大家 ...

地球 three.js 城市 3d

地球 three.js 城市 3d

地球 three.js 城市 3d相关推荐

最新文章

热门文章