【原创】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上加载很慢 可以下载到底看看效果