Make the earth
effect
Upload image size limit, reducing the number of gif frames
Main principle
The practice principle of making the earth is relatively simple, mainly using the effect of texture. First construct a spherical buffer geometry, and then paste the material of the earth surface map.
Main code:
var geometry = new THREE.SphereBufferGeometry(34, 50, 50);
var textureLoader = new THREE.TextureLoader(); // 纹理加载器
var texture = textureLoader.load('./img/earth/css_globe_diffuse.jpg'); // 加载图片，返回Texture对象
var material = new THREE.MeshBasicMaterial({
map: texture, // 设置纹理贴图
});
var sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);
Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>地球</title>
<!-- three.js和OrbitControls.js来自three的下载 -->
<script src="./js/three.js" type="text/javascript" charset="utf-8"></script>
<script src="./js/OrbitControls.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.bg {
width: 100%;
height: 100%;
background: url(./img/earth/css_globe_bg.jpg) no-repeat center center;
background-size: 100% 100%;
position: absolute;
z-index: -1;
}
.border_bg {
width: 730px;
height: 715px;
margin: 0 auto;
background: url(./img/earth/css_globe_halo.png) no-repeat -2px 7px;
background-size: 100% 100%;
}
#app {
width: 730px;
height: 715px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="bg">
<div class="border_bg"></div>
</div>
<div id="app"></div>
<script type="text/javascript">
var scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(105, 730 / 715, 1, 1000);
render = new THREE.WebGLRenderer({
antialias: true,
alpha: true //设置canvas为背景透明
});
render.setPixelRatio(window.devicePixelRatio);
render.setSize(730, 715)
/********************************************************/
var app = document.getElementById("app");
app.appendChild(render.domElement);
var geometry = new THREE.SphereBufferGeometry(34, 50, 50);
var textureLoader = new THREE.TextureLoader(); // 纹理加载器
var texture = textureLoader.load('./img/earth/css_globe_diffuse.jpg'); // 加载图片，返回Texture对象
var material = new THREE.MeshBasicMaterial({
map: texture, // 设置纹理贴图
});
var sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);
// 相机
camera.position.set(20, 20, 40); //设置相机位置
camera.lookAt(new THREE.Vector3(0, 0, 0))
// 鼠标控件
var controls = new THREE.OrbitControls(camera, render.domElement);
render.domElement.removeAttribute('tabindex'); //去除鼠标控件使用时的白色边框
// 坐标轴
// var axisHelper = new THREE.AxisHelper(100);
// scene.add(axisHelper)
/********************************************************/
function animate() {
// meshs.rotation.y += 0.03;
render.render(scene, camera);
window.requestAnimationFrame(animate);
}
animate();
</script>
</body>
</html>
Material
