基于vue利用three.js实现地球

在vue中使用three.js实现3D地球

效果图如下

开始引入相关插件

npm install three

2.安装轨道控件插件

npm install three-orbit-controls

3.接下来安装加载.obj和.mtl文件的插件

npm i --save three-obj-mtl-loader

4.安装渲染器插件

npm i --save three-css2drender

实现代码

<!--
 * @Descripttion: 说明
 * @version: V1.0
 * @Author: SL
 * @Date: 2021-07-19 14:24:27
 * @LastEditors: SL
 * @LastEditTime: 2021-07-20 15:55:11
-->
<template>
    <div class="demo">
        <div id="container" ref="content"></div>
    </div>
</template>

<script>
import * as THREE from 'three'
// 鼠标控制器
import {
    OrbitControls } from "three/examples/jsm/controls/OrbitControls";
export default {
   
    name: 'ThreeTest',
    data() {