Hacer la tierra
efecto
Carga límite de tamaño de imagen, reduciendo el número de marcos gif
Principio fundamental
El principio práctico de hacer la tierra es relativamente simple, principalmente utilizando el efecto de textura. Primero construya una geometría de búfer esférica y luego pegue el material del mapa de la superficie terrestre.
Código principal:
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);
Código
<!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
