[Case] 3D Earth (vue+three.js)

Need to download plug-in

<template>
    <div class="demo">
        <div id="container" ref="content"></div>
    </div>
</template>
<script>
import * as THREE from 'three';
// import mapJSON from '../map.json';
import {<!-- --> OrbitControls } from "three/examples/jsm/controls/OrbitControls";
export default {<!-- -->
  // components :{ CoolEarth},
  data() {<!-- -->
    return {<!-- -->
      //Create a scene
      scene: null,
      //Create a camera
      camera: null,
      //Create a renderer
      renderer: null,
      // model object
      mesh: null,
      // plane
      plane: null,
      // point Light
      point: null,
      // step
      step: 0,
      controls: null,
      starsGeometry: null,
    }
  },
  mounted() {<!-- -->
    // this.Earth_3D();
    this.init();
  },
  methods: {<!-- -->
    // initialization
    init() {<!-- -->
        //Initialize container
        var content = this.$refs.content;
        //Create a scene
        this.scene = new THREE.Scene();
        
        
        this.scene.background = new THREE.Color("#000000");
// const positions = [];
// var colors = [];
// var geometry = new THREE.BufferGeometry();
// for (var i = 0; i < 100; i + + ) {<!-- -->
// var vertex = new THREE.Vector3();
// vertex.x = Math.random() * 2 - 1;
// vertex.y = Math.random() * 2 - 1;
// // vertex.z = Math.random() * 2 + 1;
// positions.push( vertex.x, vertex.y, );
// var color = new THREE.Color();
// color.setHSL( Math.random() * 0.2 + 0.5, 0.55, Math.random() * 0.25 + 0.55 );
// colors.push( color.r, color.g, color.b );
// }
// geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ) );
// geometry.setAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );

        //Create geometry
        var geometry = new THREE.SphereGeometry(30, 50, 50);
        
        // // Texture loader (load texture here)
        var texture = new THREE.TextureLoader().load(require('@/assets/earth3.jpg'));
        // glowing earth
        // let lightTexture = new THREE.TextureLoader().load("@/assets/earth.jpg");
        // let lightEarthGeometry = new THREE.SphereGeometry(53, 30, 28);
        // let lightEarthMaterial = new THREE.MeshBasicMaterial({<!-- -->
        // map: lightTexture,
        // alphaMap: lightTexture,
        // blending: THREE.AdditiveBlending,
        // transparent: true,
        // });

        // let lightEarth = new THREE.Mesh(lightEarthGeometry, lightEarthMaterial);
        // this.scene.add(lightEarth);
        
        // halo
        // var huan = new THREE.TextureLoader().load( '@/assets/00.jpg' );
        // var spriteMaterial = new THREE.SpriteMaterial( {<!-- -->
        // map: huan,
        // transparent: true,
        // opacity: 0.5,
        // depthWrite: false
        // } );
        // var sprite = new THREE.Sprite( spriteMaterial );
        // sprite.scale.set( 5 * 3, 5 * 3, 1 );
        // this.scene.add( sprite );
        
        // Geometry material object
        var material = new THREE.MeshLambertMaterial({<!-- -->
            map: texture
        });
        //Create mesh model object
        this.mesh = new THREE.Mesh(geometry, material);
        //Set the geometry position
        this.mesh.position.x = 0;
        this.mesh.position.y = 10;
        this.mesh.position.z = 0;
        this.scene.add(this.mesh);

        //Create point light source
        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);
        //Create ambient light
        var ambient = new THREE.AmbientLight(0x444444);
        this.scene.add(ambient);

        //Create a camera
        this.camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
        this.camera.position.set(100, 100, 50);
        this.camera.lookAt(0, 0, 0);

        // // Coordinate axis auxiliary, X, Y, Z length 30
        // var axes = new THREE.AxesHelper(300);
        // this.scene.add(axes);
        // // // Auxiliary grid
        // let gridHelper = new THREE.GridHelper(100, 100);
        // this.scene.add(gridHelper);

        //Create renderer
        this.renderer = new THREE.WebGLRenderer();
        this.renderer.setSize(window.innerWidth, window.innerHeight);
        this.renderer.setClearColor(0xb9d3ff, 1);
        //Insert dom element
        content.appendChild(this.renderer.domElement);
        console.log("1111",OrbitControls)
        this.controls = new OrbitControls(this.camera, this.renderer.domElement);
        
        this.controls.addEventListener("resize", this.render(), false);

        this.createLight();
        
    },

    render() {<!-- -->
        this.renderer.render(this.scene, this.camera);
        //Automatic rotation animation
        this.mesh.rotateY(0.002);
        requestAnimationFrame(this.render);
    },
    //Create lights
    createLight() {<!-- -->
      this.light = new THREE.DirectionalLight({<!-- -->
        color: 'blue'
      })
      this.light.position.set(100, 100, 100)
      this.scene.add(this.light)
    },
    Earth_3D() {<!-- -->
      const scene = new THREE.Scene();
      const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
      const renderer = new THREE.WebGLRenderer();
      renderer.setSize( window.innerWidth, window.innerHeight );
      document.body.appendChild( renderer.domElement );
      const geometry = new THREE.BoxGeometry( 1,1,1 );
      const material = new THREE.MeshBasicMaterial( {<!-- --> color: 0x00ff00 } );
      const cube = new THREE.Mesh(geometry, material);
      scene.add( cube );

      camera.position.z = 5;

      function animate() {<!-- -->
        requestAnimationFrame( animate );
        renderer.render( scene, camera );
      }
      animate();
      cube.rotation.x + = 0.01;
      cube.rotation.y + = 0.01;

    },
  }
}
</script>
<style scoped>

</style>

If someone can’t find a suitable earth plane map, he can directly use the earth plane map.