Three.js 杂记（九）—— 练习：地球

空城机

关注

发布于: 2021 年 03 月 22 日

效果

上传图片大小限制，减少了 gif 的帧数

主要原理

制作地球的练习原理比较简单，主要使用了贴图的效果。先构建一个球缓冲几何体，然后将地球表面图的素材贴过去

主要代码：

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);

复制代码

代码

<!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>