网站群集约化建设,wordpress主题更换logo,游戏是怎么制作的,织梦网络公司网站web3d一、前言粒子特效二维漫画可视化后期处理二、项目使用流程2.1 项目结构2.2 基本使用2.3 项目模板2.4 技术栈三、基础动画3.1 THREE.Clock3.2 GASP四、照相机8.1 正交相机8.2 透视相机4.3 相机控制器五、画布和全屏六、几何体七、Debug UI八、纹理贴图8.1 mipmapping8.2 放… web3d一、前言粒子特效二维漫画可视化后期处理二、项目使用流程2.1 项目结构2.2 基本使用2.3 项目模板2.4 技术栈三、基础动画3.1 THREE.Clock3.2 GASP四、照相机8.1 正交相机8.2 透视相机4.3 相机控制器五、画布和全屏六、几何体七、Debug UI八、纹理贴图8.1 mipmapping8.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后期chuliVisualization可视化 src views功能主界面
2.2 基本使用
//安装依赖
npm i
//运行项目
npm run dev2.3 项目模板 该模板集成最简单的一个three.js环境在此基础上可以自行搭建。
2.4 技术栈
前端vue three.js js
三、基础动画 概述本质就是在render()函数不断渲染的过程中调用动画每一帧不断增加目标体的位置以此循环
体验地址基础动画
3.1 THREE.Clock
// 时间动画
let clockAnimate(){
const elapsedTimeclock.getElapsedTime()cube.position.x Math.cos(elapsedTime)
cube.position.yMath.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渲染空间的下边界nearnear属性表示的是从距离相机多远的位置开始渲染一般情况会设置一个很小的值。 默认值0.1farfar属性表示的是距离相机多远的位置截止渲染如果设置的值偏小小会有部分场景看不到。 默认值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 透视相机 参数含义默认值fovfov表示视场所谓视场就是能够看到的角度范围人的眼睛大约能够看到180度的视场视角大小设置要根据具体应用一般游戏会设置60~90度45aspectaspect表示渲染窗口的长宽比如果一个网页上只有一个全屏的canvas画布且画布上只有一个窗口那么aspect的值就是网页窗口客户区的宽高比window.innerWidth/window.innerHeightnearnear属性表示的是从距离相机多远的位置开始渲染一般情况会设置一个很小的值。0.1farfar属性表示的是距离相机多远的位置截止渲染如果设置的值偏小会有部分场景看不到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.innerWidthsizes.height window.innerHeightcamera.aspect sizes.width / sizes.heightcamera.updateProjectionMatrix()renderer.setSize(sizes.width, sizes.height)renderer.setPixelRatio(window.devicePixelRatio)
}//双击全屏
let onWindowsScreen () {let isFullScreen document.fullscreenElementif (!isFullScreen) {renderer.domElement.requestFullscreen()} else {document.exitFullscreen()}
}
let expandFunction () {window.addEventListener(resize, onWindowsResize)window.addEventListener(dblclick, onWindowsScreen)
}六、几何体 概述几何体由一个个顶点粒子构成每个粒子包含了位置、uv贴图3d2d坐标对应等三个顶点形成一个面在three.js中。物体由一个个三角形面构成。
BufferGeometry是面片、线或点几何体的有效表述。包括顶点位置面片索引、法相量、颜色值、UV 坐标和自定义缓存属性值。使用 BufferGeometry 可以有效减少向 GPU 传输上述数据所需的开销。目前three.js的物体都用上了Buffer可以直接调用一些顶点可以使用这个。 演示链接三角形
let createBufferTriangle () {const count 50for (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.guihttps://github.com/dataarts/dat.gui 样式好看动画有点不流畅
lil-guihttps://lil-gui.georgealways.com/ 动画流畅官方案例用的多
八、纹理贴图
8.1 mipmapping
mip映射(mipmapping)是一种技术它包括一次又一次地创建半个较小版本的纹理直到得到1x1纹理。 所有这些纹理变化都会发送到GPUGPU将自动选择最合适的纹理版本。所有的这些都已经由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.comhttps://3dtextures.me/www.arroway-textures.ch/
纹理、材质、灯光
这部分可以参考网上的资料这里不做过多讲解
https://blog.csdn.net/weixin_43990650/article/details/121595334
九、阴影
9.1 灯光阴影
四步走
灯光cast球体cast平面receiverenderer设置 概述灯光利用照相机渲染出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 - 2directionalLight.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完成欢迎加入!!!
