three.js创建地球仪

Three.js是一个使用webGL创建3d图形的JavaScript库。主要用于3d图形可视化。本篇文章以创建地球仪的例子，展示three.js的使用。
技术栈：vue3+three.js

创建地球仪分为以下几步

1. 创建场景、相机、渲染器
2. 创建图形
3. 加载贴图，创建材质
4. 创建物体
5. 添加物体到场景

创建场景、相机、渲染器

创建场景、相机、渲染器之前，需要创建一个容器元素，用来承载three.js创建的场景

<template>
<div style="width:100%;height:100%" ref="container">div>
template>

接下来开始使用js创建场景、相机、渲染器

import * as THREE from 'three';
import { onMounted,ref } from 'vue';
const container = ref()
// 创建场景
 const scene = new THREE.Scene();
 // 创建渲染器
 const renderer = new THREE.WebGLRenderer({
    antialias: true,
  });
  renderer.setSize(window.innerWidth, window.innerHeight);
  // 创建相机
   const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 2000);
  camera.position.set(-50,50,130);
  
  onMounted(()=>{
  // 把threejs渲染器创建的元素添加到容器元素中
    container.value!.appendChild(renderer.domElement);
  });
  // 渲染添加到场景中的物体
function render(){
	renderer.render(scene,camera);
	requestAnimationFrame(render);
}

场景、相机、渲染器目前创建完毕，接下来创建一个球体，然后加载贴图，把贴图贴到球体上就完成了地球仪的制作。

// 创建球体
 const sphere = new THREE.SphereGeometry(100,100)
 // 创建贴图加载器
  const textureLoader = new THREE.TextureLoader()
  // 加载贴图
  const texture = textureLoader.load('/texture/earthMap.png')
  // 创建材质
  const material = new THREE.MeshBasicMaterial({
    map:texture // 设置贴图
  })
  // 创建物体
  const mesh = new THREE.Mesh(sphere,material)
  // 把物体添加到场景
  scene.add(mesh)

至此，地球仪已经创建出来了。如果画面比较暗，可以添加环境光。

const ambineLight = new THREE.AmbientLight(0xffffff);
scene.add(ambineLight);

添加环境光之后，就比之前更亮了。
效果图如下：