最近,在github上面找到了一个不错的技术介绍网站,主要使用html+css+js原生三件套写的。我在此基础之上利用three.js加了一点3D元素在里面,让这个网站看起来更炫酷。
改的时候,感觉原生还是比不上框架来的方便,后续有时间我会抽离一个vue组件的版本。
开源地址:个人简历 在线访问:个人简历 参考资源:responsive-portfolio-website
对于模型来说,我们可以自己慢慢的建一个模型,但是很费时间。不想自己建模的话,自己可以直接在网上找到一些资源,导入到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资源。
修改好想要的模型之后,由于网页端要追求性能,所以我们要对模型进行压缩(一般可以压缩到原来的1/10)。压缩后使用three.js特定的DRACOLoader解压文件。
虽然我们可能会觉得使用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, renderer
let controls, gui
let 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(几何体):描述了网格的形状和大小。
在 three.js 中,灯光用来模拟现实中的光照条件,可以让场景中的物体更加真实地呈现。灯光可以为物体提供不同的光照效果,如明亮的阳光、柔和的夜灯、闪烁的蜡烛等。 three.js 中的灯光有以下几种类型:
- AmbientLight(环境光):在整个场景中均匀地分布着光源,使得整个场景看起来更加明亮。
- DirectionalLight(平行光):模拟来自于一个方向的太阳光线,具有方向性,可以产生明暗的效果。
- PointLight(点光源):模拟来自于一个点的光源,可以产生明暗的效果,也可以产生阴影。
- SpotLight(聚光灯):模拟来自于一个点的光源,具有方向性,可以产生明暗的效果,也可以产生锥形的阴影。
通过设置不同的灯光类型、颜色、强度、位置等属性,可以在 three.js 中模拟出各种不同的光照效果,使得场景中的物体看起来更加真实。
本例,我们要尽可能的模拟灯光效果,所以对于阴影也要考虑在内。对于阴影来说,会先用一个特殊的相机(称为阴影相机)从光源的位置来渲染场景,并将渲染结果保存到一个深度纹理中。这个深度纹理记录了场景中每个像素距离光源的距离,也即是场景中哪些物体遮挡了该像素。
当渲染场景时,系统会根据阴影相机生成的深度纹理来计算每个像素是否在阴影中。具体来说,对于每个像素,系统会根据它在阴影相机中的位置、深度信息和光源的位置和方向来计算它是否被遮挡。如果该像素被遮挡,则它的颜色值将被调整以模拟出阴影效果,否则它的颜色值不变。
在 three.js 中,有三种灯光类型可以被渲染,分别是平行光(DirectionalLight)、点光源(PointLight)和聚光灯(SpotLight)。 这些灯光可以被添加到场景中,并通过设置它们的属性来控制它们的位置、颜色、强度、范围等参数,从而实现不同的光照效果。 这些灯光可以被渲染到不同类型的相机中,具体如下:
- 平行光(DirectionalLight):平行光模拟的是来自于一个方向的光线,具有方向性,可以产生明暗的效果。平行光只能被渲染到正交相机(OrthographicCamera)中
- 点光源(PointLight):点光源模拟的是来自于一个点的光线,可以产生明暗的效果,也可以产生阴影。点光源只能被渲染到透视相机(PerspectiveCamera)中
- 聚光灯(SpotLight):聚光灯模拟的是来自于一个点的光线,具有方向性,可以产生明暗的效果,也可以产生锥形的阴影。聚光灯只能被渲染到透视相机(PerspectiveCamera)中
使用 Three.js 的 VideoTexture 可以将视频作为纹理应用到 3D 对象上,实现很酷的效果。首先,在一开始加载模型的时候要把需要贴图的对象找到传入函数,第二步添加视频纹理。
// 屏幕播放音频
let screen = null
let 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,
})
}
这里对于过渡的效果统一使用gsap完成,GSAP是一个JavaScript动画库,用于创建高性能、流畅的动画效果。 文章参考:GSAP的香,我来带你get~时入1k算少的!!
// 添加椅子旋转
let chair = null
let setChairRotate = () => {
gsap.to(chair.rotation, {
y: Math.PI / 4,
duration: 10,
ease: 'power1.inOut',
repeat: -1,
yoyo: true,
})
}
当我们切换界面的明暗时,模型理应跟着变换。所以模型要响应变化,一开始我们为灯光添加**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 })
}
}
这里的技术并没有手动贴上uv贴图,但是作为一项基本的理论,还是要掌握一下。 UV贴图是将纹理图像映射到三维物体表面上的一种技术,它依赖于UV坐标系来确定纹理图像在物体表面上的位置。其中,U和V分别表示纹理图像在水平和垂直方向上的坐标,取值通常是0到1之间(水平方向的第U个像素/图片宽度,垂直方向的第V个像素/图片高度)。 对于某些特殊的3D贴图技术,可能会使用到W坐标,但在一般情况下,UV坐标系就足够描述纹理映射了。展UV是将物体表面展开成二维平面,以便进行纹理贴图,这一过程也需要使用到UV坐标系来确定各个点在展开平面上的位置。
在three.js中,physicallyCorrectLights是一个属性,用于指定渲染器是否使用物理正确的光照模型。当该属性设置为true时,渲染器会使用基于物理的光照模型,以便更准确地模拟真实世界中的光照效果。
renderer.physicallyCorrectLights = true
尽管目前看起来效果还行,但在颜色方面还是有点欠缺需要下点工夫。这是因为WebGLRenderer 属性的问题。
outputEncoding属性控制输出渲染编码。默认情况下,outputEncoding的值为THREE.LinearEncoding,看起来还行但是不真实,建议将值改为THREE.sRGBEncoding
色调映射Tone mapping旨在将超高的动态范围HDR转换到我们日常显示的屏幕上的低动态范围LDR的过程。 说明一下HDR和LDR(摘自知乎LDR和HDR):
- 因为不同的厂家生产的屏幕亮度(物理)实际上是不统一的,那么我们在说LDR时,它是一个0到1范围的值,对应到不同的屏幕上就是匹配当前屏幕的最低亮度(0)和最高亮度(1)
- 自然界中的亮度差异是非常大的。例如,蜡烛的光强度大约为15,而太阳光的强度大约为10w。这中间的差异是非常大的,有着超级高的动态范围。
- 我们日常使用的屏幕,其最高亮度是经过一系列经验积累的,所以使用、用起来不会对眼睛有伤害;但自然界中的,比如我们直视太阳时,实际上是会对眼睛产生伤害的。
那为了改变色调映射tone mapping,则要更新WebGLRenderer上的toneMapping属性,有以下这些值
THREE.NoToneMapping (默认)
THREE.LinearToneMapping
THREE.ReinhardToneMapping
THREE.CineonToneMapping
THREE.ACESFilmicToneMapping
尽管我们的贴图不是HDR,但使用tone mapping可以塑造更真实的效果。
在计算曲面是否处于阴影中时,由于精度原因,阴影失真可能会发生在平滑和平坦表面上。 而现在在汉堡包上发生的是汉堡包在它自己的表面上投射了阴影。因此我们必须调整灯光阴影shadow的“偏移bias”和“法线偏移normalBias”属性来修复此阴影失真。
- bias通常用于平面,因此不适用于我们的汉堡包。但如果你有在一块平坦的表面上出现阴影失真,可以试着增加偏差直到失真消失。
- normalBias通常用于圆形表面,因此我们增加法向偏差直到阴影失真消失。