THREE.JS 实现炫酷的 3D 简历网站

作者：知心宝贝

2023-04-24
江苏
本文字数：6062 字
阅读完需：约 20 分钟

一、前言

最近，在 github 上面找到了一个不错的技术介绍网站，主要使用 html+css+js 原生三件套写的。我在此基础之上利用 three.js 加了一点 3D 元素在里面，让这个网站看起来更炫酷。

改的时候，感觉原生还是比不上框架来的方便，后续有时间我会抽离一个 vue 组件的版本。

在线访问：在线访问

开源地址：个人简历

二、模型准备

2.1 资源寻找

对于模型来说，我们可以自己慢慢的建一个模型，但是很费时间。不想自己建模的话，自己可以直接在网上找到一些资源，导入到 blender 进行相关修改。以下是一些好用的 3D 资源网站：

TurboSquid - https://www.turbosquid.com/
CGTrader - https://www.cgtrader.com/
Sketchfab - https://sketchfab.com/
3DExport - https://3dexport.com/
Free3D - https://free3d.com/
Unity Asset Store - https://assetstore.unity.com/
Poly by Google - https://poly.google.com/
Clara.io - https://clara.io/
Blend Swap - https://www.blendswap.com/
3D Warehouse by SketchUp - https://3dwarehouse.sketchup.com/

这些网站提供了各种类型的 3D 模型和纹理，包括游戏资源、建筑物、人物、动物、车辆等。有些网站提供免费的资源，而有些网站则需要付费才能下载高质量的资源。希望这些网站可以帮助您找到所需的 3D 资源。

2.2 资源处理

修改好想要的模型之后，由于网页端要追求性能，所以我们要对模型进行压缩（一般可以压缩到原来的 1/10）。压缩后使用 three.js 特定的 DRACOLoader 解压文件。

2.3 Draco 压缩

虽然我们可能会觉得使用 Draco 压缩是个双赢局面，但实际上并非如此。确实它会让几何体更轻量，但首先要使用的时候必须加载 DracoLoader 类和解码器。其次，我们计算机解码一个压缩文件需要时间和资源，这可能会导致页面打开时有短暂冻结，即便我们使用了 worker 和 WebAssembly。因此我们必须根据实际来决定使用什么解决方案。如果一个模型具有 100kb 的几何体，那么则不需要 Draco 压缩，但是如果我们有 MB 大小的模型要加载，并且不关心在开始运行时有些许页面冻结，那么便可能需要用到 Draco 压缩。

三、基础场景

import * as THREE from 'three'import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js'import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js'
const canvas = document.querySelector('.webgl')const rect = canvas.getBoundingClientRect();const sizes = {    width: rect.width,    height: rect.height}
let scene, camera, rendererlet controls, guilet init = () => {    //场景    scene = new THREE.Scene()
    // 相机    camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 1000)    camera.position.set(-2.85, 4.37, 2.49)    camera.lookAt(scene.position)

    // 渲染器    renderer = new THREE.WebGLRenderer({ canvas: canvas, antialias: true, alpha: true })    renderer.setSize(sizes.width, sizes.height)    // renderer.setClearColor('lightsalmon', 0.5)    renderer.setPixelRatio(window.devicePixelRatio)    renderer.useLegacyLights = true    renderer.shadowMap.enabled = true    renderer.shadowMap.type = THREE.PCFSoftShadowMap
    // 真实性物理渲染    renderer.physicallyCorrectLights = true    renderer.outputEncoding = THREE.sRGBEncoding    renderer.toneMapping = THREE.ACESFilmicToneMapping


    //控制器    controls = new OrbitControls(camera, renderer.domElement)    controls.enableDamping = false    controls.enableZoom = false    controls.enablePan = false
    controls.minPolarAngle = Math.PI / 6    controls.maxPolarAngle = Math.PI / 3
    controls.minAzimuthAngle = -Math.PI / 6    controls.maxAzimuthAngle = Math.PI / 2}
//加载模型const dracoLoader = new DRACOLoader()dracoLoader.setDecoderPath('./assets/js/three/draco/')const gltfLoader = new GLTFLoader()gltfLoader.setDRACOLoader(dracoLoader)
let loadModel = () => {    gltfLoader.load('./assets/model/office.glb', (gltf) => {
        const office = gltf.scene        office.rotation.y = Math.PI / 2        office.traverse((child) => {            if (child instanceof THREE.Mesh) {
                child.castShadow = true                child.receiveShadow = true
                if (child.name === 'mac-screen') {                    screen = child                } else if (child.name === 'Chair') {                    chair = child                } else if (child.name === 'lamp-top') {                    // console.log(child.position);
                }            }        })        setScreenVideo()        setChairRotate()        scene.add(office)    })}//渲染let animate = () => {
    controls.update()    renderer.render(scene, camera)    requestAnimationFrame(animate)}
init()loadModel()animate()

复制代码

three.js 的场景基础包括：

Scene（场景）：包含所有的 3D 对象、光源和摄像机。
Camera（相机）：定义了视角和投影方式，控制着我们从场景中看到的内容。
Renderer（渲染器）：将场景和相机中的对象渲染到屏幕上。
Mesh（网格）：3D 对象的基本组成部分，由三角形构成。可以使用不同的材质和纹理来给网格添加颜色和纹理。
Material（材质）：定义了网格的颜色、纹理、光照等属性。
Light（光源）：在场景中添加光源可以让物体更加真实地呈现。
Texture（纹理）：可以给网格添加图片或者其他图案。
Geometry（几何体）：描述了网格的形状和大小。

四、灯光

4.1 介绍

在 three.js 中，灯光用来模拟现实中的光照条件，可以让场景中的物体更加真实地呈现。灯光可以为物体提供不同的光照效果，如明亮的阳光、柔和的夜灯、闪烁的蜡烛等。three.js 中的灯光有以下几种类型：

AmbientLight（环境光）：在整个场景中均匀地分布着光源，使得整个场景看起来更加明亮。
DirectionalLight（平行光）：模拟来自于一个方向的太阳光线，具有方向性，可以产生明暗的效果。
PointLight（点光源）：模拟来自于一个点的光源，可以产生明暗的效果，也可以产生阴影。
SpotLight（聚光灯）：模拟来自于一个点的光源，具有方向性，可以产生明暗的效果，也可以产生锥形的阴影。

通过设置不同的灯光类型、颜色、强度、位置等属性，可以在 three.js 中模拟出各种不同的光照效果，使得场景中的物体看起来更加真实。

4.2 阴影相机

本例，我们要尽可能的模拟灯光效果，所以对于阴影也要考虑在内。对于阴影来说，会先用一个特殊的相机（称为阴影相机）从光源的位置来渲染场景，并将渲染结果保存到一个深度纹理中。这个深度纹理记录了场景中每个像素距离光源的距离，也即是场景中哪些物体遮挡了该像素。当渲染场景时，系统会根据阴影相机生成的深度纹理来计算每个像素是否在阴影中。具体来说，对于每个像素，系统会根据它在阴影相机中的位置、深度信息和光源的位置和方向来计算它是否被遮挡。如果该像素被遮挡，则它的颜色值将被调整以模拟出阴影效果，否则它的颜色值不变。

4.3 灯光渲染

在 three.js 中，有三种灯光类型可以被渲染，分别是平行光（DirectionalLight）、点光源（PointLight）和聚光灯（SpotLight）。这些灯光可以被添加到场景中，并通过设置它们的属性来控制它们的位置、颜色、强度、范围等参数，从而实现不同的光照效果。这些灯光可以被渲染到不同类型的相机中，具体如下：

平行光（DirectionalLight）：平行光模拟的是来自于一个方向的光线，具有方向性，可以产生明暗的效果。平行光只能被渲染到正交相机（OrthographicCamera）中
点光源（PointLight）：点光源模拟的是来自于一个点的光线，可以产生明暗的效果，也可以产生阴影。点光源只能被渲染到透视相机（PerspectiveCamera）中
聚光灯（SpotLight）：聚光灯模拟的是来自于一个点的光线，具有方向性，可以产生明暗的效果，也可以产生锥形的阴影。聚光灯只能被渲染到透视相机（PerspectiveCamera）中

五、动画

5.1 多媒体

使用 Three.js 的 VideoTexture 可以将视频作为纹理应用到 3D 对象上，实现很酷的效果。首先，在一开始加载模型的时候要把需要贴图的对象找到传入函数，第二步添加视频纹理。

// 屏幕播放音频let screen = nulllet setScreenVideo = () => {
    const video = document.createElement('video')    video.src = './assets/video/kda.mp4'    video.muted = true    video.playsInline = true    video.autoplay = true    video.loop = true    video.play()    const videoTexture = new THREE.VideoTexture(video)
    // 添加真实性渲染，后面改    screen.material = new THREE.MeshBasicMaterial({        map: videoTexture,    })}

复制代码

5.2 椅子旋转

这里对于过渡的效果统一使用 gsap 完成，GSAP 是一个 JavaScript 动画库，用于创建高性能、流畅的动画效果。文章参考：GSAP的香，我来带你get~时入1k算少的！！

// 添加椅子旋转let chair = nulllet setChairRotate = () => {    gsap.to(chair.rotation, {        y: Math.PI / 4,        duration: 10,        ease: 'power1.inOut',        repeat: -1,        yoyo: true,    })}

复制代码

5.3 明暗变换

当我们切换界面的明暗时，模型理应跟着变换。所以模型要响应变化，一开始我们为灯光添加 debug-gui，可以时刻调试灯光。

let debugUI = () => {    //gui控制器    gui = new GUI()    let folder1 = gui.addFolder('环境光')    folder1.addColor(ambientLight, 'color')    folder1.add(ambientLight, 'intensity', 0, 10, 0.01)    folder1.close()
    let folder2 = gui.addFolder('太阳光')    folder2.add(sunLight.position, 'x', -5, 5, 0.01)    folder2.add(sunLight.position, 'y', -5, 5, 0.01)    folder2.add(sunLight.position, 'z', -5, 5, 0.01)    folder2.addColor(sunLight, 'color')    folder2.add(sunLight, 'intensity', 0, 10, 0.01)    folder2.close()

    let folder3 = gui.addFolder('台灯')    folder3.add(spotLight.position, 'x', -5, 5, 0.01)    folder3.add(spotLight.position, 'y', -5, 5, 0.01)    folder3.add(spotLight.position, 'z', -5, 5, 0.01)    folder3.addColor(spotLight, 'color')    folder3.add(spotLight, 'intensity', 0, 10, 0.01)    folder3.close()
    let folder4 = gui.addFolder('相机')    folder4.add(camera.position, 'x', -10, 10, 0.01)    folder4.add(camera.position, 'y', -10, 10, 0.01)    folder4.add(camera.position, 'z', -10, 10, 0.01)    // folder4    folder4.add(params, 'showCmeraInfo')
    // gui.close()

}

复制代码

let gsapTheme = () => {    if (getCurrentTheme() === 'light') {        gsap.to(ambientLight, { intensity: 2.5 })        gsap.to(ambientLight.color, {            ...ambientLightColor,            duration: durationTime        })        gsap.to(sunLight, { intensity: 2.5, duration: durationTime })        gsap.to(spotLight, { intensity: 0, duration: durationTime })    } else {        gsap.to(ambientLight, { intensity: 3.8, duration: durationTime })        gsap.to(ambientLight.color, {            ...ambientDarkColor,            duration: durationTime        })        gsap.to(sunLight, { intensity: 0, duration: durationTime })        gsap.to(spotLight, { intensity: 3.5, duration: durationTime })
    }}

复制代码

六、真实性渲染

6.1 uv 贴图

这里的技术并没有手动贴上 uv 贴图，但是作为一项基本的理论，还是要掌握一下。UV 贴图是将纹理图像映射到三维物体表面上的一种技术，它依赖于 UV 坐标系来确定纹理图像在物体表面上的位置。其中，U 和 V 分别表示纹理图像在水平和垂直方向上的坐标，取值通常是 0 到 1 之间（水平方向的第 U 个像素/图片宽度，垂直方向的第 V 个像素/图片高度）。对于某些特殊的 3D 贴图技术，可能会使用到 W 坐标，但在一般情况下，UV 坐标系就足够描述纹理映射了。展 UV 是将物体表面展开成二维平面，以便进行纹理贴图，这一过程也需要使用到 UV 坐标系来确定各个点在展开平面上的位置。

6.2 光照

在 three.js 中，physicallyCorrectLights 是一个属性，用于指定渲染器是否使用物理正确的光照模型。当该属性设置为 true 时，渲染器会使用基于物理的光照模型，以便更准确地模拟真实世界中的光照效果。

renderer.physicallyCorrectLights = true

复制代码

6.3 渲染器

尽管目前看起来效果还行，但在颜色方面还是有点欠缺需要下点工夫。这是因为 WebGLRenderer 属性的问题。

6.3.1 utputEncoding

outputEncoding 属性控制输出渲染编码。默认情况下，outputEncoding的值为 THREE.LinearEncoding，看起来还行但是不真实，建议将值改为 THREE.sRGBEncoding

6.3.2 Tone mapping

色调映射 Tone mapping 旨在将超高的动态范围 HDR 转换到我们日常显示的屏幕上的低动态范围 LDR 的过程。说明一下 HDR 和 LDR（摘自知乎 LDR 和 HDR）：

因为不同的厂家生产的屏幕亮度（物理）实际上是不统一的，那么我们在说 LDR 时，它是一个 0 到 1 范围的值，对应到不同的屏幕上就是匹配当前屏幕的最低亮度（0）和最高亮度（1）
自然界中的亮度差异是非常大的。例如，蜡烛的光强度大约为 15，而太阳光的强度大约为 10w。这中间的差异是非常大的，有着超级高的动态范围。
我们日常使用的屏幕，其最高亮度是经过一系列经验积累的，所以使用、用起来不会对眼睛有伤害；但自然界中的，比如我们直视太阳时，实际上是会对眼睛产生伤害的。

那为了改变色调映射 tone mapping，则要更新 WebGLRenderer 上的 toneMapping 属性，有以下这些值

THREE.NoToneMapping (默认)THREE.LinearToneMappingTHREE.ReinhardToneMappingTHREE.CineonToneMappingTHREE.ACESFilmicToneMapping

复制代码

尽管我们的贴图不是 HDR，但使用 tone mapping 可以塑造更真实的效果。

6.4 阴影失真

在计算曲面是否处于阴影中时，由于精度原因，阴影失真可能会发生在平滑和平坦表面上。而现在在汉堡包上发生的是汉堡包在它自己的表面上投射了阴影。因此我们必须调整灯光阴影 shadow 的“偏移 bias”和“法线偏移 normalBias”属性来修复此阴影失真。

bias 通常用于平面，因此不适用于我们的汉堡包。但如果你有在一块平坦的表面上出现阴影失真，可以试着增加偏差直到失真消失。
normalBias 通常用于圆形表面，因此我们增加法向偏差直到阴影失真消失。

发布于: 2023-04-24阅读数: 39

原文链接:【http://xie.infoq.cn/article/4df129122a750981b6a5c172e】。文章转载请联系作者。

知心宝贝

关注

公众号：穿越计算机的迷雾 2022-03-07 加入

生于尘埃溺于人海死于理想高台

发布

暂无评论

创作场景

THREE.JS 实现炫酷的 3D 简历网站

一、前言

二、模型准备

2.1 资源寻找

2.2 资源处理

2.3 Draco 压缩

三、基础场景

四、灯光

4.1 介绍

4.2 阴影相机

4.3 灯光渲染

五、动画

5.1 多媒体

5.2 椅子旋转

5.3 明暗变换

六、真实性渲染

6.1 uv 贴图

6.2 光照

6.3 渲染器

6.3.1 utputEncoding

6.3.2 Tone mapping

6.4 阴影失真

知心宝贝

评论