【原创】threejs实现一个全景地球
介绍
本demo实现一个旋转的全景地球,效果如下
技术分析
1.球体
2.球体表面贴图
实现
创建容器
<div id="container"></div>
引入js文件
<script src="js/three.min.js"></script> <script src="js/stats.min.js"></script> <script src="js/OrbitControls.js"></script>
主体部分
var container, stats; var camera, scene, renderer; var mesh; var controls; init(); animate(); function init() { container = document.getElementById( 'container' ); //stats stats = new Stats(); container.appendChild( stats.dom ); //renderer renderer = new THREE.WebGLRenderer(); renderer.setClearColor( 0xffffff ); renderer.setSize( window.innerWidth, window.innerHeight ); container.appendChild( renderer.domElement ); //camera camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 2000 ); camera.position.z = 500; //controller controls = new THREE.OrbitControls( camera, renderer.domElement ); controls.addEventListener( 'change', render ); //scene scene = new THREE.Scene(); // earth var loader = new THREE.TextureLoader(); loader.load( 'img/earth.jpg', function ( texture ) { var geometry = new THREE.SphereGeometry( 200, 20, 20 ); var material = new THREE.MeshBasicMaterial( { map: texture, overdraw: 0.5 } ); mesh = new THREE.Mesh( geometry, material ); scene.add( mesh ); } ); } function animate() { requestAnimationFrame( animate ); controls.update(); render(); stats.update(); } function render() { camera.lookAt( scene.position ); renderer.render( scene, camera ); }
核心部分
var loader = new THREE.TextureLoader(); //载入贴图 loader.load( 'img/earth.jpg', function ( texture ) { var geometry = new THREE.SphereGeometry( 200, 20, 20 ); var material = new THREE.MeshBasicMaterial( { map: texture, overdraw: 0.5 } ); mesh = new THREE.Mesh( geometry, material ); scene.add( mesh ); } );
threejs api的链接:https://threejs.org/docs/index.html#Manual/Introduction/Creating_a_scene
线上效果:http://htmlpreview.github.io/?https://github.com/zimuqi/ThreeJSEarch/blob/master/earth.html
github上加载很慢 可以下载到底看看效果