如何用Vue和Three.js打造炫酷3D登录页面的长尾关键词？

本文共计2688个文字，预计阅读时间需要11分钟。

目录+前言：Three.js基础知识+关于场景+关于光源（重要）+关于相机+关于渲染器+完善效果+创建一个左上角的地球+使地球自转+创建星星+使星星运动+创建云以及运动轨迹+使云运动+完成

目录

• 前言：
• Three.js的基础知识
• 关于场景
• 关于光源
• 关于相机（重要）
• 关于渲染器
• 完善效果
• 创建一个左上角的地球
• 使地球自转
• 创建星星
• 使星星运动
• 创建云以及运动轨迹
• 使云运动
• 完成three.js有关效果
• 结语

前言：

大家好，我是xx传媒严导（xx这两个字请自行脑补） 。

该篇文章用到的主要技术：vue3、three.js

我们先看看成品效果：

高清大图预览（会有些慢）：

座机小图预览：

废话不多说，直接进入正题

Three.js的基础知识

想象一下，在一个虚拟的3D世界中都需要什么？首先，要有一个立体的空间，其次是有光源，最重要的是要有一双眼睛。