教你用 three.js 写一个炫酷的3D登陆页面

释放双眼,带上耳机,听听看~!

前言:

大家好,我是xx传媒严导(xx这两个字请自行脑补) 。

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

我们先看看成品效果:

高清大图预览(会有些慢):

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

Three.js的基础知识

想象一下,在一个虚拟的3D世界中都需要什么?首先,要有一个立体的空间,其次是有光源,最重要的是要有一双眼睛。下面我们就看看在three.js中如何创建一个3D世界吧!

  1. 创建一个场景
  2. 设置光源
  3. 创建相机,设置相机位置和相机镜头的朝向
  4. 创建3D渲染器,使用渲染器把创建的场景渲染出来

此时,你就通过three.js创建出了一个可视化的3D页面,很简单是吧!

关于场景

你可以为场景添加背景颜色,或创建一个盒模型(球体、立方体),给盒模型的内部贴上图片,再把相机放在这个盒模型内部以达到模拟场景的效果。盒模型的方式多用于360度全景,比如房屋vr展示

【登陆页面】创建场景的例子:

关于光源

为场景设置光源的颜色、强度,同时还可以设置光源的类型(环境光、点光源、平行光等)、光源所在的位置

【登陆页面】创建光源的例子:

关于相机(重要)

很重要的一步,相机就是你的眼睛。这里还会着重说明一下使用透视相机时可能会遇到的问题,我们最常用到的相机就是正交相机和透视相机了。

正交相机:无论物体距离相机距离远或者近,在最终渲染的图片中物体的大小都保持不变。用于渲染2D场景或者UI元素是非常有用的。如图:

图注解:

  1. 图中红色三角锥体是视野的大小
  2. 红色锥体连着的第一个面是摄像机能看到的最近位置
  3. 从该面通过白色辅助线延伸过去的面是摄像机能看到的最远的位置

透视相机:被用来模拟人眼所看到的景象。它是3D场景的渲染中使用得最普遍的投影模式。如图:

我们在使用透视相机时,可能会遇到这种情况:边缘处的物体会产生一定程度上的形变,原因是:透视相机是鱼眼效果,如果视域越大,边缘变形越大。为了避免边缘变形,可以将fov角度设置小一些,距离拉远一些

关于透视相机的几个参数,new THREE.PerspectiveCamera(fov, width / height, near, far)

  • fov(field of view) — 摄像机视锥体垂直视野角度
  • aspect(width / height) — 摄像机视锥体长宽比
  • near — 摄像机视锥体近端面
  • far — 摄像机视锥体远端面

关于渲染器

用WebGL[1]渲染出你精心制作的场景。它会创建一个canvas进行渲染

【登陆页面】创建渲染器的例子:

需要注意,这样创建出来的场景并没有动效,原因是这次渲染的仅仅只是这一帧的画面。为了让场景中的物体能动起来,我们需要使用requestAnimationFrame,所以我们可以写一个loop函数

完善效果

创建一个左上角的地球

使地球自转

创建星星

使星星运动

星星的运动效果,实际就是沿着z轴从远处不断朝着相机位置移动,直到移出相机的位置时回到起点,不断重复这个操作。我们使用上帝视角,从x轴的左侧看去。

创建云以及运动轨迹

现在有了云和曲线路径,我们需要将二者结合,让云按着路径进行运动

使云运动

完成three.js有关效果

最后,把cloudMove函数放入loopAnimate函数中即可实现云的运动。至此,该登录页所有与three.js有关的部分都介绍完了。剩下的月球地面、登录框、宇航员都是通过定位和层级设置以及css3动画实现的,这里就不进行深入的讨论了。

上面的每个部分的代码在连贯性并不完整,并且同登录页的完整代码也有些许出入。上面更多是为了介绍每个部分的实现方式。完整代码,我放在github上了,每行注释几乎都打上了,希望能给你入坑three.js带来一些帮助,地址:https://github.com/Yanzengyong/threejs-login-view

结语

之前用react+three.js写过一个3D可视化的知识图谱,如果这篇对大家有帮助并且反响好的话,后续我会写一篇如何使用three.js创建一个3D知识图谱。

最后,我认为3D可视化的精髓其实在于设计,有好的素材、好的建模,能让你的页面效果瞬间提升N倍

给TA买糖
共{{data.count}}人
人已赞赏
前端技术

纯 CSS 自定义多行省略:从原理到实现

2021-12-22 21:29:52

前端技术

元宇宙相关的前端技术(最新技术)

2021-12-22 21:35:31

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索