创建模型地球

Created: November-22, 2018

有关此示例的纹理，请访问： http ： //planetpixelemporium.com/planets.html

安装或设置

你可以通过 npm 安装三个

npm install three

或者将其作为脚本添加到 HTML 页面

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r85/three.min.js" />

HTML：

<html>
<head>
    <meta charset=utf-8>
    <title>Earth Model</title>
    <style>
        body { margin: 0; }
        canvas { width: 100%; height: 100% }
    </style>
</head>
<body>
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.js" />
    <script>
        // Our Javascript will go here.
    </script>
</body>
</html>

创建场景

为了能够显示任何带有 three.js 的东西，我们需要三件事：一个场景，一个摄像头和一个渲染器。我们将使用相机渲染场景。

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

创建球体

为球体创建几何体
创建一个 phong 材料
创建一个 3D 对象
将其添加到场景中

StackOverflow 文档

var geometry = new THREE.SphereGeometry(1, 32, 32);
var material = new THREE.MeshPhongMaterial();
var earthmesh = new THREE.Mesh(geometry, material);

添加漫反射纹理

漫反射贴图设置曲面的主要颜色。当我们将它应用于球体时，我们得到以下图像。

https://i.stack.imgur.com/7MXox.jpg

StackOverflow 文档

material.map    = THREE.ImageUtils.loadTexture('images/earthmap1k.jpg');

添加凹凸贴图纹理

它的每个像素都充当表面上的高度。
由于它们的影子，山脉看起来更清晰。
可以使用 bumpScale 参数更改地图对照明的影响程度。
使用凹凸贴图不会创建或需要额外的顶点（与置换贴图不同）

https://i.stack.imgur.com/dG4sE.jpg

StackOverflow 文档

material.bumpMap   = THREE.ImageUtils.loadTexture('images/earthbump1k.jpg');     
material.bumpScale = 0.05;

添加镜面纹理

使用纹理更改对象的光泽度。
每个像素确定镜面反射的强度。
在这种情况下，只有海是镜面的，因为水反射的光比地球更多。
你可以使用镜面反射参数控制镜面反射颜色。

https://i.stack.imgur.com/3tqI6.jpg

StackOverflow 文档

material.specularMap = THREE.ImageUtils.loadTexture('images/earthspec1k.jpg')
material.specular  = new THREE.Color('grey')

添加云层

我们用画布创建 canvasCloud，并将其用作纹理。
我们这样做是因为 jpg 不处理 alpha 通道。（但是，PNG 图像呢）
我们需要根据以下图像制作代码来构建纹理。

https://i.stack.imgur.com/rzA2U.jpg

https://i.stack.imgur.com/ngioK.jpg

StackOverflow 文档

var geometry   = new THREE.SphereGeometry(0.51, 32, 32)
var material  = new THREE.MeshPhongMaterial({
  map         : new THREE.Texture(canvasCloud),
  side        : THREE.DoubleSide,
  opacity     : 0.8,
  transparent : true,
  depthWrite  : false,
});
var cloudMesh = new THREE.Mesh(geometry, material)
earthMesh.add(cloudMesh)

我们将 cloudMesh 附加到 earthMesh，以便它们一起移动。
我们禁用 depthWrite 并设置 transparent: true 告诉 three.js，云网是透明的。
我们设置了 THREE.DoubleSide，这样双方都可见。
- 这避免了在地球边缘产生伪影。
最后，我们设置 opacity: 0.8 使云更透亮

添加旋转运动

在渲染循环中，你只需增加旋转

最后，我们将为云层设置动画，使其看起来更逼真。

updateFcts.push(function(delta, now) {
    cloudMesh.rotation.y += 1 / 8 * delta;
    earthMesh.rotation.y += 1 / 16 * delta;
  })