关键词：

---

web3d

• • 一、前言
  • • 粒子特效
    • 二维漫画
    • 可视化
    • 后期处理
  • 二、项目使用流程
  • • 2.1 项目结构
    • 2.2 基本使用
    • 2.3 项目模板
    • 2.4 技术栈
  • 三、基础动画
  • • 3.1 THREE.Clock
    • 3.2 GASP
  • 四、照相机
  • • 8.1 正交相机
    • 8.2 透视相机
    • 4.3 相机控制器
  • 五、画布和全屏
  • 六、几何体
  • 七、Debug UI
  • 八、纹理贴图
  • • 8.1 mipmapping
    • 8.2 放大滤镜
    • 8.3 缩小滤镜
    • 8.3 UV贴图
    • • 资源推荐
  • 纹理、材质、灯光
  • 九、阴影
  • • 9.1 灯光阴影
    • 9.2 烘焙阴影
    • 9.3 阴影跟随
  • 十、粒子效果
  • • 9.3 阴影跟随
  • 十、粒子效果
• 官网链接：[数字孪生开发平台](http://101.132.190.14/)

---

一、前言

概述：基于WebGL的三维引擎，目前是国内资料最多、使用最广泛的三维引擎，可以制作一些3D可视化项目

目前随着元宇宙概念的爆火，THREE技术已经深入到了物联网、VR、游戏、数据可视化等多个平台。

最近一段时间主要对之前学习three.js的总结和记录，记录只对自己觉得重要的部分记录，其他的可以参考别的平台资源。

目前作品的相关展示平台已上线：VR_Team作品展示平台，欢迎大家查看。

项目开源地址：web3d-product，下面为一部分的网页的作品展示。

粒子特效

在线预览：粒子平面墙

在线预览：迷失太空

在线预览：粒子海浪

在线预览：银河系

二维漫画

在线预览：漫画-蜘蛛侠

可视化

在线预览：电脑主机拆解

后期处理

在线预览：后期处理-虚幻花朵

二、项目使用流程

2.1 项目结构

功能说明

• public文件夹：存放一些独立的案例界面（html格式），不需要依赖，可以直接运行在网页
  • assets存在依赖的资源
  • Basic：基础界面
  • Comic：二维漫画
  • Particles：粒子效果
  • Processing：后期chuli
  • Visualization：可视化
• src
  • views：功能主界面

2.2 基本使用

//安装依赖
npm i
//运行项目
npm run dev

2.3 项目模板

该模板集成最简单的一个three.js环境，在此基础上可以自行搭建。

2.4 技术栈

前端：vue + three.js + js

三、基础动画

概述：本质就是在render()函数不断渲染的过程中调用动画，每一帧不断增加目标体的位置，以此循环

体验地址：基础动画

3.1 THREE.Clock

// 时间动画
let clockAnimate=()=>
const elapsedTime=clock.getElapsedTime()

cube.position.x = Math.cos(elapsedTime)
cube.position.y=Math.sin(elapsedTime)

3.2 GASP

https://github.com/greensock/GSAP

// gasp动画
let gsapAnimate=()=>
	gsap.to(cube.position,  x: 5, duration: 3, delay:1)

四、照相机

8.1 正交相机

参数(属性)	含义
left	渲染空间的左边界
right	渲染空间的右边界
top	渲染空间的上边界
bottom	渲染空间的下边界
near	near属性表示的是从距离相机多远的位置开始渲染，一般情况会设置一个很小的值。 默认值0.1
far	far属性表示的是距离相机多远的位置截止渲染，如果设置的值偏小小，会有部分场景看不到。 默认值1000

let width = window.innerWidth;
let height = window.innerHeight;
const camera = new THREE.OrthographicCamera(width / - 2, width / 2, height / 2, height / - 2, 1, 1000);
scene.add(camera);
camera.position.set(100, 200, 100);

8.2 透视相机

参数	含义	默认值
fov	fov表示视场，所谓视场就是能够看到的角度范围，人的眼睛大约能够看到180度的视场，视角大小设置要根据具体应用，一般游戏会设置60~90度	45
aspect	aspect表示渲染窗口的长宽比，如果一个网页上只有一个全屏的canvas画布且画布上只有一个窗口，那么aspect的值就是网页窗口客户区的宽高比	window.innerWidth/window.innerHeight
near	near属性表示的是从距离相机多远的位置开始渲染，一般情况会设置一个很小的值。	0.1
far	far属性表示的是距离相机多远的位置截止渲染，如果设置的值偏小，会有部分场景看不到	1000

let width = window.innerWidth;
let height = window.innerHeight;
const camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000);
camera.position.set(150, 100, 300);
camera.lookAt(scene.position);

注意

• 相机的fov视口是上下的，不是左右
• 向左移动相机，我们的场景会向右移动

4.3 相机控制器

概述：通过鼠标控制相机的移动、旋转、缩放以此实现场景物体的控制

导包

import  OrbitControls  from 'three/examples/jsm/controls/OrbitControls'

应用

const controls = new OrbitControls(camera, renderer.domElement)

自旋转

controls.autoRotate = true

必须在render函数调用update实时更新才奏效

五、画布和全屏

像素比：将一个像素分成若干个n*n的像素，这样的话显示会更加清晰，一般来说像素比为2就够了

// 自适应屏幕
let onWindowsResize = () => 

    sizes.width = window.innerWidth
    sizes.height = window.innerHeight
    camera.aspect = sizes.width / sizes.height
    camera.updateProjectionMatrix()
    renderer.setSize(sizes.width, sizes.height)
    renderer.setPixelRatio(window.devicePixelRatio)


//双击全屏
let onWindowsScreen = () => 
    let isFullScreen = document.fullscreenElement
    if (!isFullScreen) 
    	renderer.domElement.requestFullscreen()
     else 
    	document.exitFullscreen()
    

let expandFunction = () => 
    window.addEventListener('resize', onWindowsResize)
    window.addEventListener('dblclick', onWindowsScreen)

六、几何体

概述：几何体由一个个顶点粒子构成，每个粒子包含了位置、uv贴图（3d=>2d坐标对应）等，三个顶点形成一个面，在three.js中。物体由一个个三角形面构成。

BufferGeometry：是面片、线或点几何体的有效表述。包括顶点位置，面片索引、法相量、颜色值、UV 坐标和自定义缓存属性值。使用 BufferGeometry 可以有效减少向 GPU 传输上述数据所需的开销。目前，three.js的物体都用上了Buffer，可以直接调用，一些顶点可以使用这个。

演示链接：三角形

let createBufferTriangle = () => 
    const count = 50
    for (let i = 0; i < count; i++) 
        const pointsArray = new Float32Array(9)
        for (let j = 0; j < 9; j++) 
            pointsArray[j] = (Math.random() - 0.5) * 5
        

        const geometry = new THREE.BufferGeometry()
        const material = new THREE.MeshBasicMaterial(
            color: new THREE.Color(
                Math.random(),
                Math.random(),
                Math.random(),
            ),
            opacity: Math.random(),
            transparent: true,
            // wireframe:true
        )
        geometry.setAttribute('position', new THREE.BufferAttribute(pointsArray, 3))
        // geometry.attributes.position = new THREE.BufferAttribute(pointsArray, 3)
        const triangle = new THREE.Mesh(geometry, material)
        scene.add(triangle)

    
  

七、Debug UI

dat.gui：https://github.com/dataarts/dat.gui 样式好看，动画有点不流畅

lil-gui：https://lil-gui.georgealways.com/ 动画流畅，官方案例用的多

八、纹理贴图

8.1 mipmapping

mip映射(mipmapping)是一种技术，它包括一次又一次地创建半个较小版本的纹理，直到得到1x1纹理。
所有这些纹理变化都会发送到GPU，GPU将自动选择最合适的纹理版本。所有的这些都已经由THREE.js和GPU处理，但是我们可以选择不同的过滤算法

8.2 放大滤镜

概述：原本的贴图大小大于要渲染的大小，如缩放物体，应用这个

8.3 缩小滤镜

概述：原本的贴图大小小于要渲染的大小，如缩放物体，应用这个

当纹理的minFilter属性使用NearestFilter时，我们可以不需要再mip映射了，可以通过以下代码为纹理停用mipmapping，使得GPU不再处理mip映射

//如果不在乎远处物品效果如失真之类的，纹理的minFilter属性使用 NearestFilter时可以停用mipmapping以获得更好性能，根据实际项目而定
colorTexture.generateMipmaps = false

参考链接：https://threejs.org/docs/index.html#api/zh/constants/Textures

参考链接：https://blog.csdn.net/weixin_43990650/article/details/121595334

8.3 UV贴图

参考链接：https://www.bilibili.com/read/cv15999592

掘金：https://juejin.cn/post/7101209181822124069

资源推荐

• www.poliigon.com
• https://3dtextures.me/
• www.arroway-textures.ch/

纹理、材质、灯光

这部分可以参考网上的资料，这里不做过多讲解

https://blog.csdn.net/weixin_43990650/article/details/121595334

九、阴影

9.1 灯光阴影

四步走

灯光cast=>球体cast=>平面receive=>renderer设置

概述：灯光利用照相机渲染出shadow map贴到场景中，得到阴影

简单例子

//直射光
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5)
scene.add(directionalLight)

directionalLight.position.set(2, 2, -1)
directionalLight.castShadow = true
directionalLight.shadow.mapSize.width = 1024
directionalLight.shadow.mapSize.height = 1024
directionalLight.shadow.camera.near = 1
directionalLight.shadow.camera.far = 6
directionalLight.shadow.camera.top = 2
directionalLight.shadow.camera.right = 2
directionalLight.shadow.camera.bottom = - 2
directionalLight.shadow.camera.left = - 2

directionalLight.shadow.radius = 10

//只是实体化的工具，参数修改上面的
const directionalLightCameraHelper = new THREE.CameraHelper(directionalLight.shadow.camera)
scene.add(directionalLightCameraHelper)
directionalLightCameraHelper.visible = false

注意：

• 只有平行光、点光源和聚光灯支持阴影
• 平行光是正交相机、其他的是透视相机，可以通过调节角度

9.2 烘焙阴影

概述：提前在blender渲染好阴影，这个不会变化，关闭渲染器阴影投射就行

9.3 阴影跟随

概述：在小球下面放置具有阴影贴图的平面，关闭渲染器阴影，跟随小球运动改变透明度

renderer.shadowMap.enabled = false

十、粒子效果

概述：粒子可以被用来创建星星、烟雾、雨滴、灰尘、火焰等等。我们可以使用合理的帧速率来创建数千个粒子。每个粒子都是由始终面向摄影机的平面（俩个三角形）组成的

参考链接：https://blog.csdn.net/weixin_43990650/article/details/121736698

101801718.png" alt=“6” style=“zoom:50%;” />

概述：提前在blender渲染好阴影，这个不会变化，关闭渲染器阴影投射就行

9.3 阴影跟随

概述：在小球下面放置具有阴影贴图的平面，关闭渲染器阴影，跟随小球运动改变透明度

renderer.shadowMap.enabled = false

十、粒子效果

概述：粒子可以被用来创建星星、烟雾、雨滴、灰尘、火焰等等。我们可以使用合理的帧速率来创建数千个粒子。每个粒子都是由始终面向摄影机的平面（俩个三角形）组成的

官网链接：数字孪生开发平台

本项目由`江苏海洋大学计算机工程学院VR_Team106完成，欢迎加入!!!

那些你不知道的炫酷开关交互效果(12种)(代码片段)

...12款不同交互效果，相信总有一款适合你。那些你不知道的炫酷交互效果系列：那些你不知道的炫酷按钮交互效果那些你不知道的炫酷导航交互效果那些你不知道的炫酷开关交互效果效果1基于普通的开关效果增加了向内部延伸的... 查看详情

教你用vue3+three.js写一个超级炫酷的3d登陆页面！(代码片段)

点击上方 前端下午茶，回复“加群”加入我们一起学习，天天进步前言：大家好，我是xx传媒严导（xx这两个字请自行脑补）。该篇文章用到的主要技术：vue3、three.js我们先看看成品效果：高清大... 查看详情

刚学了一个炫酷3d三棱锥立体特效，快来看看(代码片段)

目录标题演示技术栈源码css部分js部分点击直接资料领取演示技术栈3D特效的话最容易让人想到的应该是three.js吧。我们今天来说说它。Three.js是基于原生WebGL封装运行的三维引擎，在所有WebGL引擎中，Three.js是国内文资料最... 查看详情

刚学了一个炫酷3d三棱锥立体特效，快来看看(代码片段)

目录标题演示技术栈源码css部分js部分点击直接资料领取演示技术栈3D特效的话最容易让人想到的应该是three.js吧。我们今天来说说它。Three.js是基于原生WebGL封装运行的三维引擎，在所有WebGL引擎中，Three.js是国内文资料最... 查看详情

那些你不知道的炫酷导航交互效果(代码片段)

基于上次发布的那些你不知道的炫酷按钮交互效果反馈比较好，后续将继续收集那些炫酷的交互效果，希望可以给你的项目添砖加瓦，更上一层楼。那些你不知道的炫酷交互效果系列：那些你不知道的炫酷按钮交互效果那些你不... 查看详情

使用three.js来做球的3d特效(代码片段)

...之间的关系一点都不好构建啊.于是我在脑内构建了非常炫酷的效果.但是苦于没有思路后来在群里问群友,群友给了一个思路,于是我在网上找到了一篇关于腾讯前端设计高的粒子特效.文章放在这里(https://tgideas.qq.com/webplat/info/news_v... 查看详情

网页3d效果库three.js初窥

网页3D效果库Three.js初窥背景一直想研究下web页面的3D效果，最后选择了一个比较的成熟的框架Three.js下手ThreeJs官网ThreeJs-github;接下来我会陆续翻译Three.js官网的文档，部分文字和代码为我个人添加。第一部分：three.js介绍创建场... 查看详情

使用three.js实现炫酷的赛博朋克风格3d数字地球大屏🌐

...时间，结合Three.js和CSS实现赛博朋克2077风格视觉效果实现炫酷3D数字地球大屏页面。页面使用React+Three.js+Echarts+stylus技术栈，本文涉及到的主要知识点包括：THREE.Spherical球体坐标系的应用、Shader结合TWEEN实现飞线和冲击波动画效果... 查看详情

中秋快乐如何用three.js实现我的太空遐想3d网页(代码片段)

 目录创作背景功能分解创建3d地球创建3d月球 创建3d小火箭设计地球自转轨迹和月球、小火箭旋转的行星轨道1.地球的自转轨迹2.月球的公转轨迹3.小火箭的公转轨迹最终效果展现 彩蛋创作背景        马上又是一年中秋佳... 查看详情

用python-myqr参数制作自己的炫酷二维码(代码片段)

1.下载myqr库在Python3环境下，输入如下指令：pipinstallmyqr等到提示下载成功就可以了2.导入myqr库打开pycharm的file-setting-PythonInterpreter在打开的界面中点击+号，搜索MyQr，选中第一个，点击左下角的installPackage下载好啦，安装成功，现... 查看详情

3d渲染优化入three.js(代码片段)

...有最新更新的浏览器通常也具有最佳性能。3、减少场景中的多边形数量第一种优化方法涉及场景中多边形的数量。在每次执行3D渲染期间，处理器负责显示场景中的对象。要处理的多边形（3D对象结构的 查看详情

手把手教你做一个python+matplotlib的炫酷的数据可视化动图(代码片段)

1.效果图 2.注意：上述资料是虚拟的，为了学习制作动图，构建的。仅供学习，不是真实数据，请别误传。当自己需要对真实数据进行可视化时，可进行适当修改。 3.代码：#第1步：导出模块，固定importpandasaspdimportmatplotli... 查看详情

只要10分钟，搭建属于个人的炫酷网站，你还在犹豫什么？(代码片段)

💂个人主页:IT学习日记🤟版权:本文由【IT学习日记】原创、在CSDN首发、需要转载请联系博主💬如果文章对你有帮助、欢迎关注、点赞、收藏(一键三连)和订阅专栏哦💅想寻找共同成长的小伙伴，请点击【技... 查看详情

three.js入门——画一个3d正方体(代码片段)

...是实现的效果图，还是挺有立体感的吧？绘制前的准备写代码前，要先下载最新的three.js框架包，引入自己的页面。具体实现过程准备一个canvas画布这个画布是我 查看详情

three.js3d建模必备基础(代码片段)

...1a;使用NSDT场景设计器快速搭建3D场景。1、索引面集three.js中的网格就是我们之前中所说的索引面集。在three.js网格中，所有的多边形都是三角形。three.js中的几何是THREE.Geometry类型的对象。任何几何对象都包含一个顶点数组... 查看详情

three.js教程：第一个3d场景(代码片段)

...辑器加入你3D工具链其他工具系列：https://nsdt.cloud/下面的代码完整展示了通过three.js引擎创建的一个三维场景，在场景中绘制并渲染了一个立方体的效果，为了大家更好的宏观了解three.js引擎，尽量使用了一段短小但完整的代码... 查看详情

用three.js绘制一个3d天体系统(代码片段)

...很多资料和文档，这里做了一些小实践，记录分享一下。代码：链接预览：链接demo：前置知识WebGL和Threejs的关系：WebGL是一种3D绘图协议，这种绘图技术标准结合了JavaScript和OpenGLES2.0，在HTML5的Canvas元素中使用，从而可以在Web浏... 查看详情

three.js进阶之旅：全景漫游-初阶移动相机版(代码片段)

3D全景技术可以实现日常生活中的很多功能需求，比如地图的街景全景模式、数字展厅、在线看房、社交媒体的全景图预览、短视频直播平台的全景直播等。Three.js实现全景功能也是十分方便的，本文将介绍如何一步步优雅实现... 查看详情