Faça a terra
efeito
Limite de tamanho de imagem de upload, reduzindo o número de quadros GIF
Princípio principal
O princípio prático de fazer a terra é relativamente simples, principalmente usando o efeito de textura. Primeiro construa uma geometria de buffer esférica e, em seguida, cole o material do mapa da superfície 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
