vue 3D地球 转动

vue2.0 3D地球 可转动

这里是引用

• 安装 three 插件

npm i three

• html 代码

<template>
  <div id="cavans"></div>
</template>

• JS 代码

<script>
import * as THREE from "three";

export default {
  name: "earth",
  mounted() {
    function randomNum(minNum, maxNum) {
      var num = Math.random() * (maxNum - minNum + 1) + minNum;
      return num;
    }

    var func1 = function () {
      var container = document.getElementById("cavans");

      var scene = new THREE.Scene();

      var camera = new THREE.PerspectiveCamera(
        45,
        window.innerWidth / window.innerHeight,
        1,
        1000
      );
      camera.position.set(0, 0, 500);
      camera.up.set(0, 1, 0);

      var dirLight = new THREE.DirectionalLight(0xffffff, 0.05);
      dirLight.position.set(0, -1, 0).normalize();
      dirLight.color.setHSL(0.1, 0.7, 0.5);
      scene.add(dirLight);

      var light = new THREE.PointLight(0x000a4f, 1.5, 0);
      light.color.setHSL(0.08, 0.8, 0.5);
      light.position.set(-100, 100, -500);
      scene.add(light);

      var AmbientLight = new THREE.AmbientLight(0xffffff, 1); // soft white light
      scene.add(AmbientLight);

      var textureLoader = new THREE.TextureLoader();

      var renderer = new THREE.WebGLRenderer({
        antialias: true,
        alpha: true,
      });
      renderer.setPixelRatio(window.devicePixelRatio);
      renderer.setSize(window.innerWidth, window.innerHeight);
      renderer.outputEncoding = THREE.sRGBEncoding;
      container.appendChild(renderer.domElement);

      var earth1_geometry = new THREE.SphereGeometry(100, 50, 50);
      var earth1_material = new THREE.MeshPhongMaterial({
        map: THREE.ImageUtils.loadTexture("/img/login/earth/earth4.png"), // 地球图片
        transparent: true,
        opacity: 1,
        side: THREE.DoubleSide,
      });
      var earth1 = new THREE.Mesh(earth1_geometry, earth1_material);
      earth1.position.set(-150, 0, 0);
      scene.add(earth1);

      var earth2_geometry = new THREE.SphereGeometry(110, 50, 50);
      var earth2_material = new THREE.MeshPhongMaterial({
        map: THREE.ImageUtils.loadTexture("/img/login/earth/earth5.png"), // 地球图片
        transparent: true,
        opacity: 0.7,
        side: THREE.DoubleSide,
      });
      var earth2 = new THREE.Mesh(earth2_geometry, earth2_material);
      earth2.position.set(0, 0, 0);
      earth1.add(earth2);

      var earth3_geometry = new THREE.SphereGeometry(130, 50, 50);
      var earth3_material = new THREE.MeshPhongMaterial({
        map: THREE.ImageUtils.loadTexture("/img/login/earth/earth6.png"), // 地球图片
        transparent: true,
        opacity: 0.8,
        side: THREE.DoubleSide,
      });
      var earth3 = new THREE.Mesh(earth3_geometry, earth3_material);
      earth3.position.set(-150, 0, 0);
      scene.add(earth3);

      function animate() {
        requestAnimationFrame(animate);

        earth1.rotation.y -= 0.002;
        earth3.rotation.y += 0.002;

        renderer.render(scene, camera);
      }
      animate();

      window.onresize = function () {
        renderer.setSize(window.innerWidth, window.innerHeight);
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
      };
    };
    func1();
  },
};
</script>

• 样式代码

<style>
body,
html {
  margin: 0px;
  padding: 0px;
  border: none;
  overflow: hidden;
}

div {
  border: none;
}
#cavans {
  width: 100%;
  height: 100%;
}
</style>

示例图片文件 earth4.png earth5.png earth6.png