制作地球

效果

上传图片大小限制，减少了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>

素材

星空背景
地球图片
地球外圈

# javascript # 前端
Logo
GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

[转载]在Windows环境下安装GNU Radio

转自：在Windows环境下安装GNURadio_恐弱智_新浪博客GNU Radio是用Python开发的，大部分开源的工程能够在Linux环境下运行良好，而Windows下却运行的很勉强，而且安装配置都很复杂。GNU Radio算是个例外了，不光提供了Windows的二进制安装，还有比较详细的说明。我是Python小白，所以折腾了好久才弄好，特意记录下来，免得以后再装还折腾。GNU Radio的

avatar GitCode 开源社区

centOS 8 使用dnf安装Docker

DNF是什么？CentOS 8使用YUM软件包管理器版本v4.0.4。现在，该版本使用DNF(已删除YUM)。DNF是软件包管理器。它会在Linux发行版上安装，执行更新并删除软件包。使用DNF安装Docker跳过具有损坏依赖性的程序包一个有效的解决方案是使您的CentOS 8系统使用以下--nobest命令安装最符合条件的版本：sudo dnf install docker...

avatar GitCode 开源社区

定时同步数据库表(mysql+linux+crontab)

sync.sh里面的参数需要改变，ip/username/password/database/tablesync.sh#!/bin/sh# Please change the IP and password of the data source db.# Then change the table name.filename=/home/nington/db/$(date +%Y-%m

avatar GitCode 开源社区