【案例】3D地球（vue+three.js）

需要下载插件

<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 {
      // 创建一个场景
      scene: null,
      // 创建一个相机
      camera: null,
      // 创建一个渲染器
      renderer: null,
      // 模型对象
      mesh: null,
      // 平面
      plane: null,
      // 点光源
      point: null,
      // step
      step: 0,
      controls: null,
      starsGeometry: null,
    }
  },
  mounted() {
    // this.Earth_3D();
    this.init();
  },
  methods: {
    // 初始化
    init() {
        // 初始化容器
        var content = this.$refs.content;
        // 创建一个场景
        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 ) );

        // 创建几何体
        var geometry = new THREE.SphereGeometry(30, 50, 50);
        
        // // 纹理加载器 （ 此处加载贴图 ）
        var texture = new THREE.TextureLoader().load(require('@/assets/earth3.jpg'));
        // 发光地球
        // 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);
        
        //  光环
        // 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 );
        
        // 几何体材质对象
        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( 60, window.innerWidth / window.innerHeight, 1,  1000 );
        this.camera.position.set(100, 100, 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);
        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);
        // 自动旋转动画
        this.mesh.rotateY(0.002);
        requestAnimationFrame(this.render);
    },
    // 创建灯光
    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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186

有人找不到合适的地球平面图的话，可直接地球平面图