vue+THREE.js实现月球围绕地球转动

<template>

</template>

<script type="text/javascript">

import * as THREE from 'three'

import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls'//控制器

import {CSS2DRenderer,CSS2DObject} from 'three/examples/jsm/renderers/CSS2DRenderer.js'

//three.js使用npm安装

//声明全局变量

let camera,scene,renderer,labelRenderer;

let moon,earth;

let clock = new THREE.Clock();

let nt = clock.getDelta();

const textureLoader = new THREE.TextureLoader();//实例化纹理加载器

export default {

  // 注册

  components: {},

  // 定义变量

  data() {

    return {

    }

  },

  // 计算属性 当里面的数据发生变化时，会自动触发重新计算

  computed: {},

  // 监控data中的变量变化

  watch: {},

  // 方法集合

  methods: {

    init(){

        //地球和月球半径大小

        const EARTH_RADIUS = 2.5;

        const MOON_RADIUS = 0.27;

        //实例化相机

        camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,200);

        //设置相机位置

        camera.position.set(10,5,20);

        //实例化场景

        scene = new THREE.Scene();

        //添加坐标轴

        const axesHelper = new THREE.AxesHelper( 5 );

        scene.add( axesHelper );