介绍
本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上加载很慢 可以下载到底看看效果