仓库地址

laddish/threejs-build-earth
https://gitee.com/laddish/threejs-build-earth

预览地址

https://static-c4ab0b87-5a60-4e43-9cfc-1979c6de3ecd.bspapp.com/

效果图

鼠标可以控制地球
地球, 云层和背景星系都会移动
左上角显示渲染的帧数图片.png

主要思路

没什么难点, 最难的估计就是地球的贴图和云层贴图 背景贴图///笑死
地球云层星系都是创建了一个球体 然后引入材质贴图

主要代码

threejs中的几个重要的部分

scene 场景

camera 相机

light 光线

renderer 渲染器

缺一不可

注释写的很清楚 每一步干啥写的都很清楚

  1. import "./style.css";
  2. import * as THREE from "three";
  3. //引入轨道控制
  4. import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
  5. import Stats from "three/examples/jsm/libs/stats.module";
  6. import * as dat from "dat.gui";
  8. const stats = Stats();
  9. document.body.appendChild(stats.dom)
  12. // Debug
  13. const gui = new dat.GUI();
  15. // 加载材质
  16. const loader = new THREE.TextureLoader();
  17. //加载earth贴图 放置在static目录下
  18. const texture = loader.load("texture/earthmap1k.jpg");
  19. //加载肿块
  20. const bumpMap = loader.load("texture/earthbump.jpg");
  21. // 加载云朵材质
  22. const cloudMap = loader.load("texture/earthCloud.png");
  23. // 加载星星材质
  24. const starMap = loader.load("texture/galaxy.png");
  26. // Canvas 至少需要 场景 渲染器 和 照相机 缺一不可
  27. // canvas 元素 是渲染器的渲染范围
  28. const canvas = document.querySelector("canvas.webgl");
  30. // Scene 场景
  31. const scene = new THREE.Scene();
  33. // Objects 创建几何球体 半径范围 宽度 高度
  34. const geometry = new THREE.SphereBufferGeometry(0.7, 32, 32);
  36. // Materials 创建材料
  37. const material = new THREE.MeshPhongMaterial({
  38.   roughness: 1, //粗糙度
  39.   metalness: 0,
  40.   //   也可以使用
  41.   // map:THREE.ImageUtils.loadTexture(),
  42.   map: texture,
  43.   bumpMap,
  44.   bumpScale: 1,
  45. });
  47. //设置材料的颜色
  48. // material.color = new THREE.Color(0x00ff00);
  50. // Mesh 创建网孔球体
  51. const sphere = new THREE.Mesh(geometry, material);
  52. //把球体添加到场景中
  53. scene.add(sphere);
  55. //创建云朵球体 更大点
  56. const cloudGeometry = new THREE.SphereBufferGeometry(0.75, 32, 32);
  57. // Materials 创建材料
  58. const cloudMaterial = new THREE.MeshPhongMaterial({
  59.   map: cloudMap,
  60.   transparent:true, //设置为透明
  61. });
  63. // Mesh 创建网孔球体
  64. const cloudMesh = new THREE.Mesh(cloudGeometry, cloudMaterial);
  65. //把球体添加到场景中
  66. scene.add(cloudMesh);
  69. //创建星星球体 更大点 可能超出视野
  70. const starGeometry = new THREE.SphereBufferGeometry(80, 64, 64);
  71. // Materials 创建基础材料 没有光线
  72. const starMaterial = new THREE.MeshBasicMaterial({
  73.   map: starMap,
  74.   transparent:true, //设置为透明
  75.   side: THREE.BackSide
  76. });
  78. // Mesh 创建网孔球体
  79. const starMesh = new THREE.Mesh(starGeometry, starMaterial);
  80. //把球体添加到场景中
  81. scene.add(starMesh);
  87. // Lights 光线 需要光线才能看到
  88. //创建环境光
  89. const ambientLight = new THREE.AmbientLight(0xffffff, 0.2);
  90. //创建点光源
  91. const pointLight = new THREE.PointLight(0xffffff, 1);
  92. // 点光源必须要设置放置位置
  93. pointLight.position.x = 2;
  94. pointLight.position.y = 3;
  95. pointLight.position.z = 4;
  96. //为场景添加光线
  97. scene.add(ambientLight);
  98. scene.add(pointLight);
  100. /**
  101.  * Sizes
  102.  */
  103. const sizes = {
  104.   width: window.innerWidth,
  105.   height: window.innerHeight,
  106. };
  108. //监听window的resize事件 
  109. //更新camera的长宽比
  110. //更新renderer的大小
  111. window.addEventListener("resize", () => {
  112.   // Update sizes
  113.   sizes.width = window.innerWidth;
  114.   sizes.height = window.innerHeight;
  116.   // Update camera
  117.   camera.aspect = sizes.width / sizes.height;
  118.   camera.updateProjectionMatrix();
  120.   // Update renderer
  121.   renderer.setSize(sizes.width, sizes.height);
  122.   renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
  123. });
  125. /**
  126.  * Camera 照相机 创建透视摄影
  127.  * fov 你想要看到的视角有多大多宽 一般为60
  128.  * aspect 这个场景的长宽比
  129.  * near 0.1
  130.  * far 1000
  131.  */
  132. // Base camera
  133. const camera = new THREE.PerspectiveCamera(
  134.   75,
  135.   sizes.width / sizes.height,
  136.   0.1,
  137.   100
  138. );
  139. // position 照相机的放置位置
  140. camera.position.x = 0;
  141. camera.position.y = 0;
  142. camera.position.z = 2;
  143. scene.add(camera);
  145. // Controls 创建轨道控制器 接收参数 为相机 和 canvas元素
  146. const controls = new OrbitControls(camera, canvas);
  147. controls.enableDamping = true;
  149. /**
  150.  * Renderer 渲染器
  151.  */
  152. const renderer = new THREE.WebGLRenderer({
  153.   canvas: canvas,
  154.   antialias: true, //开启抗锯齿(antialiased)渲染
  155. });
  156. //设置渲染器的大小
  157. renderer.setSize(sizes.width, sizes.height);
  158. //设置渲染器的像素值
  159. renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
  160. //渲染前自动清理
  161. renderer.autoClear = false;
  162. //设置清理颜色
  163. renderer.setClearColor(0x000000, 0);
  165. /**
  166.  * Animate
  167.  */
  169. const clock = new THREE.Clock();
  171. const tick = () => {
  172.   const elapsedTime = clock.getElapsedTime();
  174.   // Update objects 旋转球体的y轴
  175.   sphere.rotation.y = -0.11 * elapsedTime;
  176.   cloudMesh.rotation.y = -0.061 * elapsedTime;
  177.   starMesh.rotation.y = -0.18 * elapsedTime;
  178.   cloudMesh.rotation.x = -0.061 * elapsedTime;
  179.   starMesh.rotation.x = -0.18 * elapsedTime;
  180.   cloudMesh.rotation.z = -0.051 * elapsedTime;
  181.   starMesh.rotation.z = -0.18 * elapsedTime;
  183.   // Update Orbital Controls 更新轨道控制器 可以使用鼠标控制
  184.   controls.update();
  186.   // Render 渲染要在最后才能渲染
  187.   renderer.render(scene, camera);
  189.   stats.update()
  191.   // Call tick again on the next frame
  192.   window.requestAnimationFrame(tick);
  193. };
  195. tick();

克隆

  1. yarn add
  2. yarn dev