vue项目开发中，我们会需要一些动画进行装饰，今天整理的效果是旋转的白色3d地球效果实例。3d旋转地球是基于threejs实现的。

动态效果

实例代码

/**
* @Author: 858834013@qq.com
* @Name: threejs地球
* @Date: 2023年08月22日21:04:14
* @Desc: 旋转的白色地球
*/
<template>
  <div class="canvasGLTFBody">
    <div ref='canvasGLTF' class="canvasGLTF">
    </div>
  </div>
</template>

<script>
import * as THREE from 'three'
import imgs from './assets/earth.png'

var img1 = new THREE.TextureLoader().load(imgs);
export default {
  name: 'earth',
  mounted: function () {
    var that = this
    var width = that.$refs.canvasGLTF.offsetWidth
    var height = that.$refs.canvasGLTF.offsetHeight
    console.log(width)
// 创建三维场景
    var step = 0;
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000);

    var renderer = new THREE.WebGLRenderer({
      antialias: true,
      alpha: true
    });
    
    renderer.setSize(width, height);
    renderer.shadowMapEnabled = true;

    var mats = [];
    mats.push(new THREE.MeshBasicMaterial({map: img1}));

    const geometry = new THREE.SphereGeometry(28.9, 60, 60);
    var material = new THREE.MeshLambertMaterial({
      color: 0xFFFFFF,
      map: img1
    });
//material.wireframe = true;
    var sphere = new THREE.Mesh(geometry, material);
    sphere.rotation.x = 0.1;
//sphere.castShadow = true;
    scene.add(sphere);

    var ambientLight = new THREE.AmbientLight(0x666666);
    scene.add(ambientLight);

    var spotLight = new THREE.SpotLight(0xffffff);
    spotLight.position.set(-40, 160, 100);
    spotLight.castShadow = true;
    scene.add(spotLight);


    camera.position.x = -50;
    camera.position.y = 26;
    camera.position.z = 50;
    camera.lookAt(scene.position);
    render();

    function render() {
      sphere.rotation.y = step += 0.005;
      requestAnimationFrame(render);
      renderer.render(scene, camera);
    }

    that.$refs.canvasGLTF.appendChild(renderer.domElement)
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.canvasGLTFBody {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: nowrap;
  flex-direction: column;
  align-content: flex-start;
}

.canvasGLTF {
  position: relative;
  margin: 0 auto;
  width: 100%;
  height: 100%;
}
</style>

vue3写法

<script>
import {onMounted, onBeforeUnmount, ref} from 'vue';
import * as THREE from 'three';
import imgs from './assets/earth.png'
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls';

export default {
  name: 'map3D',
  setup() {
    const map3DMain = ref(null);
    let camera, renderer;
    onMounted(async () => {


      var img1 = new THREE.TextureLoader().load(imgs);

      var width = map3DMain.value.offsetWidth;
      var height = map3DMain.value.offsetHeight;
      var step = 0;
      var scene = new THREE.Scene();
      camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000);

      renderer = new THREE.WebGLRenderer({
        antialias: true,
        alpha: true
      });
//renderer.setClearColor(0x111111, 1.0);
      renderer.setSize(width, height);
      renderer.shadowMapEnabled = true;

      var mats = [];
      mats.push(new THREE.MeshBasicMaterial({map: img1}));

      const geometry = new THREE.SphereGeometry(28.9, 60, 60);
      var material = new THREE.MeshLambertMaterial({
        color: 0xFFFFFF,
        map: img1
      });
//material.wireframe = true;
      var sphere = new THREE.Mesh(geometry, material);
      sphere.rotation.x = 0.1;
//sphere.castShadow = true;
      scene.add(sphere);

      var ambientLight = new THREE.AmbientLight(0x666666);
      scene.add(ambientLight);

      // 创建环境光，颜色设置为白色，强度为0.5
      var ambientLight = new THREE.AmbientLight(0xffffff, 0.7);
      scene.add(ambientLight);

      // 设置相机的位置
      camera.position.x = -92.5308903110852;
      camera.position.y = 48.116062961764335;
      camera.position.z = 92.53089031108522;
      // 使相机看向场景的中心（假设场景的中心是在原点）
      camera.lookAt(scene.position);
      // 创建OrbitControls的实例
      const controls = new OrbitControls(camera, renderer.domElement);

      // 设置一些可选的控制器参数
      controls.enableDamping = true; // 启用阻尼效果
      controls.dampingFactor = 0.25; // 阻尼系数
      controls.enableZoom = true; // 允许缩放
      render();

      map3DMain.value.appendChild(renderer.domElement);

      function render() {
        sphere.rotation.y = step += 0.005;
        controls.update(); // 需要在渲染循环中更新控制器
        requestAnimationFrame(render);
        renderer.render(scene, camera);
      }

      window.addEventListener('resize', handleResize); // 添加窗口大小变化的监听器
    });

    onBeforeUnmount(() => {
      window.removeEventListener('resize', handleResize); // 移除窗口大小变化的监听器
    });

    /**
     * 窗口变动
     **/

    const handleResize = () => {
      if (camera) { // 检查 camera 是否已经初始化
        const width = map3DMain.value.offsetWidth;
        const height = map3DMain.value.offsetHeight;
        camera.aspect = width / height;
        camera.updateProjectionMatrix();
        renderer.setSize(width, height);
      }
    };

    return {
      map3DMain,
      handleResize,
    }
  },
};
</script>

更多3d地球效果

threejs 3D地球实例汇总

实例下载地址

代码基于 vue3 vite js nodejs 16开发，请确认有一定的代码基础再进行购买