three.js加载有贴图的三维模型(亲测，已实现)

<template>

  <div class="earth-container">

    <div

      id="container"

      class="container"

      ref="container"

    />

  </div>

</template>

 

<script>

import * as THREE from "three";

import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";

import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

 

export default {

  name: "Index",

  data() {

    return {

      scene: "",

      light: "",

      camera: "",

      controls: "",

      renderer: "",

      clickObjects:[],

    };

  },

  methods: {

    // 初始化three.js相关内容

    init() {

      this.scene = new THREE.Scene();

      this.scene.add(new THREE.AmbientLight(0x999999)); // 环境光

      // this.scene.background

      this.light = new THREE.DirectionalLight(0xdfebff, 0.45); // 从正上方（不是位置）照射过来的平行光，0.45的强度

      this.light.position.set(100, 100, 400);

      this.light.position.multiplyScalar(0.3);

      this.light.shadow.camera.near = 20; // 产生阴影的最近距离

      this.light.shado