Threejs - 几行代码带你创建三维地球-技术圈

需要具备哪些知识？

前端开发中的一些基础知识，html，css，javascript

vue 基本用法 (注意：本实例是基于vue来做的，也可以采用原生js的方式开发，看个人喜好)

先来看下效果吧

开发前准备

1. 一张地球全景平面图

2. 搭建一个三维场景，场景中添加网格模型（前面几讲有具体讲到如何搭建一个三维场景以及添加网格模型，添加相机，灯光，渲染器等）

3. 纹理加载器（TextureLoader）

废话就讲到这里了，直接上代码看效果吧

<template>  <div ref="content"></div></template>
<script>// 引入threejsimport * as THREE from "../../public/build/three";//鼠标控制import { OrbitControls } from "../../public/example/jsm/controls/OrbitControls.js";
export default {  components: {},  data() {    return {      // 创建一个场景      scene: null,      // 创建一个相机      camera: null,      // 创建一个渲染器      renderer: null,      // 模型对象      mesh: null,      // 平面      plane: null,      // 点光源      point: null,
      // step      step:0    };  },
  mounted() {    this.init();  },  methods: {    // 初始化    init() {      // 初始化容器      var content = this.$refs.content;
      // 创建一个场景      this.scene = new THREE.Scene();      this.scene.background = new THREE.Color("#000");
      // 创建几何体      var geometry = new THREE.SphereGeometry(30, 50, 50);    // 纹理加载器 （ 此处加载贴图 ）    var texture = new THREE.TextureLoader().load(require('./Earth.png'));         // 几何体材质对象      var material = new THREE.MeshLambertMaterial({          map: texture      });
      // 创建网格模型对象      this.mesh = new THREE.Mesh(geometry, material);      //设置几何体位置      this.mesh.position.x = 0;      this.mesh.position.y = 10;      this.mesh.position.z = 0;      this.scene.add(this.mesh);
      // 创建点光源      var point = new THREE.PointLight("#FFF");      point.position.set(40, 200, 30);      this.point = point;      this.scene.add(point);
      const sphereSize = 10;      const pointLightHelper = new THREE.PointLightHelper(point, sphereSize);      this.scene.add(pointLightHelper);
      //创建环境光      var ambient = new THREE.AmbientLight(0x444444);      this.scene.add(ambient);
      // 创建一个相机      this.camera = new THREE.PerspectiveCamera(        70,        window.innerWidth / window.innerHeight,        1,        10000      );      this.camera.position.set(-50, 50, 50);      this.camera.lookAt(0, 0, 0);
      //坐标轴辅助器，X,Y,Z长度30    //   var axes = new THREE.AxesHelper(300);    //   this.scene.add(axes);      // 辅助网格    //   let gridHelper = new THREE.GridHelper(100, 100);    //   this.scene.add(gridHelper);
      // 创建渲染器      this.renderer = new THREE.WebGLRenderer();      this.renderer.setSize(window.innerWidth, window.innerHeight);      this.renderer.setClearColor(0xb9d3ff, 1);      //插入 dom 元素      content.appendChild(this.renderer.domElement);
      let controls = new OrbitControls(this.camera, this.renderer.domElement);      controls.addEventListener("resize", this.render(), false);    },
    render() {      this.renderer.render(this.scene, this.camera);      // 自动旋转动画      this.mesh.rotateY(0.01);      requestAnimationFrame(this.render);    }  }};</script>
<style lang="scss" scoped></style>